diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfe8d1c..45422ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 0.1.3 (October 1, 2017)
+
+* Allow to customize the left button text and callback.
+
+## 0.1.2 (September 16, 2017)
+
+* Remove flicker when scrolling through pages with next button.
+
## 0.1.1 (October 11, 2016)
* Detect light background and adapt the text and controls to it.
diff --git a/README.md b/README.md
index 78817ea..7769a67 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,8 @@ Props:
* `showSkip` (optional): a bool flag indicating whether the Skip button should be show. Defaults to `true`.
* `showNext` (optional): a bool flag indicating whether the Next arrow button should be show. Defaults to `true`.
* `showDone` (optional): a bool flag indicating whether the Done checkmark button should be show. Defaults to `true`.
+* `onLeft` (optional): a callback that is fired when user taps on left button.
+* `leftText` (optional): text to show on left button. Should fit into 70px width. Defaults to `Skip`.
## To Do
diff --git a/components/Buttons.js b/components/Buttons.js
index 0177e97..eef86a2 100644
--- a/components/Buttons.js
+++ b/components/Buttons.js
@@ -3,7 +3,7 @@ import { View, TouchableOpacity, Text } from 'react-native';
const SymbolButton = ({ isLight, size, onPress, style, textStyle, children }) => (
-
+
{children}
@@ -11,7 +11,7 @@ const SymbolButton = ({ isLight, size, onPress, style, textStyle, children }) =>
const TextButton = ({ isLight, size, onPress, textStyle, children }) => (
-
+
{children}
diff --git a/components/Paginator.js b/components/Paginator.js
index f4c2971..4bf8058 100644
--- a/components/Paginator.js
+++ b/components/Paginator.js
@@ -1,13 +1,37 @@
import React from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
+import { View, TouchableOpacity, Text, Dimensions } from 'react-native';
import PageDots from './PageDots';
import { SymbolButton, TextButton } from './Buttons';
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const RATIO = SCREEN_HEIGHT / SCREEN_WIDTH;
+
+const a = (small, regular, big, X, XMax) => {
+ switch (true) {
+ case SCREEN_HEIGHT === 896 || SCREEN_HEIGHT === 926:
+ return XMax !== undefined ? XMax : big !== undefined ? big : regular;
+ case SCREEN_HEIGHT === 812 || SCREEN_HEIGHT === 844:
+ return X !== undefined ? X : regular;
+ case SCREEN_WIDTH <= 360 || RATIO < 1.66:
+ return small;
+ case SCREEN_WIDTH < 414:
+ return regular;
+ default:
+ return big !== undefined ? big : regular;
+ }
+}
+
const getDefaultStyle = (isLight) => ({
color: isLight ? 'rgba(0, 0, 0, 0.8)' : '#fff',
});
+const LeftButton = ({ isLight, leftText, ...props }) => (
+
+ {leftText}
+
+);
+
const SkipButton = ({ isLight, ...props }) => (
Skip
@@ -26,12 +50,14 @@ const DoneButton = ({ isLight, size, ...props }) => (
);
const BUTTON_SIZE = 40;
-const Paginator = ({ isLight, overlay, showSkip, showNext, showDone, pages, currentPage, onEnd, onNext }) => (
+const Paginator = ({ isLight, overlay, showSkip, showNext, showDone, pages, currentPage, onEnd, onNext, onLeft, leftText }) => (
- {showSkip && currentPage + 1 !== pages ?
- :
- null
+ {onLeft ?
+ :
+ (showSkip && currentPage + 1 !== pages ?
+ :
+ null)
}
@@ -46,8 +72,9 @@ const Paginator = ({ isLight, overlay, showSkip, showNext, showDone, pages, curr
const styles = {
container: {
- height: 60,
+ height: a(60, 60, 60, 80, 80),
paddingHorizontal: 0,
+ paddingBottom: a(0, 0, 0, 20, 20),
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
diff --git a/index.js b/index.js
index 43cfab4..027c24c 100644
--- a/index.js
+++ b/index.js
@@ -81,6 +81,8 @@ export default class Onboarding extends Component {
currentPage={this.state.currentPage}
onEnd={this.props.onEnd}
onNext={this.goNext}
+ onLeft={this.props.onLeft}
+ leftText={this.props.leftText}
/>
);
@@ -98,6 +100,7 @@ Onboarding.propTypes = {
showSkip: PropTypes.bool,
showNext: PropTypes.bool,
showDone: PropTypes.bool,
+ leftText: PropTypes.string,
};
Onboarding.defaultProps = {
@@ -105,4 +108,5 @@ Onboarding.defaultProps = {
showSkip: true,
showNext: true,
showDone: true,
+ leftText: 'Skip',
};
diff --git a/package.json b/package.json
index 5203665..dbde641 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-simple-onboarding",
- "version": "0.1.1",
+ "version": "0.1.3",
"description": "A simple onboarding component for React Native",
"main": "index.js",
"scripts": {