Added Some feature + updated docs

readme.md

@@ -65,12 +65,13 @@ class Example extends Component {
  indicatorColor    | Page indicator color                   |   String | rgb(255, 255, 255)
  indicatorOpacity  | Page indicator opacity (inactive dots) |   Number | 0.30
  indicatorPosition | Page indicator position                |   String | bottom
+ paged             | Page Scroll Type .                     |   Boolean| true
  containerStyle    | Style for container view               |   Object | -
  progress          | Animated.Value updated with progress   |   Object | -
  onScrollEnd       | Scroll end callback                    | Function | -
  renderPager       | Render pager callback                  | Function | -
 
-Possible values for `indicatorPosition` are `none`, `top`, `right`, `bottom` and `left`
+Possible values for `indicatorPosition` are `none`, `top`, `right`, `bottom`, `left`, `bottomLeft`, `bottomRight`, `topLeft` and `topRight`;
 
 ## Methods
 

src/components/indicator/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { View, Animated, ViewPropTypes } from 'react-native';
+import React, {PureComponent} from 'react';
+import {View, Animated, ViewPropTypes} from 'react-native';
 
 import styles from './styles';
 
@@ -17,6 +17,10 @@ export default class Indicator extends PureComponent {
       'right',
       'bottom',
       'left',
+      'topRight',
+      'topLeft',
+      'bottomRight',
+      'bottomLeft',
     ]).isRequired,
   };
 
@@ -50,20 +54,20 @@ export default class Indicator extends PureComponent {
           ],
         });
 
-      let style = { opacity, backgroundColor };
+      let style = {opacity, backgroundColor};
 
       return (
-        <Animated.View style={[styles.dot, style]} key={index} />
+        <Animated.View style={[styles.dot, style]} key={index}/>
       );
     });
 
     let flexDirection = /^(top|bottom)$/
-      .test(indicatorPosition)?
-        'row':
-        'column';
+      .test(indicatorPosition) ?
+      'row' :
+      'column';
 
     return (
-      <View style={[styles.container, { flexDirection }, style]} {...props}>
+      <View style={[styles.container, {flexDirection}, style]} {...props}>
         {dots}
       </View>
     );

src/components/indicator/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
   container: {

src/components/pages/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent, Children } from 'react';
-import { View, ScrollView, Animated, Platform, ViewPropTypes } from 'react-native';
+import React, {PureComponent, Children} from 'react';
+import {View, ScrollView, Animated, Platform, ViewPropTypes} from 'react-native';
 
 import Indicator from '../indicator';
 import styles from './styles';
@@ -26,6 +26,7 @@ export default class Pages extends PureComponent {
 
     horizontal: true,
     rtl: false,
+    paged: true
   };
 
   static propTypes = {
@@ -40,6 +41,10 @@ export default class Pages extends PureComponent {
       'right',
       'bottom',
       'left',
+      'bottomLeft',
+      'bottomRight',
+      'topLeft',
+      'topRight',
     ]),
 
     startPage: PropTypes.number,
@@ -56,6 +61,7 @@ export default class Pages extends PureComponent {
     onLayout: PropTypes.func,
     onScrollEnd: PropTypes.func,
     renderPager: PropTypes.func,
+    paged: PropTypes.bool
   };
 
   constructor(props) {
@@ -69,7 +75,7 @@ export default class Pages extends PureComponent {
     this.updateRef = this.updateRef.bind(this, 'scroll');
     this.renderPage = this.renderPage.bind(this);
 
-    let { startPage, progress = new Animated.Value(startPage) } = this.props;
+    let {startPage, progress = new Animated.Value(startPage)} = this.props;
 
     this.progress = startPage;
     this.mounted = false;
@@ -101,12 +107,12 @@ export default class Pages extends PureComponent {
   }
 
   componentWillReceiveProps(props) {
-    let { progress } = props;
+    let {progress} = props;
 
     if (progress !== this.props.progress) {
       progress.setValue(this.progress);
 
-      this.setState({ progress });
+      this.setState({progress});
     }
   }
 
@@ -115,26 +121,26 @@ export default class Pages extends PureComponent {
   }
 
   onLayout(event) {
-    let { width, height } = event.nativeEvent.layout;
-    let { onLayout } = this.props;
+    let {width, height} = event.nativeEvent.layout;
+    let {onLayout} = this.props;
 
     if ('function' === typeof onLayout) {
       onLayout(event);
     }
 
-    this.setState({ width, height, layout: true });
+    this.setState({width, height, layout: true});
   }
 
   onScroll(event) {
     if (-1 === this.scrollState) {
       return;
     }
 
-    let { horizontal } = this.props;
-    let { [horizontal? 'x' : 'y']: offset } = event.nativeEvent.contentOffset;
-    let { [horizontal? 'width' : 'height']: base, progress } = this.state;
+    let {horizontal} = this.props;
+    let {[horizontal ? 'x' : 'y']: offset} = event.nativeEvent.contentOffset;
+    let {[horizontal ? 'width' : 'height']: base, progress} = this.state;
 
-    progress.setValue(this.progress = base? offset / base : 0);
+    progress.setValue(this.progress = base ? offset / base : 0);
 
     let discreteProgress = Math.round(this.progress);
 
@@ -150,35 +156,35 @@ export default class Pages extends PureComponent {
   }
 
   onScrollEndDrag() {
-    let { horizontal } = this.props;
+    let {horizontal, paged} = this.props;
 
     /* Vertical pagination is not working on android, scroll by hands */
-    if ('android' === Platform.OS && !horizontal) {
+    if ('android' === Platform.OS && !horizontal & paged) {
       this.scrollToPage(Math.round(this.progress));
     }
 
     this.scrollState = 1;
   }
 
   onScrollEnd() {
-    let { onScrollEnd } = this.props;
+    let {onScrollEnd} = this.props;
 
     if ('function' === typeof onScrollEnd) {
       onScrollEnd(Math.round(this.progress));
     }
   }
 
   scrollToPage(page, animated = true) {
-    let { horizontal } = this.props;
-    let { [horizontal? 'width' : 'height']: base } = this.state;
+    let {horizontal} = this.props;
+    let {[horizontal ? 'width' : 'height']: base} = this.state;
 
     if (animated) {
       this.scrollState = 1;
     }
 
     if (this.mounted && this.scroll) {
       this.scroll.scrollTo({
-        [horizontal? 'x' : 'y']: page * base,
+        [horizontal ? 'x' : 'y']: page * base,
         animated,
       });
     }
@@ -193,40 +199,40 @@ export default class Pages extends PureComponent {
   }
 
   renderPage(page, index) {
-    let { width, height, progress } = this.state;
-    let { children, horizontal, rtl } = this.props;
+    let {width, height, progress} = this.state;
+    let {children, horizontal, rtl} = this.props;
 
     let pages = Children.count(children);
 
-    let pageStyle = (horizontal && rtl)?
-      styles.rtl:
+    let pageStyle = (horizontal && rtl) ?
+      styles.rtl :
       null;
 
     /* Adjust progress by page index */
     progress = Animated.add(progress, -index);
 
     return (
-      <View style={[{ width, height }, pageStyle]}>
-        {React.cloneElement(page, { index, pages, progress })}
+      <View style={[{width, height}, pageStyle]}>
+        {React.cloneElement(page, {index, pages, progress})}
       </View>
     );
   }
 
   renderPager(pager) {
-    let { renderPager, horizontal, rtl } = this.props;
+    let {renderPager, horizontal, rtl} = this.props;
 
     if ('function' === typeof renderPager) {
-      return renderPager({ horizontal, rtl, ...pager });
+      return renderPager({horizontal, rtl, ...pager});
     }
 
-    let { indicatorPosition } = pager;
+    let {indicatorPosition} = pager;
 
     if ('none' === indicatorPosition) {
       return null;
     }
 
-    let indicatorStyle = (horizontal && rtl)?
-      styles.rtl:
+    let indicatorStyle = (horizontal && rtl) ?
+      styles.rtl :
       null;
 
     return (
@@ -237,20 +243,20 @@ export default class Pages extends PureComponent {
   }
 
   renderPages(props) {
-    let { horizontal, rtl, style, children } = this.props;
-    let { [horizontal? 'width' : 'height']: base, layout } = this.state;
+    let {horizontal, rtl, style, children} = this.props;
+    let {[horizontal ? 'width' : 'height']: base, layout} = this.state;
 
     if (!layout) {
       return null;
     }
 
-    let scrollStyle = (horizontal && rtl)?
-      styles.rtl:
+    let scrollStyle = (horizontal && rtl) ?
+      styles.rtl :
       null;
 
     let contentOffset = {
-      [horizontal? 'x' : 'y']: base * Math.floor(this.progress),
-      [horizontal? 'y' : 'x']: 0,
+      [horizontal ? 'x' : 'y']: base * Math.floor(this.progress),
+      [horizontal ? 'y' : 'x']: 0,
     };
 
     return (
@@ -269,15 +275,15 @@ export default class Pages extends PureComponent {
   }
 
   render() {
-    let { progress } = this.state;
-    let { horizontal } = this.props;
+    let {progress} = this.state;
+    let {horizontal} = this.props;
     let {
       style,
       containerStyle,
       children,
       indicatorColor,
       indicatorOpacity,
-      indicatorPosition = horizontal? 'bottom' : 'right',
+      indicatorPosition = horizontal ? 'bottom' : 'right',
       ...props
     } = this.props;
 
@@ -296,7 +302,7 @@ export default class Pages extends PureComponent {
       <View style={[styles.container, containerStyle]} onLayout={this.onLayout}>
         {this.renderPages(props)}
 
-        <Pager />
+        <Pager/>
       </View>
     );
   }

src/components/pages/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
   rtl: {
@@ -38,4 +38,25 @@ export default StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  topLeft: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  bottomLeft: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  topRight: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  bottomRight: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+  },
+
 });