{"_id":"react-native-app-intro","_rev":"11-78b3802a30b3f6cc3f93ac3a6eb3f312","name":"react-native-app-intro","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","dist-tags":{"latest":"1.1.5"},"versions":{"1.0.0":{"name":"react-native-app-intro","version":"1.0.0","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"298544aa07a8dd642479b3d5edf58d87bcbf3342","_id":"react-native-app-intro@1.0.0","_shasum":"285856471466fdd08575201225e143203aa0438c","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.2.4","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"285856471466fdd08575201225e143203aa0438c","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.0.0.tgz","integrity":"sha512-QB9XILX3oo7LKxNZEZFaAtzRRYXIHjp7jubndryVNjIx3jQfalUCjaO3wUPo9l9AnNTWQvp99xA7pLEYzqJV7A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB++4c19mS8O2jJppXyO9W473zTVViOYp5QM4JRCqt7lAiBVGstKQ3+nBchIoAmju71v1QVTeU1rPolrf3AIk2P+Rg=="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.0.0.tgz_1461780089576_0.7118455895688385"}},"1.0.1":{"name":"react-native-app-intro","version":"1.0.1","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"77887afa6897f681d75bbd42fb75c5093b97bec3","_id":"react-native-app-intro@1.0.1","_shasum":"d570b9ee477d3bd68d8f156b7f6325f716fab13a","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.2.4","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"d570b9ee477d3bd68d8f156b7f6325f716fab13a","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.0.1.tgz","integrity":"sha512-SioPpReMvWMWrBWSW2eN96FryEG/ew11TcThnuOfRcu/KqBbiukToKiCf0sZdgBO25PJiOk8BJ2T1sc1M/VQvw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZaPKqJusu+mSfBXLkZP0EiciSsCAXmfa8Ydx9PYDXGAiEAry/oF8UxrkVTZR6pSONQ8dMgi7TfwpVrOmpQU8LW/dw="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.0.1.tgz_1461780787928_0.17909181211143732"}},"1.0.2":{"name":"react-native-app-intro","version":"1.0.2","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"1740499b5ed8853afd79a53a9129aa93db67a849","_id":"react-native-app-intro@1.0.2","_shasum":"871931e4921b68aa3ef671d192a7047b026cb589","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.2.4","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"871931e4921b68aa3ef671d192a7047b026cb589","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.0.2.tgz","integrity":"sha512-NyDNLX68GbyHQjB6eQr5U5onX/hsARywWFFx+Q4fCvBtwrhvrTpr3NaJV1O60ZNxo0RylQ9d6OnKDGe82CyNMg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRhCDlz2EhBsKtz7jkRFEcEEonXi//YAXQLnP3Ep8D+gIgfDLe+gsfR8b/wPgfsjcVheNo5hjYPh3IgXEav7nHMOM="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.0.2.tgz_1461809266480_0.5432919040322304"}},"1.1.0":{"name":"react-native-app-intro","version":"1.1.0","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","android","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"53a7741544afa675e8cf8e443a857e0ad588cf8a","_id":"react-native-app-intro@1.1.0","_shasum":"d9e67fae896f3a90e62dbe85ad2c179ee9afc3b3","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.2.4","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"d9e67fae896f3a90e62dbe85ad2c179ee9afc3b3","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.1.0.tgz","integrity":"sha512-vVh2IdfsSduIOWdUeubuVdKfjjXvUE6l6j5OEp1GMiBhfYRurGl8XFodFVYQbgf9BPu+wxiESAfuBRIfRX+oJg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzSvkThZCorKYE13k6FcFZyOXJ90XzFCUcwP8B1/kM6AiEA12ZcGkG1dzOsB9hN+9Bvja55z6O4Y0qrAYGOA/stOrY="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.1.0.tgz_1463855560678_0.7030836383346468"}},"1.1.2":{"name":"react-native-app-intro","version":"1.1.2","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","android","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"344b7120408f74320943b778add130f1278a22bb","_id":"react-native-app-intro@1.1.2","_shasum":"d5aa5159485fe6680ad5ebe63bbd6a1bb03164b0","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.2.4","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"d5aa5159485fe6680ad5ebe63bbd6a1bb03164b0","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.1.2.tgz","integrity":"sha512-o8jle21sRmIglsTRq19ROHakT6DFcsyWyOeChXFRAlJ4hYu2CrSM5RrsOuvLqxpeGXmkN1wfFaZ4aM5Nixf4ag==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEr0NGcx2+0CV6uy4Q+DUfmUZIZGQMGqx1QDxVaY9eSnAiB2JtbRm+r+u4QmVR06cXBXdfIYi7/SX5IJxbEkcl/L7A=="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.1.2.tgz_1464975641993_0.44587469659745693"}},"1.1.3":{"name":"react-native-app-intro","version":"1.1.3","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","android","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"assign-deep":"^0.4.5","react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"41bda424c7fae9eeef54619d0b65b316c9e9fb93","_id":"react-native-app-intro@1.1.3","_shasum":"aafe48607c67e3a1750e487af4687647d5de32f4","_from":".","_npmVersion":"3.8.6","_nodeVersion":"5.11.1","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"aafe48607c67e3a1750e487af4687647d5de32f4","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.1.3.tgz","integrity":"sha512-Hn11md7/13gdw3oBIcad4iI2DmwtL1TfsAgUuK0SULXyR/GpFi6Zbb3+t5DKE7OdYnTH1W/JDFtrOnKsVQz5oQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWU/WdrVKYuA6xe3KOK7+YVpsz6RSNRml+23keXh0oiAiAfTmWqkNLlDdVm+0TdGkRcFZ6lwmnn/nKJMVBjxiV0IA=="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.1.3.tgz_1466662624733_0.3411353612318635"}},"1.1.4":{"name":"react-native-app-intro","version":"1.1.4","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","android","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"assign-deep":"^0.4.5","react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"d8a0d2f72dd143d73cbb8b64fcb3f971efedcf4c","_id":"react-native-app-intro@1.1.4","_shasum":"440035b31740b3b706a443b22a2a8165d7fd2e45","_from":".","_npmVersion":"3.8.6","_nodeVersion":"5.11.1","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"440035b31740b3b706a443b22a2a8165d7fd2e45","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.1.4.tgz","integrity":"sha512-pCUsHergOWgeFjBp68kNgufIXMLW+Rb14qocIkuT5qamMEyLgOK+WBNMhtlwsHxxodVwkOvQXLfNaD/chVe2Xg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+TkM2HUJU0cLPBdigWw8UYPD0Eclpk+fmNf0pw5wjKAiBzRsQjCHCxCPbIw/xLHeE4jgpGmPye3EnlaMKxiCjAOg=="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.1.4.tgz_1473069520865_0.333183815702796"}},"1.1.5":{"name":"react-native-app-intro","version":"1.1.5","description":"react-native-app-intro is a react native plugin implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...","main":"AppIntro.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"keywords":["swiper","ProductTour","App","Intro","ios","android","react-component","react-native"],"author":"","license":"ISC","bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","dependencies":{"assign-deep":"^0.4.5","react-native-swiper":"git+https://github.com/FuYaoDe/react-native-swiper.git"},"gitHead":"fe25254f868ff830d06781de71458858ed8052ab","_id":"react-native-app-intro@1.1.5","_shasum":"34a2d2265b2d654d31bae743c404856c37448692","_from":".","_npmVersion":"3.10.8","_nodeVersion":"5.11.1","_npmUser":{"name":"fuyaode","email":"dan82625@gmail.com"},"dist":{"shasum":"34a2d2265b2d654d31bae743c404856c37448692","tarball":"https://registry.npmjs.org/react-native-app-intro/-/react-native-app-intro-1.1.5.tgz","integrity":"sha512-Uta8ip3hQr215xbbScAGXHeoCplCw6PI4dm37LdHfxRWqWnMUVkZubd3/NVuHmTYZyKPGVRVKCdDSixUHW1YBA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK1DjOqYDgA5wNBqDznkXvUNZpEDPW7vZT9M5ApEYcuAIgVCatWQUnvOebUoQd7qUjYaO0QdnJ7KMUdS78a816N4k="}]},"maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-native-app-intro-1.1.5.tgz_1476236482986_0.32760764192789793"}}},"readme":"# react-native-app-intro\nreact-native-app-intro is a react native component implementing a parallax effect welcome page using base on [react-native-swiper](https://github.com/leecade/react-native-swiper) , similar to the one found in Google's app like Sheet, Drive, Docs...\n\n# react-native-app-intro Screen Capture\n\n[Example code](https://github.com/FuYaoDe/react-native-app-intro/tree/master/Example)\n\n### Support ios、android\n\n\n\nDesigned by Freepik\n\n### Installation\n\n```bash\n$ npm i react-native-app-intro --save\n```\n\n### Basic Usage\n\nYou can use pageArray quick generation your app intro with parallax effect. With the basic usage, the Android status bar will be updated to match your slide background color.\n\n\n\n\n\n```javascript\nimport React, { Component } from 'react';\nimport { AppRegistry, Alert } from 'react-native';\nimport AppIntro from 'react-native-app-intro';\n\nclass Example extends Component {\n onSkipBtnHandle = (index) => {\n Alert.alert('Skip');\n console.log(index);\n }\n doneBtnHandle = () => {\n Alert.alert('Done');\n }\n nextBtnHandle = (index) => {\n Alert.alert('Next');\n console.log(index);\n }\n onSlideChangeHandle = (index, total) => {\n console.log(index, total);\n }\n render() {\n const pageArray = [{\n title: 'Page 1',\n description: 'Description 1',\n img: 'https://goo.gl/Bnc3XP',\n imgStyle: {\n height: 80 * 2.5,\n width: 109 * 2.5,\n },\n backgroundColor: '#fa931d',\n fontColor: '#fff',\n level: 10,\n }, {\n title: 'Page 2',\n description: 'Description 2',\n img: require('../assets/some_image.png'),\n imgStyle: {\n height: 93 * 2.5,\n width: 103 * 2.5,\n },\n backgroundColor: '#a4b602',\n fontColor: '#fff',\n level: 10,\n }];\n return (\n \n );\n }\n}\n\nAppRegistry.registerComponent('Example', () => Example);\n```\n\n### Advanced Usage\n\nIf you need customized page like my Example, you can pass in `View` component into AppIntro component and set level. Remember any need use parallax effect component, Need to be `` inside.\n\n\n\n```javascript\nimport React, { Component } from 'react';\nimport {\n AppRegistry,\n StyleSheet,\n Text,\n View,\n} from 'react-native';\nimport AppIntro from 'react-native-app-intro';\n\nconst styles = StyleSheet.create({\n slide: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#9DD6EB',\n padding: 15,\n },\n text: {\n color: '#fff',\n fontSize: 30,\n fontWeight: 'bold',\n },\n});\n\nclass Example extends Component {\n\n render() {\n return (\n \n \n Page 1\n Page 1\n Page 1\n \n \n Page 2\n Page 2\n Page 2\n \n \n Page 3\n Page 3\n Page 3\n \n \n Page 4\n Page 4\n Page 4\n \n \n );\n }\n}\nAppRegistry.registerComponent('Example', () => Example);\n```\n\nAnd in Android, image inside view component, view need width、height.\n```javascript\n\n \n\n```\n\n## **Properties**\n| Prop | PropType | Default Value | Description |\n|----------------|----------|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| dotColor | string | 'rgba(255,255,255,0.3)' | Bottom of the page dot color |\n| activeDotColor | string | '#fff' | Active page index dot color |\n| rightTextColor | string | '#fff' | The bottom right Text `Done、>` color |\n| leftTextColor | string | '#fff' | The bottom left Text `Skip` color |\n| onSlideChange | (index, total) => {} | | function to call when the pages change |\n| onSkipBtnClick | (index) => {} | | function to call when the Skip button click |\n| onDoneBtnClick | func | | function to call when the Done button click |\n| onNextBtnClick | (index) => {} | | function to call when the Next '>' button click |\n| doneBtnLabel | string、Text element | Done | The bottom right custom Text label |\n| skipBtnLabel | string、Text element | Skip | The bottom left custom Text label |\n| nextBtnLabel | string、Text element | › | The bottom left custom Text label |\n| pageArray | array | | In the basic usage, you can input object array to render basic view example: ```[[{title: 'Page 1', description: 'Description 1', img: 'https://goo.gl/uwzs0C', imgStyle: {height: 80 * 2.5, width: 109 * 2.5 }, backgroundColor: '#fa931d', fontColor: '#fff', level: 10 }]``` , level is parallax effect level ,if you use pageArray you can't use custom view |\n| defaultIndex | number | 0 | number of the index of the initial index |\n| showSkipButton | bool | true | a boolean defining if we should render the skip button |\n| showDoneButton | bool | true | a boolean that defines if we should render the done button |\n\n##### **Children View Properties**\n| Prop | PropType | Default Value | Description |\n|-------|----------|---------------|-----------------------|\n| level | number | | parallax effect level |\n","maintainers":[{"name":"fuyaode","email":"dan82625@gmail.com"}],"time":{"modified":"2022-06-26T03:16:17.162Z","created":"2016-04-27T18:01:30.357Z","1.0.0":"2016-04-27T18:01:30.357Z","1.0.1":"2016-04-27T18:13:08.679Z","1.0.2":"2016-04-28T02:07:54.941Z","1.1.0":"2016-05-21T18:33:01.642Z","1.1.2":"2016-06-03T17:41:03.885Z","1.1.3":"2016-06-23T06:17:06.352Z","1.1.4":"2016-09-05T09:58:42.167Z","1.1.5":"2016-10-12T01:41:43.405Z"},"homepage":"https://github.com/fuyaode/react-native-app-intro#readme","keywords":["swiper","ProductTour","App","Intro","ios","android","react-component","react-native"],"repository":{"type":"git","url":"git+https://github.com/fuyaode/react-native-app-intro.git"},"bugs":{"url":"https://github.com/fuyaode/react-native-app-intro/issues"},"license":"ISC","readmeFilename":"README.md","users":{"abuelwafa":true}}