Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nandorojo/react-navigation-heavy-screen
⚡️Optimize heavy screens to prevent lags during React Navigation transitions.
https://github.com/nandorojo/react-navigation-heavy-screen
Last synced: 1 day ago
JSON representation
⚡️Optimize heavy screens to prevent lags during React Navigation transitions.
- Host: GitHub
- URL: https://github.com/nandorojo/react-navigation-heavy-screen
- Owner: nandorojo
- License: mit
- Created: 2020-04-13T19:00:31.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-29T18:10:59.000Z (over 1 year ago)
- Last Synced: 2025-02-12T21:08:41.281Z (9 days ago)
- Language: TypeScript
- Homepage:
- Size: 3.77 MB
- Stars: 374
- Watchers: 5
- Forks: 16
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚡️ 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](https://twitter.com/sebastienlorber/status/1250113509880401933) 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.
---
## ``
### Props
- `placeholder` (optional) Non-heavy React component that renders in the meantime.
- Extends `Animated.View` props [docs](https://software-mansion.github.io/react-native-reanimated). So you can pass any props you need to customize the animation. eg: `{ entering: { FadeIn } }`
```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,
})
```
### 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`.
- Extends `Animated.View` props [docs](https://software-mansion.github.io/react-native-reanimated). So you can pass any props you need to customize the animation. eg: `{ entering: { FadeIn } }`
## License
MIT