Tree Shaking

Every time you use React Navigation code, you can replace it with an empty function to use on Web.

This will avoid importing unused code on Web, and prevent unnecessary errors from not having a parent context.

In order to do so, we will re-export each module we use from the react-navigation package, and give it a no-op on Web.

Create a platform-specific module

Say you want to use useScrollToTop(). Create a file and re-export useScrollToTop from react-navigation for Native and give it a no-op on Web.

hooks/use-scroll-to-top.ts

tsx
export { useScrollToTop } from '@react-navigation/native'

tsx
export { useScrollToTop } from '@react-navigation/native'

Next, make the same file with a .web.ts extension:

hooks/use-scroll-to-top.web.ts

tsx
/**
 * @deprecated you are importing from the wrong file.
 */
export function useScrollToTop() {
  // no-op
}

tsx
/**
 * @deprecated you are importing from the wrong file.
 */
export function useScrollToTop() {
  // no-op
}

Next, replace your imports from @react-navigation/native with hooks/use-scroll-to-top:

tsx
import { useScrollToTop } from 'hooks/use-scroll-to-top'

tsx
import { useScrollToTop } from 'hooks/use-scroll-to-top'

Solito uses this approach under the hood, ensuring that code is all tree-shaken for the platform it's meant to run on.