Check if radio button is clicked to navigate to another page in react native

JavaScript
1

I am very new to react native. I want someone to edit the following code to add three radio buttons and a button, when I click on this button, check which radio button is clicked to navigate to one of the screens in the code. if radio button one is clicked go to screen one ,if radio button 2 is selected go to screen two and so on. I am good at javascript and I know react native is based on javascript, so I guess you will advice me to use SWITCH command, but I do not know ho use switch in react native. I followed some tutorial but the code I used produced error like “navigation does not exist” please help`, also do you recommend me some books that explain react native in detail, thank you very much

 here is my code
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';


import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

 //Screen One.
 const ScreenOne = props => {


 const onPress = () => {
 props.navigation.navigate('ScreenTwo');
 };

 return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity onPress={onPress}>
<Text>Hello From Screen One</Text>
</TouchableOpacity>
</View>
);
};


 //Screen Two. 
 const ScreenTwo = () => {
 return (
 <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
 <Text>Screen Two</Text>
  </View>
  );
  };


  //Screen Three. 
  const ScreenThree = () => {
  return (
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Screen Three</Text>
   </View>
  );
  };


  const App = () => {

  const Stack = createStackNavigator();

  return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="ScreenOne" component={ScreenOne} />
 <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
 <Stack.Screen name="ScreenThree" component={ScreenThree} />
 </Stack.Navigator>
 </NavigationContainer>
  );
  };

      export default App;
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.