Integrating React Native swiper to react native ignite generator

React native swiper one of the popular component for page control in react native

Ignite one of the popular react native generator

Currently react native swiper has 1469 stars.
Here are the steps
1. Importing react native swiper library to ignite-base/package.json{dependencies}

2. Need to decide if it is component or container or screen?
- since the swiper library can contain other components or screen but at the same time it will not occupy the whole screen, then it can be categories as “container”

3. To create a new container generator, it can follow LoginScreen.js container
- ignite generate container IntroPage
 — above line create two files
create App/Containers/IntroPage.js
create App/Containers/Styles/IntroPageStyle.js

4. Import “react-native-swiper” library into IntroPage.js
import Swiper from ‘react-native-swiper’

5. add swiper to IntroPage.js
 <Swiper style={styles.container} 
 <View style={styles.slide1}>
 <Text style={styles.text}>Hello Swiper</Text>
 <View style={styles.slide2}>
 <Text style={styles.text}>Beautiful</Text>
 <View style={styles.slide3}>
 <Text style={styles.text}>And simple</Text>

6. add style to /IntroPageStyle.js
 slide1: {
 flex: 1,
 justifyContent: ‘center’,
 alignItems: ‘center’,
 backgroundColor: ‘#9DD6EB’,
 slide2: {
 flex: 1,
 justifyContent: ‘center’,
 alignItems: ‘center’,
 backgroundColor: ‘#97CAE5’,
 slide3: {
 flex: 1,
 justifyContent: ‘center’,
 alignItems: ‘center’,
 backgroundColor: ‘#92BBD9’,

7. integrate drawer on the left side to call Intro Page and here is the gist

IntroPage and IntroPageStyle gist

8. the screenshot of functional intro page tour

9.===> Next step is ==> Ideas in how to make this as part of generator component
10. There are 2 files to make swiper component to work

11. Swiper type/parameters as component
- Number of slide
- Type of slide (horizontal slide, vertical slide, header slide, whole page slide)

12. Finally, is all these above necessary to create it as a component? may be it just too much customization for generator and less priority

That’s all first trial of integrating react native swiper to ignite

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.