Description:
react-native-app-intro is a react native component to implement a parallax scrolling welcome page base on react-native-swiper , similar to the Google’s app like Sheet, Drive, Docs.
Installation:
# NPM $ npm install react-native-app-intro --save
Usage:
import React, { Component } from 'react';
import { AppRegistry, Alert } from 'react-native';
import AppIntro from 'react-native-app-intro';
class Example extends Component {
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() {
const pageArray = [{
title: 'Page 1',
description: 'Description 1',
img: 'https://goo.gl/Bnc3XP',
imgStyle: {
height: 80 * 2.5,
width: 109 * 2.5,
},
backgroundColor: '#fa931d',
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 (
<AppIntro
onNextBtnClick={this.nextBtnHandle}
onDoneBtnClick={this.doneBtnHandle}
onSkipBtnClick={this.onSkipBtnHandle}
onSlideChange={this.onSlideChangeHandle}
pageArray={pageArray}
/>
);
}
}
AppRegistry.registerComponent('Example', () => Example);Default props.
{
dotColor: 'rgba(255,255,255,.3)',
activeDotColor: '#fff',
rightTextColor: '#fff',
leftTextColor: '#fff',
pageArray: [],
onSlideChange: () => {},
onSkipBtnClick: () => {},
onDoneBtnClick: () => {},
onNextBtnClick: () => {},
doneBtnLabel: 'Done',
skipBtnLabel: 'Skip',
nextBtnLabel: '›',
defaultIndex: 0,
showSkipButton: true,
showDoneButton: true,
showDots: true
}Preview:
