⚡️ 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

🥳 New component-based API! Use this if you only want to optimize certain content on your screen.

``jsx
import React from 'react'
import { OptimizedHeavyScreen } from 'react-navigation-heavy-screen'

const Screen = () => (
<>





)
`

You can also use the normal export usage. Use this if you want to optimize your whole screen.

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

const Screen = () => ...

export default optimizeHeavyScreen(Screen, OptionalPlaceHolderScreen)
`

Or you can require your heavy screen inline:

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

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

_Thanks to @Sebastien Lorber for this recommendation ^_

Installation

`sh
yarn add react-navigation-heavy-screen
`

Install peer dependencies:

`sh
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.

---

$3

- placeholder (optional) Non-heavy React component that renders in the meantime.
- transition: (optional) custom transition prop for Reanimated's Transitioning.View component. See react-native-reanimated docs and Transition examples.

`js
import React from 'react'
import { OptimizedHeavyScreen } from 'react-navigation-heavy-screen'

const Screen () => (



)

export default Screen
`

optimizeHeavyScreen(Screen, Placeholder, options)

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

export default optimizeHeavyScreen(Screen, OptionalPlaceHolderScreen, {
// default values
disableHoistStatics: false,
transition: (




),
})
`

$3

- 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