rn-falcon-app-intro
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...
This component is based on this no longer followed frequently: react-native-app-intro
Table of Content
Example
Support ios and android
Installation
For React Native <=60
$ npm i rn-falcon-app-intro@1.2.3 --saveFor React Native >=60
$ npm i rn-falcon-app-intro --saveUsage
If 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 <View level={10}></View> inside.
(At the moment the parallax effect doesn't work, maybe in the future it will be fixed)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import AppIntro from 'rn-falcon-app-intro';
const styles = StyleSheet.create({
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
padding: 15,
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
});
class Example extends Component {
render() {
return (
<AppIntro>
<View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
<View level={10}><Text style={styles.text}>Page 1</Text></View>
<View level={15}><Text style={styles.text}>Page 1</Text></View>
<View level={8}><Text style={styles.text}>Page 1</Text></View>
</View>
<View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
<View level={-10}><Text style={styles.text}>Page 2</Text></View>
<View level={5}><Text style={styles.text}>Page 2</Text></View>
<View level={20}><Text style={styles.text}>Page 2</Text></View>
</View>
<View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
<View level={8}><Text style={styles.text}>Page 3</Text></View>
<View level={0}><Text style={styles.text}>Page 3</Text></View>
<View level={-10}><Text style={styles.text}>Page 3</Text></View>
</View>
<View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
<View level={5}><Text style={styles.text}>Page 4</Text></View>
<View level={10}><Text style={styles.text}>Page 4</Text></View>
<View level={15}><Text style={styles.text}>Page 4</Text></View>
</View>
</AppIntro>
);
}
}
AppRegistry.registerComponent('Example', () => Example);And in Android, image inside view component, view need widthăheight.
<View style={{
position: 'absolute',
top: 80,
left: 30,
width: windows.width,
height: windows.height,
}} level={20}
>
<Image style={{ width: 115, height: 70 }} source={require('./img/1/c2.png')} />
</View>Properties
| 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 Text Doneă> color |
| leftTextColor | string | '#fff' | The bottom left Text Skip 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 (currently not working, don't use it) | 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 |
| scrollEnabled | bool | true | a boolean that defines if swiping is enabled or disabled |
| width | number | default width of the device | a number that defines the width of the view swiper |
| height | number | default height of the device | a number that defines the height of the view swiper |
| flexContainer | number | 1 | a number that defines the flex value of the view swiper |
Children View Properties
| Prop | PropType | Default Value | Description |
|---|---|---|---|
| level | number | parallax effect level |
Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
