{"_id":"@bluebird2000/react-native-app-intro","_rev":"1-50bca5029f7018bbf01919b72b117aae","name":"@bluebird2000/react-native-app-intro","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bluebird2000/react-native-app-intro","version":"0.0.1","description":"Simple and configurable app introduction slider for react native app","main":"AppIntroSlider.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/Bluebird2000/react-native-app-intro.git"},"keywords":["swiper","App","Intro","ios","android","react-component","react-native","slider"],"author":{"name":"Bluebird2000"},"license":"ISC","bugs":{"url":"https://github.com/Bluebird2000/react-native-app-intro/issues"},"homepage":"https://github.com/Bluebird2000/react-native-app-intro#readme","gitHead":"e4efc04037c7726275d0753d0114426c07528f2f","_id":"@bluebird2000/react-native-app-intro@0.0.1","_nodeVersion":"13.3.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-In57N7f9H4D3+H4+UKaJ5sTxchKECj0L75P+8Nz41pOMf1G9691jlfX9Gz4emjkSu5LMJ4o/XebCB4ToDzZXlQ==","shasum":"8dc088afc9f571dd9b8ecd232ec5837abb0b2289","tarball":"https://registry.npmjs.org/@bluebird2000/react-native-app-intro/-/react-native-app-intro-0.0.1.tgz","fileCount":4,"unpackedSize":25795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeckqeCRA9TVsSAnZWagAAbRQP/3gLsqusSX3wlq0scHZu\n62kLxpWM4yamwHZBP989ZGB5JRfruZZR5h+e72bcaT5nKLB9eG1pXn/tOLmf\nIv+xMWGQuPzXrGzasfmqqrdKL4IEG+HEDcO5u4zDGoCXwo0jM4NRbn4qigIv\nhH02xK72jA9mwSpSREFMbFsEYILG9WMi45cAdL4Z3aW/FZsridWI3cv7fpAF\nhO/BrWpkzmT1OVgUqTE6O0X+ht+g4YmtrTyDmkJ88hYJC5M5hk/lqBe65go+\n9yTqLoaIfwvAJ1pVVQUpTmgi2PwPGsWOvT/bNfmEVnuqRa4tpVzQvVarErwc\nTKfGQoeTfRlRBNat6wrGE65w57TSAiK9vhYyn4Nc0CvOYSqKqbYg/g42S9G1\nkDpA6b9MVMW9hz/MseZa1cIi9pWWU5ack/wFDzU1Bqpgsq+ZVjY6vm1HFfrO\nMHhKwBkry7PnoKtWy5PKvU1iTZK4NDwdxvtqSA/UuxSrbUr4aBwtJRmYLoX7\nBFMelHw+glf9PTFb8sUl2vDcETpGf+bM8Vp3o6e5z8YAWCZG6LpYoIEL4NPz\nlhmCebYN3ZdxyXs/ImTExvyNCk+8Xdnjt3Tw/jKEVMA8ssXE7RERn5IC7jNW\nfUyfhxI6ubfI3gWZeiJkkisXNTQEmuZdPKjeqAnAF+Z6PYYqhU+bUHhTGaV7\nd0o5\r\n=osCR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3dkgGbaPJ8shTJtPk0F5Wb2TdR6bM57pAjuEuKm2b2AiEA/idnzOz8jKGzkq0y+rDscnEy855ePywhY+TocdzFlDk="}]},"maintainers":[{"name":"bluebird2000","email":"olamilekanahmad7@gmail.com"}],"_npmUser":{"name":"bluebird2000","email":"olamilekanahmad7@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-app-intro_0.0.1_1584548510232_0.18922549574561187"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-18T16:21:49.967Z","0.0.1":"2020-03-18T16:21:50.332Z","modified":"2022-04-04T19:44:18.872Z"},"maintainers":[{"name":"bluebird2000","email":"olamilekanahmad7@gmail.com"}],"description":"Simple and configurable app introduction slider for react native app","homepage":"https://github.com/Bluebird2000/react-native-app-intro#readme","keywords":["swiper","App","Intro","ios","android","react-component","react-native","slider"],"repository":{"type":"git","url":"git+https://github.com/Bluebird2000/react-native-app-intro.git"},"author":{"name":"Bluebird2000"},"bugs":{"url":"https://github.com/Bluebird2000/react-native-app-intro/issues"},"license":"ISC","readme":"<h1 align=\"center\">react-native-app-intro</h1>\n\n<p align=\"center\">Easy-to-use yet very configurable app introduction slider/swiper based on FlatList based on modification from Jacse/react-native-app-intro-slider</p>\n\n```sh\nnpm i @bluebird2000/react-native-app-intro --save\n```\n\n|                                                  |                                                         |\n| ------------------------------------------------ | ------------------------------------------------------- |\n| ![Button example gif](Images/button-example.gif) | ![Custom layout example gif](Images/custom-example.gif) |\n\n## Table of contents\n\n- [Usage](#usage)\n  - [Basic Example](#basic-example)\n  - [Configuring Buttons](#configuring-buttons)\n  - [Custom Slide Layout](#custom-slide-layout)\n- [Props and options](#props-and-options)\n  - [Configure behaviour](#configure-behaviour)\n  - [Configure looks](#configure-looks)\n- [Example](#example)\n\n<h2 align=\"center\">Usage</h2>\n\n### Basic example\n\n| No configuration                               | `showSkipButton`                                               | `bottomButton` and `showSkipButton`                                |\n| ---------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------ |\n| ![Basic example gif](Images/basic-example.gif) | ![showSkipButton example image](Images/skipbutton-example.jpg) | ![bottomButton example image](Images/bottomskipbutton-example.jpg) |\n\nThe 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).\n\n```javascript\nimport React from 'react';\nimport { StyleSheet } from 'react-native';\nimport AppIntroSlider from '@bluebird2000/react-native-app-intro';\n\nconst slides = [\n  {\n    key: 'Bluebird',\n    title: 'Title 1',\n    text: 'Description.\\nSay something cool',\n    image: require('./assets/1.jpg'),\n    backgroundColor: '#59b2ab',\n  },\n  {\n    key: 'Bluebird-dos',\n    title: 'Title 2',\n    text: 'Other cool stuff',\n    image: require('./assets/2.jpg'),\n    backgroundColor: '#febe29',\n  },\n  {\n    key: 'Bluebird1',\n    title: 'Rocket guy',\n    text: 'I\\'m already out of descriptions\\n\\nLorem ipsum bla bla bla',\n    image: require('./assets/3.jpg'),\n    backgroundColor: '#22bcb5',\n  }\n];\n\nexport default class App extends React.Component {\n  this.state = {\n    showRealApp: false\n  }\n  _renderItem = ({ item }) => {\n    return (\n      <View style={styles.slide}>\n        <Text style={styles.title}>{item.title}</Text>\n        <Image source={item.image} />\n        <Text style={styles.text}>{item.text}</Text>\n      </View>\n    );\n  }\n  _onDone = () => {\n    // User finished the introduction. Show real app through\n    // navigation or simply by controlling state\n    this.setState({ showRealApp: true });\n  }\n  render() {\n    if (this.state.showRealApp) {\n      return <App />;\n    } else {\n      return <AppIntroSlider renderItem={this._renderItem} slides={slides} onDone={this._onDone}/>;\n    }\n  }\n}\n```\n\n### Configuring buttons\n\n![Button example gif](Images/button-example.gif)\n\n```javascript\nimport React from 'react';\nimport { Ionicons } from '@expo/vector-icons';\nimport { StyleSheet, View } from 'react-native';\nimport AppIntroSlider from 'react-native-app-intro-slider';\n\nconst styles = StyleSheet.create({\n  buttonCircle: {\n    width: 40,\n    height: 40,\n    backgroundColor: 'rgba(0, 0, 0, .2)',\n    borderRadius: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  image: {\n    width: 320,\n    height: 320,\n  },\n});\n\n// slides = [...]\n\nexport default class App extends React.Component {\n  _renderNextButton = () => {\n    return (\n      <View style={styles.buttonCircle}>\n        <Ionicons\n          name=\"md-arrow-round-forward\"\n          color=\"rgba(255, 255, 255, .9)\"\n          size={24}\n          style={{ backgroundColor: 'transparent' }}\n        />\n      </View>\n    );\n  };\n  _renderDoneButton = () => {\n    return (\n      <View style={styles.buttonCircle}>\n        <Ionicons\n          name=\"md-checkmark\"\n          color=\"rgba(255, 255, 255, .9)\"\n          size={24}\n          style={{ backgroundColor: 'transparent' }}\n        />\n      </View>\n    );\n  };\n  render() {\n    return (\n      <AppIntroSlider\n        slides={slides}\n        renderDoneButton={this._renderDoneButton}\n        renderNextButton={this._renderNextButton}\n      />\n    );\n  }\n}\n```\n\n### Custom slide layout\n\n![Custom layout example gif](Images/custom-example.gif)\n\n```js\nimport React from 'react';\nimport { Ionicons } from '@expo/vector-icons';\nimport { StyleSheet, View, Text, Image } from 'react-native';\nimport { LinearGradient } from 'expo';\nimport AppIntroSlider from 'react-native-app-intro-slider';\n\nconst styles = StyleSheet.create({\n  mainContent: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'space-around',\n  },\n  image: {\n    width: 320,\n    height: 320,\n  },\n  text: {\n    color: 'rgba(255, 255, 255, 0.8)',\n    backgroundColor: 'transparent',\n    textAlign: 'center',\n    paddingHorizontal: 16,\n  },\n  title: {\n    fontSize: 22,\n    color: 'white',\n    backgroundColor: 'transparent',\n    textAlign: 'center',\n    marginBottom: 16,\n  },\n});\n\nconst slides = [\n  {\n    key: 'somethun',\n    title: 'Quick setup, good defaults',\n    text:\n      'React-native-app-intro-slider is easy to setup with a small footprint and no dependencies. And it comes with good default layouts!',\n    icon: 'ios-images-outline',\n    colors: ['#63E2FF', '#B066FE'],\n  },\n  {\n    key: 'somethun1',\n    title: 'Super customizable',\n    text:\n      'The component is also super customizable, so you can adapt it to cover your needs and wants.',\n    icon: 'ios-options-outline',\n    colors: ['#A3A1FF', '#3A3897'],\n  },\n  {\n    key: 'somethun2',\n    title: 'No need to buy me beer',\n    text: 'Usage is all free',\n    icon: 'ios-beer-outline',\n    colors: ['#29ABE2', '#4F00BC'],\n  },\n];\n\nexport default class App extends React.Component {\n  _renderItem = ({ item, dimensions }) => (\n    <LinearGradient\n      style={[\n        styles.mainContent,\n        dimensions,\n      ]}\n      colors={item.colors}\n      start={{ x: 0, y: 0.1 }}\n      end={{ x: 0.1, y: 1 }}\n    >\n      <Ionicons\n        style={{ backgroundColor: 'transparent' }}\n        name={item.icon}\n        size={200}\n        color=\"white\"\n      />\n      <View>\n        <Text style={styles.title}>{item.title}</Text>\n        <Text style={styles.text}>{item.text}</Text>\n      </View>\n    </LinearGradient>\n  );\n\n  render() {\n    return <AppIntroSlider slides={slides} renderItem={this._renderItem} bottomButton />;\n  }\n}\n```\n\nHere 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.\n\n<h2 align=\"center\">Props and options</h2>\n\nThe component extends `FlatList` so all FlatList-props are valid.\n\n### Configure looks\n\n| Name             | Type       | Default                                      | Description                                                                                                                                                                                      |\n| ---------------- | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| skipLabel        | `string`   | `Skip`                                       | Custom label for Skip button                                                                                                                                                                     |\n| doneLabel        | `string`   | `Done`                                       | Custom label for Done button                                                                                                                                                                     |\n| nextLabel        | `string`   | `Next`                                       | Custom label for Next button                                                                                                                                                                     |\n| prevLabel        | `string`   | `Back`                                       | Custom label for Prev button                                                                                                                                                                     |\n| bottomButton     | `boolean`  | `false`                                      | Enable to show a full-width button under pagination                                                                                                                                              |\n| buttonStyle      | `style`    | `null`                                       | Styling of outer button component                                                                                                                                                                |\n| buttonTextStyle  | `style`    | `null`                                       | Styling of button text component                                                                                                                                                                 |\n| dotStyle         | `style`    | {backgroundColor: 'rgba(0, 0, 0, .2)'}       | Style of inactive pagination dots                                                                                                                                                                |\n| activeDotStyle   | `style`    | {backgroundColor: 'rgba(255, 255, 255, .9)'} | Style of active pagination dot                                                                                                                                                                   |\n| paginationStyle  | `style`    | `null`                                       | Styling of the pagination dots                                                                                                                                                                   |\n| hidePagination   | `boolean`  | `false`                                      | Enable to hide the pagination                                                                                                                                                                    |\n| renderNextButton | `function` | renders a Text-component                     | Use to supply your own next button                                                                                                                                                               |\n| renderPrevButton | `function` | renders a Text-component                     | Use to supply your own prev button                                                                                                                                                               |\n| renderDoneButton | `function` | renders a Text-component                     | Use to supply your own done button                                                                                                                                                               |\n| renderSkipButton | `function` | renders a Text-component                     | Use to supply your own skip button                                                                                                                                                               |\n| 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. |\n\n### Configure behavior\n\n| Name           | Type       | Default                    | Description                                                                                                                                               |\n| -------------- | ---------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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)                        |\n| 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 |\n| 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      |\n| showNextButton | `boolean`  | `true`                     | Disable to hide the next button                                                                                                                           |\n| showDoneButton | `boolean`  | `true`                     | Disable to hide the done button                                                                                                                           |\n| onSlideChange  | `function` | `void`                     | Called when user goes changes slide (by swiping or pressing next/prev). Function called with arguments `index: number, lastIndex: number`                 |\n| onDone         | `function` | `void`                     | Called when user ends the introduction by pressing the done button                                                                                        |\n| onSkip         | `function` | Scroll the list to the end | Called when user presses the skip button                                                                                                                  |\n\n#### Slide object\n\nIf you want to use the default slide layout, your slides can contain the following information:\n\n| Name            | Type                | Note                                        |\n| --------------- | ------------------- | ------------------------------------------- |\n| title           | `string`            | The title                                   |\n| titleStyle      | `Style`-prop        | Styling for the title (e.g color, fontSize) |\n| text            | `string`            | Main text of slide                          |\n| textStyle       | `Style`-prop        | Styling for the text (e.g color, fontSize)  |\n| image           | `Image`-source prop | Slide image                                 |\n| imageStyle      | `Style`-prop        | Styling for the image (e.g. size)           |\n| backgroundColor | `string`            | Slide background color                      |\n\n### Methods\n\n| Method Name | Arguments | Description                          |\n| ----------- | --------- | ------------------------------------ |\n| goToSlide   | `number`  | Change to slide with specified index |\n| getListRef  | `none`    | Returns the Flat List ref            |\n\n<h2 align=\"center\">Example</h2>\n\nYou can run the example Expo-app by cloning the repo:\n\n```sh\ngit clone https://github.com/Jacse/react-native-app-intro-slider.git\ncd react-native-app-intro-slider/Example\nyarn\nyarn start\n```\n","readmeFilename":"README.md"}