react-native-intro-screens

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

1. Example
2. Installation
3. Usage
4. Properties
5. Contributing

Example

Example code

Support ios and android

Installation

For React Native <=60

1$ npm i rn-falcon-app-intro@1.2.3

For React Native >=60

1$ npm i react-native-intro-screens

Basic Usage

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.

1import React, { Component } from 'react';
2import { AppRegistry, Alert } from 'react-native';
3import AppIntro from 'react-native-intro-screens';
4
5function Example() {
6  const onSkipBtnHandle = (index) => {
7    Alert.alert('Skip');
8    console.log(index);
9  }
10  const doneBtnHandle = () => {
11    Alert.alert('Done');
12  }
13  const nextBtnHandle = (index) => {
14    Alert.alert('Next');
15    console.log(index);
16  }
17  const onSlideChangeHandle = (index, total) => {
18    console.log(index, total);
19  }
20
21  const pageArray = [{
22    title: 'Page 1',
23    description: 'Description 1',
24    img: 'https://goo.gl/Bnc3XP',
25    imgStyle: {
26      height: 80 * 2.5,
27      width: 109 * 2.5,
28    },
29    backgroundColor: '#fa931d',
30    fontColor: '#fff',
31    level: 10,
32  }, {
33    title: 'Page 2',
34    description: 'Description 2',
35    img: require('../assets/some_image.png'),
36    imgStyle: {
37      height: 93 * 2.5,
38      width: 103 * 2.5,
39    },
40    backgroundColor: '#a4b602',
41    fontColor: '#fff',
42    level: 10,
43  }];
44
45  return (
46    <AppIntro
47      onNextBtnClick={this.nextBtnHandle}
48      onDoneBtnClick={this.doneBtnHandle}
49      onSkipBtnClick={this.onSkipBtnHandle}
50      onSlideChange={this.onSlideChangeHandle}
51      pageArray={pageArray}
52    />
53  );
54}
55
56AppRegistry.registerComponent('Example', () => Example);

Usage

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.

1import React, { Component } from 'react';
2import {
3  AppRegistry,
4  StyleSheet,
5  Text,
6  View,
7} from 'react-native';
8import AppIntro from 'react-native-intro-screens';
9
10const styles = StyleSheet.create({
11  slide: {
12    flex: 1,
13    justifyContent: 'center',
14    alignItems: 'center',
15    backgroundColor: '#9DD6EB',
16    padding: 15,
17  },
18  text: {
19    color: '#fff',
20    fontSize: 30,
21    fontWeight: 'bold',
22  },
23});
24
25function Example() {
26  return (
27    <AppIntro>
28      <View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
29        <View level={10}><Text style={styles.text}>Page 1</Text></View>
30        <View level={15}><Text style={styles.text}>Page 1</Text></View>
31        <View level={8}><Text style={styles.text}>Page 1</Text></View>
32      </View>
33      <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
34        <View level={-10}><Text style={styles.text}>Page 2</Text></View>
35        <View level={5}><Text style={styles.text}>Page 2</Text></View>
36        <View level={20}><Text style={styles.text}>Page 2</Text></View>
37      </View>
38      <View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
39        <View level={8}><Text style={styles.text}>Page 3</Text></View>
40        <View level={0}><Text style={styles.text}>Page 3</Text></View>
41        <View level={-10}><Text style={styles.text}>Page 3</Text></View>
42      </View>
43      <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
44        <View level={5}><Text style={styles.text}>Page 4</Text></View>
45        <View level={10}><Text style={styles.text}>Page 4</Text></View>
46        <View level={15}><Text style={styles.text}>Page 4</Text></View>
47      </View>
48    </AppIntro>
49  );
50}
51AppRegistry.registerComponent('Example', () => Example);

And in Android, image inside view component, view need width、height.

1<View style={{
2  position: 'absolute',
3  top: 80,
4  left: 30,
5  width: windows.width,
6  height: windows.height,
7}} level={20}
8>
9  <Image style={{ width: 115, height: 70 }} source={require('./img/1/c2.png')} />
10</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	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.