How to call multiple screens on one page in React Native

Question

I have made a Home page in which there are three buttons in the header (like a tab navigator) I want something like on clicking each button a screen appears beneath the header, as shown in the image below:

Here's what I have tried:

constructor(props) {
    super(props);
    this.state = {
      initialstate: 0, //Setting initial state for screens
    };
  }
 render(){
        return(
            <View style={styles.container}>
      <TouchableOpacity  onPress={() => this.setState({ initialstate: 0})}>
      <Image source={require('../../assets/add.png')}
            resizeMode="contain"/>
      </TouchableOpacity>

      <TouchableOpacity  onPress={() => this.setState({ cardstate: 1})}>
      <Image source={require('../../assets/request.png')}
            resizeMode="contain"/>
      </TouchableOpacity>

      <TouchableOpacity  onPress={() => this.setState({ cardstate: 2})}>
      <Image source={require('../../assets/send.png')}
            resizeMode="contain"/>
      </TouchableOpacity>
 
      {this.state.initialstate == 0 ? ( <RequestComp/> ) : ( <TopUpComp/> )  } 
//Over Here when I use the Third Screen like " : <SendComp/> " it gives me JSX error says "EXPECTED }"
      </View>

you cannot use screen inside another screen for this u can use react-native-tab-view — ikmo, Aug 29 '20 at 11:02
what do you expect to have? Please give us a brief explanation. — U.A, Aug 29 '20 at 11:35
@UA_ Just like the above screen I've created a screen now I have made three buttons on Pressing each button a new screen appears i.e onPress TopUp button TopUp screen appears on the same home page.. I actually dont want to do this with Tabs — Talha Nadeem, Aug 29 '20 at 11:52

score 0 · Answer 1 · answered Aug 29 '20 at 14:57

Ciao, what you need seems more like a popup that appears from the bottom of the screen. I use react-native-popup-ui Toast component to do that.

Something like:

import { Root, Toast } from 'popup-ui'
...
<Root>
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
         onPress={() =>
            Toast.show({
               title: 'User created',
               text: 'Your user was successfully created, use the app now.',
               color: '#2ecc71'
            })
         }
      >
         <Text>Call Toast</Text>
      </TouchableOpacity>
    </View>
</Root>

And the result is:

Note: I have android and the Taost is overlapped by android navigation bar but on iOS you should see all the Toast component

score -1 · Answer 2 · edited Dec 28 '22 at 09:44

-1

you are using a ternary operator ( initial ? true : false ) which can work only for two components in your case.

edited Dec 28 '22 at 09:44

Yunnosch

26,130
9
42
54

answered Dec 26 '22 at 05:24

Ankit Raj

1
2

1

do you think that this is an answer according to [answer]? Then please [edit] to make that more obvious. Otherwise, e.g. if you agree that this is more of a "Me too", please delete the post. – Yunnosch Dec 26 '22 at 09:34

How to call multiple screens on one page in React Native

2 Answers2