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": {