State persistence

[benschac]

I'd like to achieve the same functionality as defined here with expo router:

https://reactnavigation.org/docs/state-persistence

Is there a straight forward way to implement it?

[wcastand]

[sergeymorkovkin]

Intention is good, but it doesn't even closely work as expected. I only want navigation to survive live reloads and play no animation when restoring initiaState. Unfortunately, this trivial scenario is not possible with Expo Router.

[genesy]

so for every edit i have to navigate back to the page i was editing manually?

[yulolimum]

I know this is not recommended 'n all, but I find this helpful for development. You can use the storage provider of your choice (I'm using mmkv) and probably fix the types a bit (i'm too lazy), but this works for me so far.

Notes:

• This does not initialize navigation with initialState, it merely applies past state after initialization. Not ideal behaviour, but good enough for dev. I couldn't find a way to achieve that.
• I use the useNavigationStatePersistence hook in the root _layout.tsx.
• My implementation might break the rule of hooks if your env changes dynamically, although hard to imagine why it would.
• The stripState function recursively cleans the root navigation state object from values that aren't required (e.g. i noticed the key property is generated with every refresh). This only keeps the index, routes, name, state keys. This can be extended to keep the params for example (i haven't needed this yet).

I'll keep updating this example as i run into issues or need more functionality. It's a start though.

import { Consts } from '@myapp/shared'
import { storage } from '@myapp/shared/src/utils/storage'
import type { NavigationState } from '@react-navigation/native'
import { useNavigationContainerRef, useRootNavigationState } from 'expo-router'
import { useEffect, useState } from 'react'

interface RootStateOrRoute {
  index?: number
  routes?: RootStateOrRoute[]
  name?: string
  state?: any
  [key: string]: any
}

function stripState(payload: RootStateOrRoute) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

  const { index, routes, name, state } = payload

  const strippedRoutes = routes
    ? routes.map((route: any) => stripState(route)).filter((route: RootStateOrRoute | undefined) => route !== undefined)
    : undefined

  const strippedState = state ? stripState(state) : undefined

  const strippedPayload: RootStateOrRoute = { index, routes: strippedRoutes, name, state: strippedState }

  return Object.keys(strippedPayload).length > 0 ? strippedPayload : undefined
}

export function useNavigationStatePersistence() {
  if (Consts.isDev) {
    const [isNavigationRehydrated, setIsNavigationRehydrated] = useState(false)

    const navRef = useNavigationContainerRef()
    const state = useRootNavigationState()

    useEffect(() => {
      if (!state) return

      if (isNavigationRehydrated) {
        storage.save('navigationState', state)
      }

      if (navRef.current?.isReady() && !isNavigationRehydrated) {
        const prevState = storage.load<RootStateOrRoute>('navigationState')

        if (!!prevState) {
          navRef.current?.resetRoot(stripState(prevState!) as NavigationState)
        }

        setIsNavigationRehydrated(true)
      }
    }, [state, isNavigationRehydrated])

    return isNavigationRehydrated
  }

  return true
}

[tonihm96]

I'm looking to implement the same functionality, since I'm migrating a project from react-navigation to expo-router, anyone got any updates on this?