"App Intro Slider - React Native"
Bootstrap 4.1.1 Snippet by RachnaKhatnawlia

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> import * as React from 'react'; import { useState } from 'react'; import { Text, View, StyleSheet, Image } from 'react-native'; import AppIntroSlider from 'react-native-app-intro-slider'; export default function Tutorial() { const [showSlider, setShowSlider] = useState(true); const slides = [ { key: '1', image: require('../assets/ic_1_2x.png'), title: 'Hendrerit vulputate sem', description: 'hello.', }, { key: '2', image: require('../assets/ic_1_2x.png'), title: 'Hendrerit vulputate sem', description:'hello2' }, { key: '3', image: require('../assets/ic_1_2x.png'), title: 'Hendrerit vulputate sem', description:'hello3' }, ]; const renderItem = ({ item }) => { return ( <View style={styles.slide}> <View> <Image source={item.image} style={styles.introSLiderPic} /> </View> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={styles.slideTitle}>{item.title}</Text> <Text style={styles.sliderDes}>{item.description}</Text> </View> </View> ); }; return ( <View style={styles.sliderContainer}> {showSlider ? ( <AppIntroSlider data={slides} renderItem={renderItem} showSkipButton={true} onDone={()=>{setShowSlider(false)}}/> ) : ( <View> <Text>i am home component</Text> </View> )} </View> ); }
const styles = StyleSheet.create({ sliderContainer: { backgroundColor: '#2E2E2E', padding: 20, }, slide: { backgroundColor: '#4C4C4C', borderRadius: 15, }, slideTitle: { fontSize: 22, textAlign: 'center', color:'#ffffff' }, sliderDes: { color:'#999999', lineHeight:22, textAlign:'center', padding:20 }, introSLiderPic: { height: 230, width: 250, flex: 1, alignSelf: 'center', }, });

Related: See More


Questions / Comments: