React-Navigation screen cache component (wrap every screen with this to avoid re-creating new screens when react-navigation re-renders).

screen-component.tsx

import React from "react"
import { SafeAreaProvider } from "react-native-safe-area-context"

// Cache the wrapper component to avoid creating a new one every time a screen
// is created.
const componentsCache = new WeakMap<
  React.ComponentType<any>,
  React.ComponentType<any>
>()

export function getScreenComponent(
  getComponent: () => React.ComponentType<any>,
): () => React.ComponentType<any> {
  return () => {
    const Component = getComponent()
    const CachedComponent = componentsCache.get(Component)
    if (CachedComponent != null) {
      return CachedComponent
    }

    function ScreenComponent(props: any) {
      return (
        <SafeAreaProvider>
          <Component {...props} />
        </SafeAreaProvider>
      )
    }

    componentsCache.set(Component, ScreenComponent)

    return ScreenComponent
  }
}