react-native-app-intro-slider - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

AppIntroSlider.js

@@ -10,2 +10,3 @@ import React from 'react';
   Platform,
+  StatusBar,
 } from 'react-native';
@@ -27,12 +28,11 @@ import DefaultSlide from './DefaultSlide';
     dotColor: 'rgba(0, 0, 0, .2)',
+    skipLabel: 'Skip',
+    doneLabel: 'Done',
+    nextLabel: 'Next',
   }
-  constructor(props) {
-    super(props);
-    
-    this.state = {
-      width,
-      height,
-      activeIndex: 0,
-    };
-  }
+  state = {
+    width,
+    height,
+    activeIndex: 0,
+  };
 
@@ -44,6 +44,11 @@ goToSlide = (pageNum) => {
 
+  _onNextPress = () => {
+    this.goToSlide(this.state.activeIndex + 1);
+    this.props.onSlideChange && this.props.onSlideChange(this.state.activeIndex + 1, this.state.activeIndex);
+  }
+
   _renderItem = (item) => {
     const { width, height } = this.state;
-    const bottomSpacer = (this.props.bottomButton ? 44 : 0) + (isIphoneX ? 34: 0) + 80;
-    const topSpacer = (isIphoneX ? 44 : 0) + (Platform.OS === 'ios' ? 20 : 0);
+    const bottomSpacer = (this.props.bottomButton ? (this.props.showSkipButton ? 44 : 0) + 44 : 0) + (isIphoneX ? 34: 0) + 64;
+    const topSpacer = (isIphoneX ? 44 : 0) + (Platform.OS === 'ios' ? 20 : StatusBar.currentHeight);
     const props = { ...item.item, bottomSpacer, topSpacer };
@@ -59,6 +64,14 @@ return (
 
-  _renderButton = (content, onPress) => {
+  _renderButton = (content, onPress, isSkip) => {
+    if (isSkip && !this.props.bottomButton && this.state.activeIndex == this.props.slides.length - 1) {
+      return null;
+    }
+    let style = isSkip ? styles.leftButtonContainer : styles.rightButtonContainer;
+    if (this.props.bottomButton) {
+      content = <View style={[styles.bottomButton, isSkip && { backgroundColor: 'transparent' }]}>{content}</View>;
+      style = styles.bottomButtonContainer;
+    }
     return (
-      <View style={this.props.bottomButton ? styles.bottomButtonContainer : styles.buttonContainer}>
-        <TouchableOpacity onPress={onPress} style={this.props.bottomButton  && {flex: 1}}>
+      <View style={style}>
+        <TouchableOpacity onPress={onPress} style={this.props.bottomButton && styles.flexOne}>
           {content}
@@ -70,50 +83,35 @@ </TouchableOpacity>
 
-  _onNext = () => {
-    this.props.onNext === 'function' && this.props.onNext();
-    this.goToSlide(this.state.activeIndex + 1);
-  }
-
   _renderNextButton = () => {
-    let content = this.props.renderNextButton ? this.props.renderNextButton() : <Text style={styles.buttonText}>Next</Text>;
-    if (this.props.bottomButton) {
-      content = <View style={styles.bottomButton}>{content}</View>;
-    }
-    return this._renderButton(content, this._onNext);
+    let content = this.props.renderNextButton ? this.props.renderNextButton() : <Text style={styles.buttonText}>{this.props.nextLabel}</Text>;
+    return this._renderButton(content, this._onNextPress);
   }
 
   _renderDoneButton = () => {
-    let content = this.props.renderDoneButton ? this.props.renderDoneButton() : <Text style={styles.buttonText}>Done</Text>;
-    if (this.props.bottomButton) {
-      content = <View style={styles.bottomButton}>{content}</View>;
-    }
+    let content = this.props.renderDoneButton ? this.props.renderDoneButton() : <Text style={styles.buttonText}>{this.props.doneLabel}</Text>;
     return this._renderButton(content, this.props.onDone && this.props.onDone);
   }
 
+  _renderSkipButton = () => {
+    let content = this.props.renderSkipButton ? this.props.renderSkipButton() : <Text style={styles.buttonText}>{this.props.skipLabel}</Text>;
+    return this._renderButton(content, this.props.onSkip && this.props.onSkip, true);
+  }
+
   _renderPagination = () => {
     if (this.props.slides.length <= 1) return null;
 
-    const ActiveDot = this.props.activeDot || (
-      <View style={[
-        { backgroundColor: this.props.activeDotColor },
-        styles.dot,
-        this.props.activeDotStyle,
-      ]} />
-    );
-    const Dot = this.props.dot || (
-      <View style={[
-        { backgroundColor: this.props.dotColor },
-        styles.dot,
-        this.props.dotStyle,
-      ]} />
-    );
+    const skipBtn = this.props.showSkipButton && this._renderSkipButton();
+    const btn = this.state.activeIndex == (this.props.slides.length - 1 ) ? this._renderDoneButton() : this._renderNextButton();
 
-    const btn = this.state.activeIndex < (this.props.slides.length - 1 ) ? this._renderNextButton() : this._renderDoneButton();
-
     return (
       <View style={styles.paginationContainer}>
-        <View style={[styles.paginationDots, this.props.paginationStyle]}>
+        <View style={styles.paginationDots}>
+          {!this.props.bottomButton && skipBtn}
           {this.props.slides.map((_, i) => (
-            i === this.state.activeIndex
-              ? React.cloneElement(ActiveDot, { key: i })
-              : React.cloneElement(Dot, { key: i })
+            <View
+              key={i}
+              style={[
+                { backgroundColor: i === this.state.activeIndex ? this.props.activeDotColor : this.props.dotColor },
+                styles.dot,
+              ]}
+            />
           ))}
@@ -123,2 +121,3 @@ {!this.props.bottomButton && btn}
         {this.props.bottomButton && btn}
+        {this.props.bottomButton && skipBtn}
       </View>
@@ -139,8 +138,5 @@ )
     }
-    this.setState({
-      activeIndex: newIndex
-    });
-    if (typeof this.props.onSlideChange === 'function') {
-      this.props.onSlideChange(newIndex);
-    }
+    const lastIndex = this.state.activeIndex;
+    this.setState({ activeIndex: newIndex });
+    this.props.onSlideChange && this.props.onSlideChange(newIndex, lastIndex);
   }
@@ -191,4 +187,8 @@
   },
-  buttonContainer: {
+  leftButtonContainer: {
     position: 'absolute',
+    left: 0,
+  },
+  rightButtonContainer: {
+    position: 'absolute',
     right: 0,
@@ -210,3 +210,4 @@ },
     fontSize: 18,
+    padding: 16,
   }
 });

package.json

 {
   "name": "react-native-app-intro-slider",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Simple and configurable app introduction slider for react native",
@@ -5,0 +5,0 @@ "main": "AppIntroSlider.js",

README.md

@@ -33,5 +33,6 @@ # react-native-app-intro-slider
 ### Basic example
+| No configuration | `showSkipButton` | `bottomButton` and `shopSkipButton`
+|-|-|-|
+![Basic example gif](Images/basic-example.gif)|![showSkipButton example image](Images/skipbutton-example.jpg)|![bottomButton example image](Images/bottomskipbutton-example.jpg)
 
-![Basic example gif](Images/basic-example.gif)
-
 Basic example with no configuration:
@@ -252,10 +253,19 @@
 
-## Props and options:
+## Props and options
 
+### Configure behavior
+
 Name             | Type       | Default                   | Description
 -----------------|------------|---------------------------|--------------
 slides           | `object`   | No default, required      | An array of [slide-objects](#slide-object)
+showSkipButton   | `boolean`  | `false`                   | Enable to show a skip button to the left of pagination dots. When `bottomButton == true` the skip button is a small text under the full-width next button
+onSlideChange    | `function` | `void`                    | Called when user goes to next slide. Function called with arguments `index: number, lastIndex: number`
+onDone           | `function` | `void`                    | Called when user ends the introduction by pressing the done button
+onSkip           | `function` | `void`                    | Called when user presses the skip button
+
+## Configure looks
+
+Name             | Type       | Default                   | Description
+-----------------|------------|---------------------------|--------------
 bottomButton     | `boolean`  | `false`                   | Enable to show a full-width button under pagination
-onNext           | `function` | `void`                    | Called when user goes to next slid
-onDone           | `function` | `void`                    | Called when user ends the introduction be pressing the done button
 dotColor         | `string`   | 'rgba(0, 0, 0, .2)'       | Color of inactive pagination dots
@@ -262,0 +272,0 @@ activeDotColor   | `string`   | 'rgba(255, 255, 255, .9)' | Color of active pagination dot

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17521

increased by8.65%

Number of package files

7

increased by16.67%

Lines of code

233

increased by0.87%

Number of lines in readme file

295

increased by3.51%

No dependency changes