Adding prop to change SkipButton title

components/PageData.js

@@ -15,7 +15,7 @@ const PageContent = ({ children }) => (
   </View>
 );
 
-const PageData = ({ isLight, image, title, subtitle, titleStyles, subtitleStyles, ...rest }) => (
+const PageData = ({ isLight, image, title, subtitle, titleStyles, subtitleStyles, renderFooter, ...rest }) => (
   <Page {...rest}>
     <PageContent>
       <View style={styles.image}>
@@ -27,6 +27,9 @@ const PageData = ({ isLight, image, title, subtitle, titleStyles, subtitleStyles
       <Text style={[styles.subtitle, subtitleStyles, (isLight ? styles.subtitleLight : {}) ]}>
         {subtitle}
       </Text>
+      {
+        renderFooter || null
+      }
     </PageContent>
   </Page>
 );
@@ -55,6 +58,7 @@ const styles = {
   subtitle: {
     textAlign: 'center',
     fontSize: 16,
+    marginHorizontal: 16,
     color: 'rgba(255, 255, 255, 0.7)',
   },
   subtitleLight: {

components/Paginator.js

@@ -8,9 +8,9 @@ const getDefaultStyle = (isLight) => ({
   color: isLight ? 'rgba(0, 0, 0, 0.8)' : '#fff',
 });
 
-const SkipButton = ({ isLight, ...props }) => (
+const SkipButton = ({ isLight, skipText, ...props }) => (
   <TextButton {...props} textStyle={getDefaultStyle(isLight)}>
-    Skip
+    {skipText || 'Skip'}
   </TextButton>
 );
 
@@ -26,11 +26,11 @@ 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, skipText }) => (
   <View style={{ ...styles.container, ...(overlay ? styles.containerOverlay : {}) }}>
     <View style={styles.buttonLeft}>
       {showSkip && currentPage + 1 !== pages ?
-        <SkipButton isLight={isLight} size={BUTTON_SIZE} onPress={onEnd} /> :
+        <SkipButton skipText={skipText} isLight={isLight} size={BUTTON_SIZE} onPress={onEnd} /> :
         null
       }
     </View>

index.js

@@ -21,8 +21,14 @@ export default class Onboarding extends Component {
     const page = Math.round(pageFraction);
     const isLastPage = this.props.pages.length === page + 1;
     if (isLastPage && pageFraction - page > 0.3) {
+      if (this.props.onScroll) {
+        this.props.onScroll();
+      }
       this.props.onEnd();
     } else {
+      if (this.props.onScroll) {
+        this.props.onScroll();
+      }
       this.setState({ currentPage: page });
     }
   };
@@ -42,7 +48,7 @@ export default class Onboarding extends Component {
 
   render() {
     const { width, height } = Dimensions.get('window');
-    const { pages, bottomOverlay, showSkip, showNext, showDone } = this.props;
+    const { pages, bottomOverlay, showSkip, showNext, showDone, skipText } = this.props;
     const currentPage = pages[this.state.currentPage] || pages[0];
     const { backgroundColor } = currentPage;
     const isLight = tinycolor(backgroundColor).getBrightness() > 180;
@@ -57,7 +63,7 @@ export default class Onboarding extends Component {
           onScroll={this.updatePosition}
           scrollEventThrottle={100}
         >
-          {pages.map(({ image, title, subtitle, titleStyles, subtitleStyles }, idx) => (
+          {pages.map(({ image, title, subtitle, titleStyles, subtitleStyles, renderFooter }, idx) => (
             <PageData
               key={idx}
               isLight={isLight}
@@ -68,12 +74,14 @@ export default class Onboarding extends Component {
               subtitleStyles={subtitleStyles}
               width={width}
               height={height}
+              renderFooter={renderFooter}
             />
           ))}
         </ScrollView>
         <Paginator
           isLight={isLight}
           overlay={bottomOverlay}
+          skipText={skipText}
           showSkip={showSkip}
           showNext={showNext}
           showDone={showDone}
@@ -93,9 +101,11 @@ Onboarding.propTypes = {
     image: PropTypes.element.isRequired,
     title: PropTypes.string.isRequired,
     subtitle: PropTypes.string.isRequired,
+    renderFooter: PropTypes.element,
   })).isRequired,
   bottomOverlay: PropTypes.bool,
   showSkip: PropTypes.bool,
+  skipText: PropTypes.string,
   showNext: PropTypes.bool,
   showDone: PropTypes.bool,
 };