React native navigation

React Native
1

Hi
I am new to react native and I have three radio button and three defined pages, and want the user when clicking on a button to check the state of the radio buttons when he presses the first button, go to screen one and when clicking the second button, go to screen two and so on , in the code, I imported myapp component into the app.js, but it does not work, another thing, does the <Button title=‘ok’ onpress={RadioGroupExample} color={‘red’} /> work

here is my code
import React, { useState } from ‘react’;
import { View, Text, Button } from ‘react-native’;
import { RadioButton } from ‘react-native-paper’;
import { TouchableOpacity} from ‘react-native’;
import myapp from “./myapp.js”;

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

//Screen One
const Screenone = () => {

const onPress = () => {
navigation.navigate(‘ScreenTwo’);
};

return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>

Hello From Screen One


);
};

//Screen Two
const ScreenTwo = () => {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
Screen Two

);
};

//Screen Three
const ScreenThree = () => {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
Screen Three

);
};

const App = () => {

const Stack = createStackNavigator();

return (

<Stack.Navigator>
<Stack.Screen name=“ScreenOne” component={Screenone} />
<Stack.Screen name=“ScreenTwo” component={ScreenTwo} />
<Stack.Screen name=“ScreenThree” component={ScreenThree} />
</Stack.Navigator>

);
};

function RadioGroupExample() {
const [selectedValue, setSelectedValue] = useState(‘option1’);

const handleRadioButtonPress = (value) => {
setSelectedValue(value);
// You can add your custom logic here based on the selected value
switch (value) {
case ‘option1’:
alert(“Raio button one selected”)

    break;
  case 'option2':
    alert("readio button two selected")
    
    break;
  case 'option3':
    alert("radio button three selected")
  
    break;
  default:
    break;
}

};

return (
<View style={{ justifyContent:‘center’,alignContent:‘center’, flex:1}}>
Choose an option:
<RadioButton.Group
onValueChange={(value) => handleRadioButtonPress(value)}
value={selectedValue}
>
<View style={{ flexDirection: ‘row’, alignItems: ‘center’ }}>

Option 1

<View style={{ flexDirection: ‘row’, alignItems: ‘center’ }}>

Option 2

<View style={{ flexDirection: ‘row’, alignItems: ‘center’ }}>

Option 3

</RadioButton.Group>
Selected Value: {selectedValue}

</View>

);
}

export default RadioGroupExample;
export {App};