Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to implement OnDone button #260

Open
jamsyogendra opened this issue Jun 13, 2022 · 3 comments
Open

how to implement OnDone button #260

jamsyogendra opened this issue Jun 13, 2022 · 3 comments

Comments

@jamsyogendra
Copy link

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
Copy link
Author

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
Copy link

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

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

@jamsyogendra
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants