React navigation 6.x not passing props - reactjs

Question

I have the code as below, every time i try to pass parameter from Home Page to the Second Page i keep getting undefined, and i never got the props or anything.
This is my app.js file
import React from 'react';
import {
SafeAreaView,
StatusBar,
Text,
View,
} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Home from './App/screens/home';
import Second from './App/screens/second';
function HomeScreen() {
return (
<Home />
);
}
function OtherScreen() {
return (
<Second />
);
}
const Stack = createNativeStackNavigator();
const App = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Overview' }} />
<Stack.Screen
name="Second"
component={OtherScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaView>
);
};
export default App;
This is Home Page
import React, { useState } from 'react';
import {
Button,
Dimensions,
Platform,
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { useNavigation } from '#react-navigation/native';
const Home = () => {
const isDarkMode = useColorScheme() === 'dark';
const navigation = useNavigation();
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Second', { name: "John Doe" })}
/>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default Home;
This is the screen named "Second"
import React, { useEffect } from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
useColorScheme,
} from 'react-native';
import {
Colors,
Header,
} from 'react-native/Libraries/NewAppScreen';
import { useNavigation } from '#react-navigation/native';
const Second = ({ route }) => {
const isDarkMode = useColorScheme() === 'dark';
const navigation = useNavigation();
useEffect(() => {
console.log(route)
})
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default Second;
i have tried a lot of solutions before i post this question most of them is version 4.x or 5.x

Answer 1

You don't need to declare a function to return the screen, just assign to component directly:
const App = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ title: 'Overview' }} />
<Stack.Screen
name="Second"
component={Second}
/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaView>
);
};