Jacse / react-native-app-intro-slider

Simple and configurable app introduction slider for react native
MIT License
1.65k stars 330 forks source link

how to implement OnDone button #260

Open jamsyogendra opened 2 years ago

jamsyogendra commented 2 years ago

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',
      },
  });
jamsyogendra commented 2 years ago

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

AshirbadGudu commented 2 years ago

If you are using react-navigation add the following code into the _onDone method

this.props.navigation.replace('Login')
jamsyogendra commented 2 years ago

If you are using react-navigation add the following code into the _onDone method

this.props.navigation.replace('Login')

sorry but i got an error "undifined is not an object