Optimize heavy screens to prevent lags with React Navigation.
npm install react-navigation-heavy-screenOptimize 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.
🥳 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 ^_
`sh`
yarn add react-navigation-heavy-screen
Install peer dependencies:
`sh`
expo install react-native-reanimated
Delay rendering a component until interactions are complete, using InteractionManager. Then it fades in your screen.
---
- 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
`
`js
import { optimizeHeavyScreen } from 'react-navigation-heavy-screen'
export default optimizeHeavyScreen(Screen, OptionalPlaceHolderScreen, {
// default values
disableHoistStatics: false,
transition: (
),
})
`
- 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.
MIT