⚡️ Speed up heavy React Native screens

Optimize heavy screens in React Native to prevent lags with React Navigation's stack.

This isn't actually specific to React Navigation, but I find myself using it there often.

Especially useful for screens that set up listeners, make network requests, etc.

Usage

import { optimizeHeavyScreen } from 'react-navigation-heavy-screen'

const Screen = () => ...

export default optimizeHeavyScreen(Screen, OptionalPlaceHolderScreen)

Or you can require your heavy screen inline:

import { optimizeHeavyScreen } from 'react-navigation-heavy-screen'

export default optimizeHeavyScreen(require('path/to/HeavyScreen'), OptionalPlaceHolderScreen)

Thanks to @Sebastien Lorber for this recommendation ^

Installation

yarn add react-navigation-heavy-screen

Install peer dependencies:

expo install react-native-reanimated

What does it do?

Delay rendering a component until interactions are complete, using InteractionManager. Then it fades in your screen.

---

optimizeHeavyScreen(Screen, Placeholder, options)

import { optimizeHeavyScreen } from 'react-navigation-heavy-screen'

export default optimizeHeavyScreen(Screen, OptionalPlaceHolderScreen, {
  // default values
  disableHoistStatics: false,
  transition: (
    <Transition.Together>
      <Transition.Change interpolation="easeInOut" />
      <Transition.In type="fade" />
    </Transition.Together>
  ),
})

Arguments

• Screen required Any React component whose render should be delayed until interactions are complete.
• Placeholder (optional) Non-heavy React component that renders in the meantime.
• options (optional) Dictionary with the following options:
  • disableHoistStatics: (optional) If true, the Screen's statics (like navigationOptions, etc.) will not be passed on. Default: false.
  • transition: (optional) custom transition prop for Reanimated's Transitioning.View component. See react-native-reanimated docs and Transition examples.

License

MIT