Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-app-intro-slider
Advanced tools
react-native-app-intro-slider - npm Package Compare versions
Comparing version 2.0.1 to 3.0.0
@@ -67,7 +67,13 @@ import React from 'react'; | ||
| _renderItem = item => { | ||
| _onPaginationPress = index => { | ||
| const activeIndexBeforeChange = this.state.activeIndex; | ||
| this.goToSlide(index); | ||
| this.props.onSlideChange && this.props.onSlideChange(index, activeIndexBeforeChange); | ||
| }; | ||
| _renderItem = flatListArgs => { | ||
| const { width, height } = this.state; | ||
| const props = { ...item.item, width, height }; | ||
| const props = { ...flatListArgs, dimensions: { width, height } }; | ||
| return ( | ||
| <View style={{ width: this.state.width, height: this.state.height }}> | ||
| <View style={{ width, flex: 1 }}> | ||
| {this.props.renderItem ? ( | ||
@@ -162,3 +168,3 @@ this.props.renderItem(props) | ||
| ]} | ||
| onPress={() => this.goToSlide(i)} | ||
| onPress={() => this._onPaginationPress(i)} | ||
| /> | ||
@@ -165,0 +171,0 @@ ))} |
@@ -6,13 +6,14 @@ import React from 'react'; | ||
| render() { | ||
| const { item, dimensions, bottomButton } = this.props; | ||
| const style = { | ||
| backgroundColor: this.props.backgroundColor, | ||
| width: this.props.width, | ||
| height: this.props.height, | ||
| paddingBottom: this.props.bottomButton ? 132 : 64, | ||
| flex: 1, | ||
| backgroundColor: item.backgroundColor, | ||
| width: dimensions.width, | ||
| paddingBottom: bottomButton ? 132 : 64, | ||
| }; | ||
| return ( | ||
| <View style={[styles.mainContent, style]}> | ||
| <Text style={[styles.title, this.props.titleStyle]}>{this.props.title}</Text> | ||
| <Image source={this.props.image} style={this.props.imageStyle} /> | ||
| <Text style={[styles.text, this.props.textStyle]}>{this.props.text}</Text> | ||
| <Text style={[styles.title, item.titleStyle]}>{item.title}</Text> | ||
| <Image source={item.image} style={item.imageStyle} /> | ||
| <Text style={[styles.text, item.textStyle]}>{item.text}</Text> | ||
| </View> | ||
@@ -19,0 +20,0 @@ ); |
| { | ||
| "name": "react-native-app-intro-slider", | ||
| "version": "2.0.1", | ||
| "version": "3.0.0", | ||
| "description": "Simple and configurable app introduction slider for react native", | ||
@@ -5,0 +5,0 @@ "main": "AppIntroSlider.js", |
167
README.md
@@ -9,23 +9,25 @@ <h1 align="center">react-native-app-intro-slider</h1> | ||
| | | | | ||
| |-|-| | ||
|  |  | ||
| | | | | ||
| | ------------------------------------------------ | ------------------------------------------------------- | | ||
| |  |  | | ||
| ## 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) | ||
| - [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) | ||
| <h2 align="center">Usage</h2> | ||
| ### Basic example | ||
| | No configuration | `showSkipButton` | `bottomButton` and `showSkipButton` | ||
| |-|-|-| | ||
| || | ||
| | No configuration | `showSkipButton` | `bottomButton` and `showSkipButton` | | ||
| | ---------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------ | | ||
| |  |  |  | | ||
| The component is based on FlatList so usage is very similar. Pass a data-array to AppIntroSlider along with a renderItem-function (or you can use the default basic layout). | ||
@@ -112,3 +114,3 @@ | ||
| height: 320, | ||
| } | ||
| }, | ||
| }); | ||
@@ -130,3 +132,3 @@ | ||
| ); | ||
| } | ||
| }; | ||
| _renderDoneButton = () => { | ||
@@ -143,3 +145,3 @@ return ( | ||
| ); | ||
| } | ||
| }; | ||
| render() { | ||
@@ -190,3 +192,3 @@ return ( | ||
| marginBottom: 16, | ||
| } | ||
| }, | ||
| }); | ||
@@ -198,3 +200,4 @@ | ||
| title: 'Quick setup, good defaults', | ||
| text: 'React-native-app-intro-slider is easy to setup with a small footprint and no dependencies. And it comes with good default layouts!', | ||
| text: | ||
| 'React-native-app-intro-slider is easy to setup with a small footprint and no dependencies. And it comes with good default layouts!', | ||
| icon: 'ios-images-outline', | ||
@@ -206,3 +209,4 @@ colors: ['#63E2FF', '#B066FE'], | ||
| title: 'Super customizable', | ||
| text: 'The component is also super customizable, so you can adapt it to cover your needs and wants.', | ||
| text: | ||
| 'The component is also super customizable, so you can adapt it to cover your needs and wants.', | ||
| icon: 'ios-options-outline', | ||
@@ -223,12 +227,19 @@ colors: ['#A3A1FF', '#3A3897'], | ||
| <LinearGradient | ||
| style={[styles.mainContent, { | ||
| paddingTop: props.topSpacer, | ||
| paddingBottom: props.bottomSpacer, | ||
| width: props.width, | ||
| height: props.height, | ||
| }]} | ||
| style={[ | ||
| styles.mainContent, | ||
| { | ||
| width: props.width, | ||
| height: props.height, | ||
| }, | ||
| ]} | ||
| colors={props.colors} | ||
| start={{x: 0, y: .1}} end={{x: .1, y: 1}} | ||
| start={{ x: 0, y: 0.1 }} | ||
| end={{ x: 0.1, y: 1 }} | ||
| > | ||
| <Ionicons style={{ backgroundColor: 'transparent' }} name={props.icon} size={200} color="white" /> | ||
| <Ionicons | ||
| style={{ backgroundColor: 'transparent' }} | ||
| name={props.icon} | ||
| size={200} | ||
| color="white" | ||
| /> | ||
| <View> | ||
@@ -242,12 +253,7 @@ <Text style={styles.title}>{props.title}</Text> | ||
| render() { | ||
| return ( | ||
| <AppIntroSlider | ||
| slides={slides} | ||
| renderItem={this._renderItem} | ||
| bottomButton | ||
| /> | ||
| ); | ||
| return <AppIntroSlider slides={slides} renderItem={this._renderItem} bottomButton />; | ||
| } | ||
| } | ||
| ``` | ||
| 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. | ||
@@ -261,55 +267,55 @@ | ||
| 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 | ||
| buttonStyle | `style` | `null` | Styling of outer button component | ||
| buttonTextStyle | `style` | `null` | Styling of button text component | ||
| dotStyle | `style` | {backgroundColor: 'rgba(0, 0, 0, .2)'} | Style of inactive pagination dots | ||
| activeDotStyle | `style` | {backgroundColor: 'rgba(255, 255, 255, .9)'} | Style of active pagination dot | ||
| paginationStyle | `style` | `null` | Styling of the pagination dots | ||
| hidePagination | `boolean` | `false` | Enable to hide the pagination | ||
| 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. | ||
| | 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 | | ||
| | buttonStyle | `style` | `null` | Styling of outer button component | | ||
| | buttonTextStyle | `style` | `null` | Styling of button text component | | ||
| | dotStyle | `style` | {backgroundColor: 'rgba(0, 0, 0, .2)'} | Style of inactive pagination dots | | ||
| | activeDotStyle | `style` | {backgroundColor: 'rgba(255, 255, 255, .9)'} | Style of active pagination dot | | ||
| | paginationStyle | `style` | `null` | Styling of the pagination dots | | ||
| | hidePagination | `boolean` | `false` | Enable to hide the pagination | | ||
| | 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` | (FlatList's renderItem)[https://facebook.github.io/react-native/docs/flatlist.html#renderitem]. Receives `{item, index, dimensions}` where `dimensions` contains height and width of the slides. | | ||
| ### Configure behavior | ||
| Name | Type | Default | Description | ||
| -----------------|------------|---------------------------|-------------- | ||
| slides | `object` | No default, required | An array of objects (they should either contain a unique `key`-prop or you should pass a `keyExtractor`-function to the component) | ||
| 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 | ||
| 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 | ||
| showNextButton | `boolean` | `true` | Disable to hide the next button | ||
| showDoneButton | `boolean` | `true` | Disable 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` | Scroll the list to the end | Called when user presses the skip button | ||
| | Name | Type | Default | Description | | ||
| | -------------- | ---------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | slides | `object` | No default, required | An array of objects (they should either contain a unique `key`-prop or you should pass a `keyExtractor`-function to the component) | | ||
| | 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 | | ||
| | 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 | | ||
| | showNextButton | `boolean` | `true` | Disable to hide the next button | | ||
| | showDoneButton | `boolean` | `true` | Disable 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` | Scroll the list to the end | Called when user presses the skip button | | ||
| ### Methods | ||
| Method Name | Arguments | Description | ||
| ------------|-----------|---------------- | ||
| goToSlide | `number` | Change to slide with specified index | ||
| getListRef | `none` | Returns the Flat List ref | ||
| #### Slide object | ||
| ### Slide object | ||
| If you use the default layout your object can furthermore contain: | ||
| If you want to use the default slide layout, your slides can contain the following information: | ||
| Name | Type | Note | ||
| -----------------|---------------------|--------------------- | ||
| title | `string` | The title | ||
| titleStyle | `Style`-prop | Styling for the title (e.g color, fontSize) | ||
| text | `string` | Main text of slide | ||
| textStyle | `Style`-prop | Styling for the text (e.g color, fontSize) | ||
| image | `Image`-source prop | Slide image | ||
| imageStyle | `Style`-prop | Styling for the image (e.g. size) | ||
| backgroundColor | `string` | Slide background color | ||
| | Name | Type | Note | | ||
| | --------------- | ------------------- | ------------------------------------------- | | ||
| | title | `string` | The title | | ||
| | titleStyle | `Style`-prop | Styling for the title (e.g color, fontSize) | | ||
| | text | `string` | Main text of slide | | ||
| | textStyle | `Style`-prop | Styling for the text (e.g color, fontSize) | | ||
| | image | `Image`-source prop | Slide image | | ||
| | imageStyle | `Style`-prop | Styling for the image (e.g. size) | | ||
| | backgroundColor | `string` | Slide background color | | ||
| If you use a custom `renderItem`-method you can design your slide objects as you see fit. | ||
| ### Methods | ||
| | Method Name | Arguments | Description | | ||
| | ----------- | --------- | ------------------------------------ | | ||
| | goToSlide | `number` | Change to slide with specified index | | ||
| | getListRef | `none` | Returns the Flat List ref | | ||
| <h2 align="center">Example</h2> | ||
@@ -319,3 +325,2 @@ | ||
| ```sh | ||
@@ -322,0 +327,0 @@ git clone https://github.com/Jacse/react-native-app-intro-slider.git |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by21.39%
26918
- Lines of code
- increased by1.92%
319
- Number of lines in readme file
- increased by1.58%
321
No dependency changes