react-native-app-intro-slider
react-native-app-intro-slider copied to clipboard
how to implement OnDone button
Hello Everyone i am in learning here is my code and i try to config Ondone button can someone help me
import { StyleSheet, View, Text,Image } from 'react-native'
import React from 'react'
import AppIntroSlider from 'react-native-app-intro-slider';
const slides = [
{
key: 1,
image: require('./assets/Image/1.png'),
backgroundColor: '#59b2ab',
},
{
key: 2,
image: require('./assets/Image/2.png'),
text: 'Seemless Control',
backgroundColor: '#febe29',
},
{
key: 3,
//title: 'Rocket guy',
//text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
image: require('./assets/Image/3.png'),
backgroundColor: '#22bcb5',
}
];
export default class HomeScreen extends React.Component{
_renderItem = ({ item }) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.title}</Text>
<Image source={item.image} />
<Text style={styles.text}>{item.text}</Text>
</View>
);
}
_onDone = () => {
// User finished the introduction. Show real app through
// navigation or simply by controlling state
this.setState({ showRealApp: true });
}
render () {
return <AppIntroSlider renderItem={this._renderItem} data={slides} onDone={this._onDone}/>;
}
}
const styles = StyleSheet.create({
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#00AFB9',
},
image: {
width: 320,
height: 40,
marginVertical: 32,
},
text: {
color: 'rgba(255, 255, 255, 0.8)',
textAlign: 'center',
},
title: {
fontSize: 22,
color: 'white',
textAlign: 'center',
},
});
ok so i clear more about it when i finish my my intro then navigate to my login screen but i dont know how to navigate login screen
If you are using react-navigation add the following code into the _onDone method
this.props.navigation.replace('Login')
If you are using
react-navigationadd the following code into the _onDone methodthis.props.navigation.replace('Login')
sorry but i got an error "undifined is not an object