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 3.0.0 to 4.0.0
| { | ||
| "name": "react-native-app-intro-slider", | ||
| "version": "3.0.0", | ||
| "version": "4.0.0", | ||
| "description": "Simple and configurable app introduction slider for react native", | ||
| "main": "AppIntroSlider.js", | ||
| "main": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "scripts": { | ||
| "build": "tsc", | ||
| "lint": "eslint 'src/**/*.{ts,tsx}'", | ||
| "format": "prettier --write src", | ||
| "test": "echo 'no tests yet'", | ||
| "prepublishOnly": "yarn run lint && yarn run format", | ||
| "version": "npm run format && git add -A src", | ||
| "postversion": "git push && git push --tags" | ||
| }, | ||
| "repository": { | ||
@@ -25,3 +35,20 @@ "type": "git", | ||
| }, | ||
| "homepage": "https://github.com/jacse/react-native-app-intro-slider" | ||
| "homepage": "https://github.com/jacse/react-native-app-intro-slider", | ||
| "files": [ | ||
| "dist/**/*" | ||
| ], | ||
| "devDependencies": { | ||
| "@react-native-community/eslint-config": "^1.0.0", | ||
| "@types/jest": "^24.0.24", | ||
| "@types/react": "^16.9.31", | ||
| "@types/react-native": "^0.62.0", | ||
| "@types/react-test-renderer": "16.9.2", | ||
| "@typescript-eslint/eslint-plugin": "^2.25.0", | ||
| "@typescript-eslint/parser": "^2.25.0", | ||
| "eslint": "^6.5.1", | ||
| "jest": "^24.9.0", | ||
| "prettier": "^2.0.2", | ||
| "react-test-renderer": "16.11.0", | ||
| "typescript": "^3.8.3" | ||
| } | ||
| } |
227
README.md
@@ -1,33 +0,18 @@ | ||
| <h1 align="center">react-native-app-intro-slider</h1> | ||
| # react-native-app-intro-slider | ||
| <p align="center">Easy-to-use yet very configurable app introduction slider/swiper based on FlatList</p> | ||
| An easy-to-use yet very configurable app introduction slider/swiper based on FlatList that supports RTL. | ||
| ```sh | ||
| npm i react-native-app-intro-slider --save | ||
| yarn add react-native-app-intro-slider | ||
| ``` | ||
| | | | | ||
| | ------------------------------------------------ | ------------------------------------------------------- | | ||
| |  |  | | ||
| ## Usage | ||
| ## Table of contents | ||
| ### Simple examples | ||
| - [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` | | ||
| | Basic | `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). | ||
| The component is based on FlatList so usage is very similar. Pass a data-array to AppIntroSlider along with a `renderItem`-function: | ||
@@ -41,3 +26,3 @@ ```javascript | ||
| { | ||
| key: 'somethun', | ||
| key: 1, | ||
| title: 'Title 1', | ||
@@ -49,3 +34,3 @@ text: 'Description.\nSay something cool', | ||
| { | ||
| key: 'somethun-dos', | ||
| key: 2, | ||
| title: 'Title 2', | ||
@@ -57,3 +42,3 @@ text: 'Other cool stuff', | ||
| { | ||
| key: 'somethun1', | ||
| key: 3, | ||
| title: 'Rocket guy', | ||
@@ -70,3 +55,3 @@ text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla', | ||
| } | ||
| _renderItem = (item) => { | ||
| _renderItem = ({ item }) => { | ||
| return ( | ||
@@ -76,3 +61,3 @@ <View style={styles.slide}> | ||
| <Image source={item.image} /> | ||
| <Text style={style.text}>{item.text}</Text> | ||
| <Text style={styles.text}>{item.text}</Text> | ||
| </View> | ||
@@ -90,3 +75,3 @@ ); | ||
| } else { | ||
| return <AppIntroSlider renderItem={this._renderItem} slides={slides} onDone={this._onDone}/>; | ||
| return <AppIntroSlider renderItem={this._renderItem} data={slides} onDone={this._onDone}/>; | ||
| } | ||
@@ -103,3 +88,3 @@ } | ||
| import React from 'react'; | ||
| import { Ionicons } from '@expo/vector-icons'; | ||
| import Icon from 'react-native-vector-icons/Ionicons'; | ||
| import { StyleSheet, View } from 'react-native'; | ||
@@ -117,6 +102,3 @@ import AppIntroSlider from 'react-native-app-intro-slider'; | ||
| }, | ||
| image: { | ||
| width: 320, | ||
| height: 320, | ||
| }, | ||
| //[...] | ||
| }); | ||
@@ -127,10 +109,18 @@ | ||
| export default class App extends React.Component { | ||
| _renderItem = ({ item }) => { | ||
| return ( | ||
| <View style={styles.slide}> | ||
| <Text style={styles.title}>{item.title}</Text> | ||
| <Image source={item.image} /> | ||
| <Text style={styles.text}>{item.text}</Text> | ||
| </View> | ||
| ); | ||
| } | ||
| _renderNextButton = () => { | ||
| return ( | ||
| <View style={styles.buttonCircle}> | ||
| <Ionicons | ||
| <Ion | ||
| name="md-arrow-round-forward" | ||
| color="rgba(255, 255, 255, .9)" | ||
| size={24} | ||
| style={{ backgroundColor: 'transparent' }} | ||
| /> | ||
@@ -143,7 +133,6 @@ </View> | ||
| <View style={styles.buttonCircle}> | ||
| <Ionicons | ||
| <Ion | ||
| name="md-checkmark" | ||
| color="rgba(255, 255, 255, .9)" | ||
| size={24} | ||
| style={{ backgroundColor: 'transparent' }} | ||
| /> | ||
@@ -156,3 +145,3 @@ </View> | ||
| <AppIntroSlider | ||
| slides={slides} | ||
| data={slides} | ||
| renderDoneButton={this._renderDoneButton} | ||
@@ -166,107 +155,22 @@ renderNextButton={this._renderNextButton} | ||
| ### Custom slide layout | ||
|  | ||
| ```js | ||
| import React from 'react'; | ||
| import { Ionicons } from '@expo/vector-icons'; | ||
| import { StyleSheet, View, Text, Image } from 'react-native'; | ||
| import { LinearGradient } from 'expo'; | ||
| import AppIntroSlider from 'react-native-app-intro-slider'; | ||
| const styles = StyleSheet.create({ | ||
| mainContent: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'space-around', | ||
| }, | ||
| image: { | ||
| width: 320, | ||
| height: 320, | ||
| }, | ||
| text: { | ||
| color: 'rgba(255, 255, 255, 0.8)', | ||
| backgroundColor: 'transparent', | ||
| textAlign: 'center', | ||
| paddingHorizontal: 16, | ||
| }, | ||
| title: { | ||
| fontSize: 22, | ||
| color: 'white', | ||
| backgroundColor: 'transparent', | ||
| textAlign: 'center', | ||
| marginBottom: 16, | ||
| }, | ||
| }); | ||
| const slides = [ | ||
| { | ||
| key: 'somethun', | ||
| 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!', | ||
| icon: 'ios-images-outline', | ||
| colors: ['#63E2FF', '#B066FE'], | ||
| }, | ||
| { | ||
| key: 'somethun1', | ||
| title: 'Super customizable', | ||
| text: | ||
| 'The component is also super customizable, so you can adapt it to cover your needs and wants.', | ||
| icon: 'ios-options-outline', | ||
| colors: ['#A3A1FF', '#3A3897'], | ||
| }, | ||
| { | ||
| key: 'somethun2', | ||
| title: 'No need to buy me beer', | ||
| text: 'Usage is all free', | ||
| icon: 'ios-beer-outline', | ||
| colors: ['#29ABE2', '#4F00BC'], | ||
| }, | ||
| ]; | ||
| export default class App extends React.Component { | ||
| _renderItem = props => ( | ||
| <LinearGradient | ||
| style={[ | ||
| styles.mainContent, | ||
| { | ||
| width: props.width, | ||
| height: props.height, | ||
| }, | ||
| ]} | ||
| colors={props.colors} | ||
| start={{ x: 0, y: 0.1 }} | ||
| end={{ x: 0.1, y: 1 }} | ||
| > | ||
| <Ionicons | ||
| style={{ backgroundColor: 'transparent' }} | ||
| name={props.icon} | ||
| size={200} | ||
| color="white" | ||
| /> | ||
| <View> | ||
| <Text style={styles.title}>{props.title}</Text> | ||
| <Text style={styles.text}>{props.text}</Text> | ||
| </View> | ||
| </LinearGradient> | ||
| ); | ||
| render() { | ||
| 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. | ||
| <h2 align="center">Props and options</h2> | ||
| ## Props and methods | ||
| The component extends `FlatList` so all FlatList-props are valid. | ||
| ### Configure looks | ||
| ### Props | ||
| | Name | Type | Default | Description | | ||
| | ---------------- | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | data | `object` | None, required | An array of objects (they should either contain a unique `key`-prop or you should pass a `keyExtractor`-function to the component) | | ||
| | renderItem | `function` | None, required | [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 | | ||
| | onSlideChange | `function` | `void` | Called when user goes changes slide (by swiping or pressing next/prev). Function called with arguments `(index: number, lastIndex: number)` | | ||
| | renderPagination | `function` | | Function to render a custom pagination/button component on top of slides. Receives the index of the currently active slide | | ||
| | onDone | `function` | `void` | Called when user ends the introduction by pressing the done button | | ||
| | onSkip | `function` | Scrolls to the end | Called when user presses the skip button | | ||
| | bottomButton | `boolean` | `false` | Enable to show a full-width button under pagination | | ||
| | 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 | | ||
| | skipLabel | `string` | `Skip` | Custom label for Skip button | | ||
@@ -276,9 +180,6 @@ | doneLabel | `string` | `Done` | Custom label for Done 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 | | ||
| | 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 | | ||
| | renderNextButton | `function` | renders a Text-component | Use to supply your own next button | | ||
@@ -288,31 +189,3 @@ | renderPrevButton | `function` | renders a Text-component | Use to supply your own prev 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 | | ||
| #### Slide object | ||
| 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 | | ||
| ### Methods | ||
@@ -325,11 +198,9 @@ | ||
| <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 | ||
| cd react-native-app-intro-slider/Example | ||
| yarn | ||
| yarn start | ||
| ``` | ||
| ## Examples | ||
| * [Basic](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/Basic/index.js) | ||
| * [Bottom buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/BottomButton/index.js) | ||
| * [Cstom buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/CustomButton/index.js) | ||
| * [Custom pagination with log in / sign up buttons](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/CustomPagination/index.js) | ||
| * [Full-size background Images](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/FullBackgroundImage/index.js) | ||
| * [RTL](https://github.com/Jacse/react-native-app-intro-slider/tree/master/examples/examples/RTL/index.js) |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
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
Worsened metrics
- Total package byte prevSize
- decreased by-12.75%
23485
- Dev dependency count
- increased byInfinity%
12
- Number of package files
- decreased by-50%
4
- Lines of code
- decreased by-31.35%
219
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-40.19%
192
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes