Hide and Show Components in React Native

Question

I dont understand how to hide and show Components dependet und a state. I came up with the following code, but i think its wrong, because the UI isnt being update after i press the "login" button. Is there a general way to do this? I also aks myself how to handle changing between "Dialogs". For example i want that when a Button is clicked, that the current Dialog is closed and the target Dialog is renderd. How could i do this?

import React from 'react';
import { ImageBackground, StyleSheet, TouchableOpacity, Text, View, TextInput} from 'react-native';

function WelcomeScreen(props) {
   var loginDialog = {
      visible: false
};

var signUpDialog = {
    visible: false
};

var welcomeDialog = {
    visible: true
};

const login = loginDialog.visible ? (
    <View style={styles.loginDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const signup = signUpDialog.visible ? (
    <View style={styles.signUpDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const welcome = welcomeDialog.visible ? (
    <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={changeState("login")}style={[styles.button, styles.login]}>
                <Text style={styles.text}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={changeState("signup")} style={[styles.button, styles.signUp]}>
                <Text style={styles.text}>Sign Up</Text>
            </TouchableOpacity>
        </View>
) : null;

function changeState(mode){
    if(mode === "login"){
        console.log("Yes");
        welcomeDialog.visible = false;
        loginDialog.visible = true;
    }else if(mode === "signup"){
        welcomeDialog.visible = false;
        signUpDialog.visible = true;
    }
}

return (
    <ImageBackground style={styles.background}
        source={require('../assets/welcome_background.jpg')}>
       
        {login}

        {signup}

        {welcome}
        
    </ImageBackground>
);
}

export default WelcomeScreen;

Answer 1

Seems like you are new to react you should read about state https://reactjs.org/docs/state-and-lifecycle.html . You should use useState in functional component or setState in class component also I really recomend to use third party library for dialogs/modals. https://github.com/mmazzarolo/react-native-dialog https://github.com/react-native-modal/react-native-modal

import React, {useState} from 'react';
import { ImageBackground, StyleSheet, TouchableOpacity, Text, View, TextInput} from 'react-native';

function WelcomeScreen(props) {
  const [loginDialog,setLoginDialog] = useState(false);
  const [signUpDialog ,setSignUpDialog ] = useState(false);
   const [welcomeDialog ,setWelcomeDialog ] = useState(false);

const login = loginDialog ? (
    <View style={styles.loginDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const signup = signUpDialog? (
    <View style={styles.signUpDialog}>
        <TextInput style={styles.input}/>
    </View>
) : null;

const welcome = welcomeDialog? (
    <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={changeState("login")}style={[styles.button, styles.login]}>
                <Text style={styles.text}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={changeState("signup")} style={[styles.button, styles.signUp]}>
                <Text style={styles.text}>Sign Up</Text>
            </TouchableOpacity>
        </View>
) : null;

const changeState = (mode) => {
    if(mode === "login"){
        console.log("Yes");
        setWelcomeDialog(false);
        setLoginDialog(true);
    }else if(mode === "signup"){
        setWelcomeDialog(false);
        setSignUpDialog(true);
    }
}

return (
    <ImageBackground style={styles.background}
        source={require('../assets/welcome_background.jpg')}>
       
        {login}

        {signup}

        {welcome}
        
    </ImageBackground>
);
}

export default WelcomeScreen;