While building my app in react-native, I encountered some issues with setting up the navigation. I referred to the react-native documentation for guidance, specifically this navigation guide. The guide mentioned passing an object named "navigation" to your components, like so:
const HomeScreen = ({navigation}) => {
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
};
However, I found that it didn't explain what exactly this "navigation" object was. I assumed it had something to do with creating a stack, similar to my navigation setup below:
const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Login'>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Schedule" component={ScheduleBody} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default Navigation;
In my implementation, I also passed the "navigation" object to my pages where needed, as shown below:
const Header = ({navigation}) => {
const [hasWorkout, setHasWorkout] = React.useState(false);
useEffect(() => {
setHasWorkout(false);
}, []);
const toggleActiveWorkout = () => {
setHasWorkout(!hasWorkout);
};
const handleCalendar = () => {
navigation.navigate('Schedule');
};
// Rest of the code...
};
After setting up my navigation, I integrated it into my app.tsx file like this:
const Stack = createNativeStackNavigator();
const App = () => {
const [loggedIn, setLoggedIn] = React.useState(false);
const checkLoggedIn = async () => {
const user = await AsyncStorage.getItem('user');
if (user) {
setLoggedIn(true);
}
};
useEffect(() => {
checkLoggedIn();
}, []);
return (
<NavigationContainer>
<View style={styles.container}>
<Header navigation={Stack}/>
<ScrollView>
{loggedIn ? <Body /> : <Login />}
</ScrollView>
<Footer navigation={Stack} />
</View>
</NavigationContainer>
);
};
Despite my efforts, I kept encountering the error message:
Binding element 'navigation' implicitly has an 'any' type.