forked fromFuYaoDe/react-native-app-intro
- Notifications
You must be signed in to change notification settings - Fork13
react-native-app-intro is a react native component 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...
License
NotificationsYou must be signed in to change notification settings
Sh1n1x/react-native-app-intro
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
react-native-app-intro is a react native component implementing a parallax effect welcome page using base onreact-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
- Add autoplay & autoplayTimeout
- Add npmignore
- Add allowFontScaling & fontSize props for Skip, Next, and Done labels
$ npm i react-native-app-intro-v2 --save
You 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.
importReact,{Component}from'react';import{AppRegistry,Alert}from'react-native';importAppIntrofrom'react-native-app-intro';classExampleextendsComponent{onSkipBtnHandle=(index)=>{Alert.alert('Skip');console.log(index);}doneBtnHandle=()=>{Alert.alert('Done');}nextBtnHandle=(index)=>{Alert.alert('Next');console.log(index);}onSlideChangeHandle=(index,total)=>{console.log(index,total);}render(){constpageArray=[{title:'Page 1',description:'Description 1',img:'https://goo.gl/Bnc3XP',imgStyle:{height:80*2.5,width:109*2.5,},backgroundColor:'#fa931d',statusBarColor:'#fa931d',// If you don't specify, a 30% darker color will be inferred from your background color.fontColor:'#fff',level:10,},{title:'Page 2',description:'Description 2',img:require('../assets/some_image.png'),imgStyle:{height:93*2.5,width:103*2.5,},backgroundColor:'#a4b602',fontColor:'#fff',level:10,}];return(<AppIntroonNextBtnClick={this.nextBtnHandle}onDoneBtnClick={this.doneBtnHandle}onSkipBtnClick={this.onSkipBtnHandle}onSlideChange={this.onSlideChangeHandle}pageArray={pageArray}/>);}}AppRegistry.registerComponent('Example',()=>Example);
If you need customized page like my Example, you can pass inView component into AppIntro component and set level. Remember any need use parallax effect component, Need to be<View level={10}></View> inside.
importReact,{Component}from'react';import{AppRegistry,StyleSheet,Text,View,}from'react-native';importAppIntrofrom'react-native-app-intro';conststyles=StyleSheet.create({slide:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#9DD6EB',padding:15,},text:{color:'#fff',fontSize:30,fontWeight:'bold',},});classExampleextendsComponent{render(){return(<AppIntro><Viewstyle={[styles.slide,{backgroundColor:'#fa931d'}]}><Viewlevel={10}><Textstyle={styles.text}>Page 1</Text></View><Viewlevel={15}><Textstyle={styles.text}>Page 1</Text></View><Viewlevel={8}><Textstyle={styles.text}>Page 1</Text></View></View><Viewstyle={[styles.slide,{backgroundColor:'#a4b602'}]}><Viewlevel={-10}><Textstyle={styles.text}>Page 2</Text></View><Viewlevel={5}><Textstyle={styles.text}>Page 2</Text></View><Viewlevel={20}><Textstyle={styles.text}>Page 2</Text></View></View><Viewstyle={[styles.slide,{backgroundColor:'#fa931d'}]}><Viewlevel={8}><Textstyle={styles.text}>Page 3</Text></View><Viewlevel={0}><Textstyle={styles.text}>Page 3</Text></View><Viewlevel={-10}><Textstyle={styles.text}>Page 3</Text></View></View><Viewstyle={[styles.slide,{backgroundColor:'#a4b602'}]}><Viewlevel={5}><Textstyle={styles.text}>Page 4</Text></View><Viewlevel={10}><Textstyle={styles.text}>Page 4</Text></View><Viewlevel={15}><Textstyle={styles.text}>Page 4</Text></View></View></AppIntro>);}}AppRegistry.registerComponent('Example',()=>Example);
And in Android, image inside view component, view need width、height.
<Viewstyle={{position:'absolute',top:80,left:30,width:windows.width,height:windows.height,}}level={20}><Imagestyle={{width:115,height:70}}source={require('./img/1/c2.png')}/></View>
| Prop | PropType | Default Value | Description |
|---|---|---|---|
| dotColor | string | 'rgba(255,255,255,0.3)' | Bottom of the page dot color |
| activeDotColor | string | '#fff' | Active page index dot color |
| rightTextColor | string | '#fff' | The bottom right TextDone、> color |
| leftTextColor | string | '#fff' | The bottom left TextSkip color |
| onSlideChange | (index, total) => {} | function to call when the pages change | |
| onSkipBtnClick | (index) => {} | function to call when the Skip button click | |
| onDoneBtnClick | func | function to call when the Done button click | |
| onNextBtnClick | (index) => {} | function to call when the Next '>' button click | |
| doneBtnLabel | string、Text element | Done | The bottom right custom Text label |
| skipBtnLabel | string、Text element | Skip | The bottom left custom Text label |
| nextBtnLabel | string、Text element | › | The bottom left custom Text label |
| 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 | |
| defaultIndex | number | 0 | number of the index of the initial index |
| showSkipButton | bool | true | a boolean defining if we should render the skip button |
| showDoneButton | bool | true | a boolean that defines if we should render the done button |
| showDots | bool | true | a boolean that defines if we should render the bottom dots |
| allowFontScaling | bool | true | a boolean that defines if we should allow font scaling on devices with larger text sizes enabled |
| fontSize | number | 22 | a number that specifies the size of the Skip, Done, and Next labels |
| autoplay | bool | false | Set totrue enable auto play mode. |
| autoplayTimeout | number | 4 | Delay between auto play transitions (in second). |
| Prop | PropType | Default Value | Description |
|---|---|---|---|
| level | number | parallax effect level |
About
react-native-app-intro is a react native component 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...
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Languages
- JavaScript84.3%
- Objective-C10.5%
- Python3.1%
- Java2.1%