Remove flicker when scrolling with next button. 0.1.2

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.

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
 

components/Buttons.js

@@ -3,15 +3,15 @@ import { View, TouchableOpacity, Text } from 'react-native';
 
 const SymbolButton = ({ isLight, size, onPress, style, textStyle, children }) => (
   <View style={{ height: size, width: size, justifyContent: 'center', ...style }}>
-    <TouchableOpacity style={{ flex: 0 }} onPress={onPress}>
+    <TouchableOpacity style={{ flex: 0 }} onPress={onPress} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
       <Text style={{ textAlign: 'center', fontSize: size / 1.7, ...textStyle }}>{children}</Text>
     </TouchableOpacity>
   </View>
 );
 
 const TextButton = ({ isLight, size, onPress, textStyle, children }) => (
   <View style={{ flex: 0 }}>
-    <TouchableOpacity style={{ flex: 0 }} onPress={onPress}>
+    <TouchableOpacity style={{ flex: 0 }} onPress={onPress} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
       <Text style={{ fontSize: size / 2.5, ...textStyle }}>{children}</Text>
     </TouchableOpacity>
   </View>

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 }) => (
+  <TextButton {...props} textStyle={getDefaultStyle(isLight)}>
+    {leftText}
+  </TextButton>
+);
+
 const SkipButton = ({ isLight, ...props }) => (
   <TextButton {...props} textStyle={getDefaultStyle(isLight)}>
     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 }) => (
   <View style={{ ...styles.container, ...(overlay ? styles.containerOverlay : {}) }}>
     <View style={styles.buttonLeft}>
-      {showSkip && currentPage + 1 !== pages ?
-        <SkipButton isLight={isLight} size={BUTTON_SIZE} onPress={onEnd} /> :
-        null
+      {onLeft ?
+        <LeftButton isLight={isLight} size={BUTTON_SIZE} onPress={onLeft} leftText={leftText} /> :
+        (showSkip && currentPage + 1 !== pages ?
+          <SkipButton isLight={isLight} size={BUTTON_SIZE} onPress={onEnd} /> :
+          null)
       }
     </View>
     <PageDots isLight={isLight} pages={pages} currentPage={currentPage} />
@@ -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',

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}
         />
       </View>
     );
@@ -98,11 +100,13 @@ Onboarding.propTypes = {
   showSkip: PropTypes.bool,
   showNext: PropTypes.bool,
   showDone: PropTypes.bool,
+  leftText: PropTypes.string,
 };
 
 Onboarding.defaultProps = {
   bottomOverlay: true,
   showSkip: true,
   showNext: true,
   showDone: true,
+  leftText: 'Skip',
 };

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