React Navigation 5 аутентифицирует поток с MST, а не "переключением"

Question

Итак, я только что обновил проект ignite-bowser до их 5.0 шаблона , который включает в себя React Navigation 5, что требует изменения устаревшего рекомендуемого метода использования SwitchNavigator для переключения между StackNavigators 'Auth' и 'App', к новому декларативному подходу потока аутентификации , который делает избыточным SwitchNavigator.

FYI, проекты Ignite Bowser по сути, React Native шаблонные приложения, поддерживаемые

React Native
React Navigation
MobX State Tree
TypeScript
Reactotron
And more!

Так что все это кажется достаточно простым, но я не смог заставить переключаться настоящие навигаторы при использовании логического значения, хранящегося в одном из магазинов приложений, и установить true в действии, вызванном в методе аутентификации.

В соответствии с журналами сервера и фидом Reactotron аутентификация работает нормально. После перезагрузки приложения визуализируется навигатор приложений, но на самом деле сеанс недопустим, поскольку память была очищена. Все последующие запросы не выполняются, но приложение не переключается на навигатор Auth.

Вот соответствующие фрагменты кода:

root -navigator.tsx

const RootStack = () => {
  const { pbidStore } = useStores()

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        stackPresentation: "modal",
      }}
    >
      {pbidStore.isAuthenticated ? (
        <Stack.Screen
          name="pbidStack"
          component={PbidNavigator}
          options={{
            headerShown: false,
          }}
        />
      ) : (
        <Stack.Screen
          name="authStack"
          component={AuthNavigator}
          options={{
            headerShown: false,
          }}
        />
      )}

    </Stack.Navigator>

/**
 * PbidStore Model
 */
 export const PbidStoreModel = types.model("PbidStore").props({
   ....

   isAuthenticated: types.optional(types.boolean, false),
 })
 .actions(self => ({
   setStatus(value?:  "idle" | "pending" | "done" | "error") {
     self.status = value
   },
   setAuthToken(token: string) {
     self.environment.pbidApi.setAuthToken(token)
   },
   setAuthenticated(value: boolean) {
     self.isAuthenticated = value
   },
   ...
 }))
 .actions(self => ({
   authenticate: flow(function*(email: string, password: string, remember: boolean) {
     self.setStatus("pending")
     try {
       const result = yield self.environment.pbidApi.authenticate(email, password)
       if (result.kind === "ok") {
         self.setAuthToken(result.token)
         self.setStatus("done")
         self.setAuthenticated(true)
         self.loadUser()
         if(remember)
           yield self.storeCredentials(email, password)
       } else {
         self.setStatus("error")
         self.setAuthenticated(false)
       }
     } catch {
       self.setStatus("error")
       self.setAuthenticated(false)
     }
   }),
...

Answer 1

После того, как я написал этот вопрос и начал выбирать теги SO, и мне пришлось принять решение об использовании mobx-react против mobx-react-lite или обоих, я вспомнил проблемы, с которыми я столкнулся во время последнего обновления, которое я прошел, который переключал между этими двумя и использованием inject и observer.

Так что я понял, что, возможно, мой навигатор должен был быть видимым ...

Импорт mobx-react-lite и упаковка RootStack в следующее исправило все для меня.

const RootStack = observer(() => {

Надеюсь, это поможет спасти кому-то еще головную боль.

В целом, я доволен тем, что все эти недавние изменения в react-native с хуками и FunctionalComponents, и что это сделало с ассоциированными библиотеками и, в конечном счете, с моей кодовой базой, но ууууууууать, утомительно ли это необходимость постоянно изучать новые API и заново основывать свои проекты еще до их завершения!