Skip to content

Commit 45698f9

Browse files
pratt3351pratt3351
authored
Merge pull request #13 from rouge3351/update/add-vertical-props
Update/add vertical props
2 parents 7699e64 + 8b62aab commit 45698f9

File tree

4 files changed

+107
-5491
lines changed

4 files changed

+107
-5491
lines changed

‎README.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ react-native-animated-pagination-dot
44
Paginate component for React native simple dot with **moving animation**
55

66
-----
7-
![download](https://img.shields.io/npm/dm/react-native-animated-pagination-dot?logo=npm&style=flat-square)
8-
![npm version](https://img.shields.io/npm/v/react-native-animated-pagination-dot?style=flat-square)
9-
![stars](https://img.shields.io/github/stars/rouge3351/react-native-animated-pagination-dot?logo=github&style=flat-square)
7+
[![download](https://img.shields.io/npm/dm/react-native-animated-pagination-dot?logo=npm&style=flat-square)](https://www.npmjs.com/package/react-native-animated-pagination-dot)
8+
[![npm version](https://img.shields.io/npm/v/react-native-animated-pagination-dot?style=flat-square)](https://www.npmjs.com/package/react-native-animated-pagination-dot)
9+
[![stars](https://img.shields.io/github/stars/rouge3351/react-native-animated-pagination-dot?logo=github&style=flat-square)](https://github.com/rouge3351/react-native-animated-pagination-dot)
1010
-----
1111

1212
## Installation
@@ -56,19 +56,21 @@ export default ExampleDotPaginate;
5656
-----
5757
## Example
5858

59-
<img src="https://user-images.githubusercontent.com/4319422/91634767-df5c0880-ea2d-11ea-90f6-ae7bb4030325.gif" alt="Pagination Dot Demo" width="250"/>
59+
<img src="https://user-images.githubusercontent.com/4319422/92298858-39a61d80-ef88-11ea-85dd-e7a4a5c115dc.gif" alt="Pagination Dot Demo" width="320"/>
6060

6161
-----
6262
## API
6363

6464
### Props
6565

66-
| **Prop** | **Type** | **Description** |
67-
| --------------------------- | -------------------------------- | --------------------------------------------------- |
68-
| `curPage` | `number` | Pagination curernt Page |
69-
| `maxPage` | `number` | Total Page in Pagination |
70-
| `activeDotColor` | `string` | Active Dot Color. dot will control by opacity |
71-
| `sizeRatio` | `number`(default. 1.0) | Customize Dot Size. minimum value is 1.0 (recommend value is 1.0 ~ 2.0) |
66+
| **Prop** | **Type** | **Required(Default Value)** | **Description** |
67+
| --------------------------- | ----------------------------| ---------------------------- | --------------------------------------------------- |
68+
| `curPage` | `number` | required | Pagination curernt Page |
69+
| `maxPage` | `number` | required | Total Page in Pagination |
70+
| `activeDotColor` | `string` | required | Active Dot Color. dot will control by opacity |
71+
| `sizeRatio` | `number` | 0.1 | Customize Dot Size. minimum value is 1.0 (*recommend 1.0 ~ 2.0*) |
72+
| `vertical` | `boolean` | false | Dot direction |
73+
7274

7375

7476
## License

‎examples/App.js‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const TestDotContainer = ( {color, sizeRatio = 1.0, maxPage=10} )=>{
2121
const [page, setPage] = useState(0);
2222

2323
return (
24-
<View style={{flex:1,}}>
24+
<View style={{flex:1, borderBottomWidth:0.5, borderBottomColor:'grey', marginBottom:10}}>
2525
<View style={{flex:1, flexDirection:'row'}}>
2626
<View style={{flex:1, justifyContent:'space-between', flexDirection:'row', alignItems:'center', marginRight:12}}>
2727
<Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>page</Text>
@@ -57,7 +57,56 @@ const TestDotContainer = ( {color, sizeRatio = 1.0, maxPage=10} )=>{
5757

5858
</View>
5959
)
60-
}
60+
};
61+
62+
const TestDotVerticalContainer = ( {color, sizeRatio = 1.0, maxPage=10} )=>{
63+
64+
const [page, setPage] = useState(0);
65+
66+
return (
67+
<View style={{flex:1, flexDirection:'row', borderBottomWidth:0.5, borderBottomColor:'grey', marginBottom:10}}>
68+
<View style={{flex:5, flexDirection:'column'}}>
69+
<View style={{flex:1, justifyContent:'space-between', flexDirection:'row', alignItems:'center'}}>
70+
<Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>page</Text>
71+
<Text style={{ fontSize: 16, fontWeight: '600', color: 'grey',}}>{page+1} / {maxPage}</Text>
72+
</View>
73+
<View style={{flex:1, justifyContent:'space-between', flexDirection:'row', alignItems:'center'}}>
74+
<Text style={{ fontSize: 16, fontWeight: '400', color: 'black',}}>sizeRatio</Text>
75+
<Text style={{ fontSize: 16, fontWeight: '600', color: 'grey',}}>{sizeRatio}</Text>
76+
</View>
77+
78+
<View style={{flex:1, justifyContent:'space-between', flexDirection:'row'}}>
79+
<Button
80+
title="Prev"
81+
onPress={()=>{
82+
setPage(page-1);
83+
}}/>
84+
85+
<Button
86+
title="Next"
87+
onPress={()=>{
88+
setPage(page+1);
89+
}}/>
90+
</View>
91+
92+
</View>
93+
94+
<View style={{flex:1, flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
95+
96+
<PaginationDot
97+
activeDotColor={color}
98+
curPage={page}
99+
maxPage={maxPage}
100+
sizeRatio={sizeRatio}
101+
vertical={true}
102+
/>
103+
104+
</View>
105+
106+
</View>
107+
)
108+
};
109+
61110

62111
const App = () => {
63112
return (
@@ -70,10 +119,11 @@ const App = () => {
70119
fontWeight: '600',
71120
color: 'black',}}>Animated Pagination Dots</Text>
72121
</View>
73-
<View style={{flex:2, flexDirection:'column', paddingVertical:30, paddingHorizontal:20, marginBottom:20 }}>
122+
<View style={{flex:4, flexDirection:'column', paddingVertical:30, paddingHorizontal:20, marginBottom:20 }}>
74123
<TestDotContainer maxPage={20} color={'black'} sizeRatio={1} />
75-
<TestDotContainer maxPage={10} color={'red'} sizeRatio={1.5} />
76-
<TestDotContainer maxPage={4} color={'green'} sizeRatio={1.0} />
124+
<TestDotContainer maxPage={4} color={'green'} sizeRatio={1.0}/>
125+
<TestDotVerticalContainer maxPage={10} color={'rgb(0,0,120)'} />
126+
<TestDotVerticalContainer maxPage={4} color={'blue'} sizeRatio={1.5}/>
77127
</View>
78128
</View>
79129
</View>

0 commit comments

Comments
 (0)