Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29610

React native switch screen one component to another on button press

$
0
0

I am new in react native, making a basic app that will find no of cases of corona in every country so i have made 2 component both on separate file. how to switch from child to child component ?Now i want to switch between them when i click on a button using stack navigator

App.js

import 'react-native-gesture-handler';import React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import Splash from './scenes/splash';import Corona from './scenes/corona';const Stack = createStackNavigator();export default function App() {  return (<NavigationContainer><Stack.Navigator initialRouteName="Splash"><Stack.Screen name="Splash" component={Splash} /><Stack.Screen name="Corona" component={Corona} /></Stack.Navigator></NavigationContainer>  );}

splash.js

import React from 'react'import { StyleSheet, Text, View, Image, Button} from 'react-native';export default function splash({navigation}) {    return (<View style={styles.container}><Image                 source={require('../assets/corona.jpg')}                 resizeMode="cover" style={styles.img} /><Text style={styles.txt}>                    Track the current status {"\n"}                     of the COVID-19 and{"\n"}                    stay up to date.</Text><Text                 style={styles.btn}                onPress={() => this.props.navigation.navigate('Corona')}>Continue</Text></View>    )}      

corona.js (navigate to here)

import React from 'react'import { StyleSheet, Text, View, Image, Button} from 'react-native';export default function corona({navigation}) {    return (<div><View><Text>Hello next screen</Text></View></div>    )}

Viewing all articles
Browse latest Browse all 29610

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>