this is structure of project. i want to operate it: when is press ReportButton, navigate to ReportScreen with post's title parameter(props)
this is stack of App.js
<NavigationContainer>
<Stack.Navigator initialRouteName="Main">
<Stack.Screen name="Main" component={MainScreen} />
<Stack.Screen name="Report" component={ReportScreen} />
</Stack.Navigator>
</NavigationContainer>
this is tap navigator of mainscreen
<Tab.Navigator initialRouteName="Home" tabBarOptions={{showIcon: true}}>
<Tab.Screen
name="Main"
options={{
tabBarLabel: 'main',
tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
tabBarColor: 'blue',
}}
component={MapScreen}
/>
<Tab.Screen
name="Feed"
options={{
tabBarLabel: 'feed',
tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
tabBarColor: 'blue',
}}
component={FeedScreen}
/>
<Tab.Screen
name="Setting"
options={{
tabBarLabel: 'setting',
tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
tabBarColor: 'blue',
}}
component={SettingScreen}
/>
</Tab.Navigator>
this is part of ReportButton to navigate
<TouchableOpacity
style={postModalStyles.listButton}
onPress={()=>{console.log(post.title); navigation.navigate('Report', { title: post.title
});}}>
<Text style={postModalStyles.text}>report</Text>
</TouchableOpacity>
this is part of ReportScreen
const ReportScreen = ({title}) => {
console.log(title);
return(
<View></View>
);
}
output of node.js console
LOG hello world //log of reportbutton 's post.title
LOG undefined //log of reportscreen's post.title
You are not passing props , when you do navigate , you pass 'params'
so you should do this in reportScreen :
const ReportScreen = ({ navigation, route }) => {
console.log(route.params?.title);
return(
<View></View>
);
}