diff --git a/README.md b/README.md index 2b76a7ce..be0e8e75 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,15 @@ The best Swiper component for React Native. -## Feature +## Feature & TODO + +- [ ] More switch effects + +- [ ] Unit tests + +- [ ] Check typo + +- [ ] Optimal performance when `` re-render - [x] Infinite loop @@ -24,21 +32,21 @@ The best Swiper component for React Native. - [x] Autoplay -## Changelogs & TODO +- [x] Custom pagination style -- [ ] More switch effects +## Changelogs -- [ ] Unit tests +- **[v1.1.0]** -- [ ] Check typo + + [5de06a7](https://github.com/leecade/react-native-swiper/commit/5de06a7aa86318ad38720728022b80e5cf98a2ab) New prop: `renderPagination`. (thanks [@aksonov](https://github.com/aksonov)) -- [ ] Optimal performance when `` re-render +- **[v1.0.4]** -- [ ] Making the `width` / `height` optional prop, use `measure` function instead + + [21cb373](https://github.com/leecade/react-native-swiper/commit/21cb3732578588f9d47ee7ddda541577ad691970) fixes [#2](https://github.com/leecade/react-native-swiper/issues/2) Solve the problem of installation. (thanks [@jamwaffles](https://github.com/jamwaffles)) -- [x] **[v1.0.3]** fixes [#1](https://github.com/leecade/react-native-swiper/issues/1) Two 'horizontal' in propTypes. (thanks [@MacyzZ](https://github.com/MacyzZ)) +- [v1.0.3] -- [x] **[v1.0.4]** fixes [#2](https://github.com/leecade/react-native-swiper/issues/2) Solve the problem of installation. (thanks [@jamwaffles](https://github.com/jamwaffles)) + + [0f796f3](https://github.com/leecade/react-native-swiper/commit/0f796f3557b5aeb1772573cd7ecae2e835bccc0b) fixes [#1](https://github.com/leecade/react-native-swiper/issues/1) Two 'horizontal' in propTypes. (thanks [@MacyzZ](https://github.com/MacyzZ)) ## Show Cases @@ -52,6 +60,10 @@ The best Swiper component for React Native. ![](http://i.imgur.com/hP3f3oO.gif =300x) +### [examples/swiper_number.js](https://github.com/leecade/react-native-swiper/blob/master/examples/examples/swiper_number.js) + +![](http://i.imgur.com/0rqESVb.gif =300x) + ### [examples/phone.js](https://github.com/leecade/react-native-swiper/blob/master/examples/examples/phone.js) ![](http://i.imgur.com/c1BhjZm.gif =300x) @@ -165,8 +177,9 @@ AppRegistry.registerComponent('swiper', () => swiper) | :------------ |:---------------:| :---------------:| :-----| | showsPagination | true | `bool` | Set to `true` make pagination visible. | | paginationStyle | {...} | `style` | Custom styles will merge with the default styles. | -| dot | `` | `element` | Allow custom the dot element | -| activeDot | `` | `element` | Allow custom the active-dot element | +| renderPagination | - | `function` | Complete control how to render pagination with two params (`index`, `total`) ref to `this.state.index` / `this.state.total`, For example: show numbers instead of dots. | +| dot | `` | `element` | Allow custom the dot element. | +| activeDot | `` | `element` | Allow custom the active-dot element. | #### Autoplay diff --git a/dist/index.js b/dist/index.js index 00b1c24f..66ba11cc 100644 --- a/dist/index.js +++ b/dist/index.js @@ -406,15 +406,15 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d }] }, _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement( _React$StyleSheet$Text$View$ScrollView$TouchableOpacity.ScrollView, - _extends({ ref: 'scrollView', + _extends({ ref: 'scrollView' + }, props, { contentContainerStyle: [styles.wrapper, props.style], contentOffset: initOffset, - key: key, - onMomentumScrollEnd: this.onScrollEnd - }, props), + onMomentumScrollEnd: this.onScrollEnd, + key: key }), pages ), - props.showsPagination && (props.renderPagination ? this.props.renderPagination(state.index, state.total) : this.renderPagination()), + props.showsPagination && (props.renderPagination ? this.props.renderPagination.call(this, state.index, state.total) : this.renderPagination()), this.renderTitle(), this.props.showsButtons && this.renderButtons() ); diff --git a/src/index.js b/src/index.js index b676f2b2..f8b495ea 100644 --- a/src/index.js +++ b/src/index.js @@ -383,15 +383,15 @@ export default React.createClass({ height: state.height }]}> + key={key}> {pages} {props.showsPagination && (props.renderPagination - ? this.props.renderPagination(state.index, state.total) + ? this.props.renderPagination.call(this, state.index, state.total) : this.renderPagination())} {this.renderTitle()} {this.props.showsButtons && this.renderButtons()}