⚡️ 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 React from 'react'
import { OptimizedHeavyScreen } from 'react-navigation-heavy-screen'
const Screen = () => (
<>
<NonExpensiveComponentHere />
<OptimizedHeavyScreen>
<MyHeavyComponentHere />
</OptimizedHeavyScreen>
</>
)
You can also use the normal export usage. Use this if you want to optimize your whole screen.
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.
<OptimizedHeavyScreen />
Props
placeholder
(optional) Non-heavy React component that renders in the meantime.transition
: (optional) custom transition prop for Reanimated'sTransitioning.View
component. Seereact-native-reanimated
docs and Transition examples.
import React from 'react'
import { OptimizedHeavyScreen } from 'react-navigation-heavy-screen'
const Screen () => (
<OptimizedHeavyScreen>
<YourHeavyComponent />
</OptimizedHeavyScreen>
)
export default 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:
License
MIT