Dynamically select the initial route name in react-navigate - react-native

Question

My app will have 4 main pages: A, B, C and Homepage
Before showing the Homepage the user will need to go through A, B and C (sequentially, using react-navigation) to collect some information. I will store the information in the device using expo-secure-store.
If the user completed all the steps, the next time the app will start I want to show directly the Homepage screen.
Considering that SecureStore.getItemAsync is async, I'm not able to query it when I'm starting my app:
const Stack = createStackNavigator();
export default function App() {
const data = await SecureStore.getItemAsync("pincode");
var firstScreen = data ? "Homepage" : "A";
/* alt solution - not working
SecureStore.getItemAsync("data").then((data) => {
firstScreen = data ? "Homepage" : "A";
});
*/
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={firstScreen}>
<Stack.Screen name="A" component={AScreen} />
<Stack.Screen name="B" component={BScreen} />
<Stack.Screen name="C" component={CScreen} />
<Stack.Screen name="Homepage" component={HomepageScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
If I use await I get Unexpected reserved word 'await', while if I do it in an async way, the firstScreen value will be of course set to late.

Answer 1

You want to put any State (so your firstScreen into react State with useState.
You want (for your 'problem') to initalise the state when the component is mounted. We useEffect with an open dep's array to handle that. As the state is held in SecureStore which we retrieve with an Async call I've written a function that will use Async/Await to retrieve this and populate the state when it is done.
As suggested above, you might want to show some form of Loading process so that users are not shown a page that is not ready yet!
Something like (BTW - you may want to lift this into a navigation component to keep your App component simple!):
const Stack = createStackNavigator();
export default function App() {
const [firstScreen, setFirstScreen] = useState('');
const [loading, setLoading] = useState(true);
useEffect(() => {
SecureStore.getItemAsync("pincode").then(
(data) => {
setFirstScreen(data? 'Homepage' : 'A');
setLoading(false);
}
).catch((err) => {
setLoading(false);
setFirstScreen('A');
});
}, []);
if (loading) {
return null; //Or something to show that you are still warming up!
}
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={firstScreen}>
<Stack.Screen name="A" component={AScreen} />
<Stack.Screen name="B" component={BScreen} />
<Stack.Screen name="C" component={CScreen} />
<Stack.Screen name="Homepage" component={HomepageScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}