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

Comparing version 0.2.2 to 0.2.3

AppIntroSlider.js

@@ -30,2 +30,3 @@ import React from 'react';
     nextLabel: 'Next',
+    prevLabel: 'Back',
   }
@@ -47,2 +48,6 @@ state = {
   }
+  _onPrevPress = () => {
+    this.goToSlide(this.state.activeIndex - 1);
+    this.props.onSlideChange && this.props.onSlideChange(this.state.activeIndex - 1, this.state.activeIndex);
+  }
 
@@ -53,16 +58,11 @@ _renderItem = (item) => {
     const topSpacer = (isIphoneX ? 44 : 0) + (Platform.OS === 'ios' ? 20 : StatusBar.currentHeight);
-    const props = { ...item.item, bottomSpacer, topSpacer };
-    return (
-      <View style={{ height, width }}>
-        {this.props.renderItem ? this.props.renderItem(props) : (
-          <DefaultSlide {...props}/>
-        )}
-      </View>
-    );
+    const props = { ...item.item, bottomSpacer, topSpacer, width, height };
+
+    return this.props.renderItem ? this.props.renderItem(props) : <DefaultSlide {...props} />;
   }
 
   _renderButton = (content, onPress, isSkip) => {
-    if (isSkip && !this.props.bottomButton && this.state.activeIndex == this.props.slides.length - 1) {
+    /*if (isSkip && !this.props.bottomButton && this.state.activeIndex == this.props.slides.length - 1) {
       return null;
-    }
+    }*/
     let style = isSkip ? styles.leftButtonContainer : styles.rightButtonContainer;
@@ -84,8 +84,13 @@ if (this.props.bottomButton) {
     let content = this.props.renderNextButton ? this.props.renderNextButton() : <Text style={styles.buttonText}>{this.props.nextLabel}</Text>;
-    return this._renderButton(content, this._onNextPress);
+    return !this.props.hideNextButton && this._renderButton(content, this._onNextPress);
   }
 
+  _renderPrevButton = () => {
+    let content = this.props.renderPrevButton ? this.props.renderPrevButton() : <Text style={styles.buttonText}>{this.props.prevLabel}</Text>;
+    return this.props.showPrevButton && this._renderButton(content, this._onPrevPress, true);
+  }
+
   _renderDoneButton = () => {
     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);
+    return !this.props.hideDoneButton && this._renderButton(content, this.props.onDone && this.props.onDone);
   }
@@ -95,10 +100,12 @@
     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);
+    return this.props.showSkipButton && this._renderButton(content, this.props.onSkip && this.props.onSkip, true);
   }
 
   _renderPagination = () => {
-    if (this.props.slides.length <= 1) return null;
+    const isLastSlide = this.state.activeIndex === (this.props.slides.length - 1);
+    const isFirstSlide = this.state.activeIndex === 0;
 
-    const skipBtn = this.props.showSkipButton && this._renderSkipButton();
-    const btn = this.state.activeIndex == (this.props.slides.length - 1 ) ? this._renderDoneButton() : this._renderNextButton();
+    const skipBtn = (!isFirstSlide && this._renderPrevButton()) || (!isLastSlide && this._renderSkipButton());
+    // const skipBtn = this._renderPrevButton();
+    const btn = isLastSlide ? this._renderDoneButton() : this._renderNextButton();
 
@@ -109,3 +116,3 @@ return (
           {!this.props.bottomButton && skipBtn}
-          {this.props.slides.map((_, i) => (
+          {this.props.slides.length > 1 && this.props.slides.map((_, i) => (
             <View
@@ -143,2 +150,13 @@ key={i}
 
+  _onLayout = () => {
+    const { width, height } = Dimensions.get('window');
+    if (width !== this.state.width || height !== this.state.height) {
+      // Set new width to update rendering of pages
+      this.setState({ width, height });
+      // Set new scroll position
+      const func = () => { this.flatList.scrollToOffset({ offset: this.state.activeIndex * width, animated: false }) }
+      Platform.OS === 'android' ? setTimeout(func, 0) : func();
+    }
+  }
+
   render() {
@@ -157,2 +175,4 @@ return (
           onMomentumScrollEnd={this._onMomentumScrollEnd}
+          extraData={this.state.width}
+          onLayout={this._onLayout}
         />
@@ -159,0 +179,0 @@ {this._renderPagination()}

DefaultSlide.js

@@ -17,2 +17,4 @@ import React from 'react';
       paddingBottom: this.props.bottomSpacer,
+      width: this.props.width,
+      height: this.props.height,
     }
@@ -31,3 +33,2 @@ return (
   mainContent: {
-    flex: 1,
     justifyContent: 'space-around',
@@ -34,0 +35,0 @@ alignItems: 'center',

package.json

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

README.md

@@ -1,6 +0,8 @@
-# react-native-app-intro-slider
+<h1 align="center">react-native-app-intro-slider</h1>
 
-`react-native-app-intro-slider` is an easy-to-use but very configurable app introduction slider/swiper. Use it to onboard your users on first launch.
+<p align="center">Easy-to-use yet very configurable app introduction slider/swiper</p>
 
-## Showcase
+```sh
+npm i react-native-app-intro-slider --save
+```
 
@@ -11,30 +13,19 @@ | | |
 
+## Table of contents
+  * [Usage](#usage)
+    * [Basic Example](#basic-example)
+    * [Configuring Buttons](#configuring-buttons)
+    * [Custom Slide Layout](#custom-slide-layout)
+  * [Props and options](#props-and-options)
+    * [Configure behaviour](#configure-behaviour)
+    * [Configure looks](#configure-looks)
+  * [Example](#example)
 
-## Features
+<h2 align="center">Usage</h2>
 
-* :white_check_mark: Supports the newest version of React Native
-* :white_check_mark: Android and iOS
-* :white_check_mark: iPhone X-ready
-* :white_check_mark: Option to use a large button under dots too
-
-## Installation
-
-Install library from `npm`:
-
-    npm install react-native-app-intro-slider --save
-
-or using `yarn`:
-
-    yarn add react-native-app-intro-slider
-  
-
-## Usage
-
 ### Basic example
-| No configuration | `showSkipButton` | `bottomButton` and `shopSkipButton`
+| No configuration | `showSkipButton` | `bottomButton` and `showSkipButton`
 |-|-|-|
 ![Basic example gif](Images/basic-example.gif)|![showSkipButton example image](Images/skipbutton-example.jpg)|![bottomButton example image](Images/bottomskipbutton-example.jpg)
 
-Basic example with no configuration:
-
 ```javascript
@@ -98,4 +89,2 @@ import React from 'react';
 
-Basic example with buttons configured:
-
 ```javascript
@@ -161,8 +150,6 @@ import React from 'react';
 
-## Custom slide layout
+### Custom slide layout
 
 ![Custom layout example gif](Images/custom-example.gif)
 
-Here a custom `renderItem` is supplied and the `bottomButton`-props has been set to `true`. Notice how the setup of `slides` has been configured to support icons and gradient backgrounds.
-
 ```js
@@ -230,2 +217,4 @@ import React from 'react';
         paddingBottom: props.bottomSpacer,
+        width: props.width,
+        height: props.height,
       }]}
@@ -254,6 +243,23 @@ colors={props.colors}
 ```
+Here a custom `renderItem` is supplied and the `bottomButton`-props has been set to `true`. Notice how the setup of `slides` has been configured to support icons and gradient backgrounds.
 
+<h2 align="center">Props and options</h2>
 
-## Props and options
+### Configure looks
 
+Name             | Type       | Default                   | Description
+-----------------|------------|---------------------------|--------------
+skipLabel        | `string`   | `Skip`                    | Custom label for Skip button
+doneLabel        | `string`   | `Done`                    | Custom label for Done button
+nextLabel        | `string`   | `Next`                    | Custom label for Next button
+prevLabel        | `string`   | `Back`                    | Custom label for Prev button
+bottomButton     | `boolean`  | `false`                   | Enable to show a full-width button under pagination
+dotColor         | `string`   | 'rgba(0, 0, 0, .2)'       | Color of inactive pagination dots
+activeDotColor   | `string`   | 'rgba(255, 255, 255, .9)' | Color of active pagination dot
+renderNextButton | `function` | renders a Text-component  | Use to supply your own next button
+renderPrevButton | `function` | renders a Text-component  | Use to supply your own prev button
+renderDoneButton | `function` | renders a Text-component  | Use to supply your own done button
+renderSkipButton | `function` | renders a Text-component  | Use to supply your own skip button
+renderItem       | `function` | renders `DefaultSlide`    | Function returning a slide. The function is passed the slide object as wells as `{ topSpacer: Number, bottomSpacer: Number }`. These show the "safe-space" where other UI is not interfering - take a look at `DefaultSlide.js` too see how they are set up.
+
 ### Configure behavior
@@ -265,18 +271,10 @@
 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`
+showPrevButton   | `boolean`  | `false`                   | Enable to show a previous button. If `showSkipButton` is true, the skip button will be displayed on the first page and prev button on subsequent one
+hideNextButton   | `boolean`  | `false`                   | Enable to hide the next button
+hideDoneButton   | `boolean`  | `false`                   | Enable to hide the done button
+onSlideChange    | `function` | `void`                    | Called when user goes changes slide (by swiping or pressing next/prev). 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
-dotColor         | `string`   | 'rgba(0, 0, 0, .2)'       | Color of inactive pagination dots
-activeDotColor   | `string`   | 'rgba(255, 255, 255, .9)' | Color of active pagination dot
-renderNextButton | `function` | renders a Text-component  | Use to supply your own next button
-renderDoneButton | `function` | renders a Text-component  | Use to supply your own done button
-renderItem       | `function` | renders `DefaultSlide`    | Function returning a slide. The function is passed the slide object as wells as `{ topSpacer: Number, bottomSpacer: Number }`. These show the "safe-space" where other UI is not interfering - take a look at `DefaultSlide.js` too see how they are set up.
-
-## slide object
+#### slide object
 Each slide object should contain at least a unique `key`. If you use the default layouts your object should furthermore contain:
@@ -294,5 +292,8 @@
 
-## Run example
+<h2 align="center">Example</h2>
 
-```
+You can run the example Expo-app by cloning the repo:
+
+
+```sh
 git clone https://github.com/Jacse/react-native-app-intro-slider.git
@@ -302,2 +303,2 @@ cd react-native-app-intro-slider/Example
 yarn start
-```
+```

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

19799

increased by13%

Lines of code

251

increased by7.73%

Number of lines in readme file

297

increased by0.68%

No dependency changes