A library for React Native to build a tutorial intro.
$ yarn add react-native-js-app-tutorialreact-native-js-app-tutorial has ready templates to show pages. You can import Slide, a template prepared to show a slide with a default style. If you prefer, you can provide your own template. Just make sure that it belongs to IntroSlider component (as a child).
You can also override the default skip button, passing a skipButton prop to IntroSlider.
/* @flow */importReact,{Component}from'react';import{StyleSheet}from'react-native';import{IntroSlider,Slide}from'react-native-js-app-tutorial';typeProps={navigator: Object};classExampleextendsComponent<Props>{
_onSkip =()=>{console.log('onSkip pressed');};render(){return(<IntroSlideronSkip={this._onSkip}activeDotStyle={styles.activeDot}showSkipButton={true}skipTitleButton="SKIP"skipLastTitleButton="NEXT"tintStatusBar={true}animationType={'Parallax'}><Slideimage={{uri:
'https://images.pexels.com/photos/259600/pexels-photo-259600.jpeg?cs=srgb&dl=architecture-facade-house-259600.jpg&fm=jpg'}}title="Welcome"description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mollis risus. Nam dignissim porttitor suscipit."backgroundColor="#FEBE29"titleStyle={styles.title}imageStyle={styles.image}descriptionStyle={styles.description}/><Slideimage={{uri:
'https://images.pexels.com/photos/259600/pexels-photo-259600.jpeg?cs=srgb&dl=architecture-facade-house-259600.jpg&fm=jpg'}}title="Welcome 2"description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mollis risus. Nam dignissim porttitor suscipit."backgroundColor="#CD5C5C"titleStyle={styles.title}imageStyle={styles.image}descriptionStyle={styles.description}/><Slideimage={{uri:
'https://images.pexels.com/photos/259600/pexels-photo-259600.jpeg?cs=srgb&dl=architecture-facade-house-259600.jpg&fm=jpg'}}title="Welcome 3"description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mollis risus. Nam dignissim porttitor suscipit."backgroundColor="#6495ED"titleStyle={styles.title}imageStyle={styles.image}descriptionStyle={styles.description}/></IntroSlider>);}}conststyles=StyleSheet.create({activeDot: {backgroundColor: 'white'},title: {fontFamily: 'AvenirNext-Bold'},description: {fontFamily: 'Avenir Next'},image: {width: '80%',height: 200}});exportdefaultExample;| Prop | Type | Required | Description |
|---|---|---|---|
| page | number | No | Index of initial page that should be selected |
| onSkip | Function | No | Function to execute when default skip button is pressed |
| activeDotStyle | Object | No | Styles object of active dot at the bottom |
| inactiveDotStyle | Object | No | Styles object of inactive dot at the bottom |
| skipTitleButton | string | No | Title of the skip button |
| skipLastTitleButton | string | No | Title of the skip button when last page is displayed |
| skipButton | React.Element | No | Display a custom skip button component to override the default template |
| animationType | string | No | Choose a predefined animation to apply on ScrollView's children (default: Parallax, types: Parallax, Pager, ZoomOut, TranslateY, RotateX, RotateY, Flip & FadeIn) |
| customAnimation | Object | No | Custom animation to apply on ScrollView's children |
MIT License
Copyright (c) 2018 InterfaceKit
Antonio Moreno Valls <amoreno at apsl.net>
Built with 💛 by APSL.