diff --git a/readme.md b/readme.md
index 393100b..157bf10 100644
--- a/readme.md
+++ b/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
diff --git a/src/components/indicator/index.js b/src/components/indicator/index.js
index cf45717..a3b84d9 100644
--- a/src/components/indicator/index.js
+++ b/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 (
-
+
);
});
let flexDirection = /^(top|bottom)$/
- .test(indicatorPosition)?
- 'row':
- 'column';
+ .test(indicatorPosition) ?
+ 'row' :
+ 'column';
return (
-
+
{dots}
);
diff --git a/src/components/indicator/styles.js b/src/components/indicator/styles.js
index b68c7d1..32cb2c2 100644
--- a/src/components/indicator/styles.js
+++ b/src/components/indicator/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
diff --git a/src/components/pages/index.js b/src/components/pages/index.js
index 864a63a..97b3fac 100644
--- a/src/components/pages/index.js
+++ b/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,14 +121,14 @@ 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) {
@@ -130,11 +136,11 @@ export default class Pages extends PureComponent {
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,10 +156,10 @@ 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));
}
@@ -161,7 +167,7 @@ export default class Pages extends PureComponent {
}
onScrollEnd() {
- let { onScrollEnd } = this.props;
+ let {onScrollEnd} = this.props;
if ('function' === typeof onScrollEnd) {
onScrollEnd(Math.round(this.progress));
@@ -169,8 +175,8 @@ export default class Pages extends PureComponent {
}
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;
@@ -178,7 +184,7 @@ export default class Pages extends PureComponent {
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 (
-
- {React.cloneElement(page, { index, pages, progress })}
+
+ {React.cloneElement(page, {index, pages, progress})}
);
}
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 {
{this.renderPages(props)}
-
+
);
}
diff --git a/src/components/pages/styles.js b/src/components/pages/styles.js
index ffc553f..4a44872 100644
--- a/src/components/pages/styles.js
+++ b/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,
+ },
+
});