IntialParams on a Tab Navigator Screen is undefined (react navigation v5)
Asked Answered
R

0

6

I'm trying to pass an initialParam prop to a TabNavigator screen. It is meant to be a login piece of local state, just doing a proof of concept. It works fine with the stack navigator screen, but the route.params on the tab screen is undefined. What am I doing wrong?

Also, I'm pretty sure this will have to change as far as state management goes, but I wanted to make sure I could simply change the state in the parent App and have it take effect. It works on the stack screen, meaning I can call setLoggedIn(true) and it will take me to the tab navigator. But I can't go back...

const Track = () => {
  return (
    <TrackStack.Navigator>
      <TrackStack.Screen
        name='TrackListScreen'
        component={TrackListScreen}
      />
      <TrackStack.Screen
        name='TrackDetailScreen'
        component={TrackDetailScreen}
      />
    </TrackStack.Navigator>
  );
};

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      {loggedIn ? //is logged in 
        (
          <MainTab.Navigator>
            <MainTab.Screen
              name='TrackCreateScreen'
              component={TrackCreateScreen}
              initialParams={{ setLoggedIn }}
            />
            <MainTab.Screen
              name='AccountScreen'
              component={AccountScreen}
            />
            <MainTab.Screen
              name='Track'
              component={Track}
            />
          </MainTab.Navigator>
        ) : (
          <LoginStack.Navigator>
            <LoginStack.Screen
              name='SignupScreen'
              component={SignupScreen}
              initialParams={{ setLoggedIn }}
            />
            <LoginStack.Screen
              name='SigninScreen'
              component={SigninScreen}
            />
          </LoginStack.Navigator>
        )}
    </NavigationContainer>
  );
};

export default App;
Rhodolite answered 25/3, 2020 at 2:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.