• Stars
    star
    320
  • Rank 131,126 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⚡️Optimize heavy screens to prevent lags during React Navigation transitions.

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

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's Transitioning.View component. See react-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:
    • 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

More Repositories

1

moti

🐼 The React Native (+ Web) animation library, powered by Reanimated 3.
TypeScript
3,956
star
2

solito

🧍‍♂️ React Native + Next.js, unified.
TypeScript
3,426
star
3

dripsy

🍷 Responsive, unstyled UI primitives for React Native + Web.
TypeScript
1,918
star
4

zeego

Menus for React (Native) done right.
TypeScript
1,520
star
5

burnt

Crunchy toasts for React Native. 🍞
Java
1,140
star
6

swr-firestore

Implement Vercel's useSWR for querying Firestore in React/React Native/Expo apps. 👩‍🚒🔥
TypeScript
763
star
7

expo-next-react-navigation

⛴ Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.
TypeScript
388
star
8

react-native-anchors

🦅 Anchor links and scroll-to utilities for React Native (+ Web)
JavaScript
299
star
9

swr-react-native

React Native/React Navigation compatibility for Vercel's useSWR hook. 🐮
TypeScript
285
star
10

galeria

The React (Native) Image Viewer. 📷
TypeScript
169
star
11

expo-next-monorepo

💸 Expo + Next.js monorepo starter.
JavaScript
114
star
12

expo-spotify-party

🎹 Listen to Spotify with your friends in real-time. (React Native Expo + Next.js)
TypeScript
88
star
13

nextjs-conf-22-example

Example repository for the 2022 Next.js Conf about React Native.
TypeScript
67
star
14

react-native-iconic

🎨 Iconic icons for React Native (+Web)
TypeScript
65
star
15

react-native-heroicons

Hero Icons for React Native. 🫡
TypeScript
64
star
16

zero-to-10m

Resources from my talk at Next.js Conf: "Zero to $10 Million with React Native + Next.js"
57
star
17

expo-firestore-offline-persistence

❄️ Enable Firestore offline persistence in Expo apps without detaching.
JavaScript
51
star
18

tamagui-intellisense

VSCode Plugin for Tamagui
JavaScript
41
star
19

sf-symbols-typescript

TypeScript types for iOS SF Symbols 🍏
TypeScript
36
star
20

doorman

🚪Doorman is a full-stack phone authentication solution for Expo + Firebase auth.
TypeScript
29
star
21

reanimated-tree-shaking

A Next.js playground to test Reanimated bundle size.
TypeScript
24
star
22

sticky

Implement position: sticky in React Native
TypeScript
15
star
23

ts-monorepo-autoimport-guide

A guide for making VSCode's autoimport work in a monorepo.
12
star
24

expo-gatsby-navigation

🤵Make Gatsby and React Navigation play nicely together with an Expo/React Native Web app.
TypeScript
12
star
25

tgui

TypeScript
11
star
26

react-native-2030

The implementation of my App.js Conf talk, "React Native 2030"
11
star
27

fuego

🔥Firebase Firestore hooks & components for React Native/React.
TypeScript
10
star
28

shared-animations

🕺A global state manager for React Native animations.
JavaScript
10
star
29

expo-electron-copy-magic

Copy clip sucks, so this is a better one made with Expo + Electron.
TypeScript
10
star
30

lint-expo

🐠 A mini script that configures prettier and eslint for React/Expo projects.
JavaScript
9
star
31

tamagui-starter

Starter project for issue reproductions on CodeSandbox
TypeScript
8
star
32

doorman-examples

🥳A repository of example apps for Doorman (Expo + Firebase phone auth)
TypeScript
8
star
33

solito-test

TypeScript
6
star
34

react-doorman

React Core library for Doorman's Firebase Auth, without the RN dependencies. 👾Meant for use in Gatsby/other React apps.
TypeScript
4
star
35

expo-eas-semantic-release

git push → automated Expo EAS builds, over-the-air updates, & prerelease versions.
JavaScript
4
star
36

lexical-ios-react-native

Just an experiment with Expo Modules
Swift
4
star
37

expo-starter-project

eslint, src folder, etc
TypeScript
3
star
38

panda

🐼 Design websites in seconds. Export clean code. (PRE-ALPHA)
JavaScript
3
star
39

expo-navigation-core

Package with reusable expo web navigation hooks / components.
TypeScript
2
star
40

lint-react-native-app

🤓 Simple command to add ESLint and Prettier to a react-native project.
TypeScript
2
star
41

thet

TypeScript
2
star
42

animateMePlz

⚡️ A lightweight jQuery extension for scrolling animations.
HTML
2
star
43

expo-router-bug

TypeScript
1
star
44

nandorojo

1
star
45

plaid-bug-repro

Repro for https://github.com/plaid/react-native-plaid-link-sdk/issues/436
Objective-C
1
star
46

expo-next-issue

⚡️React-native-paper issue with expo / next.
JavaScript
1
star
47

react-native-bootstrap

React-bootstrap, remade for React Native (& React Native For Web).
TypeScript
1
star
48

reanimated-next13-issue

Reanimated isn't working with Next.js 13.
JavaScript
1
star
49

react-native-beacons-example

Repo for react-native-beacons
TypeScript
1
star
50

react-spring-next-issue

Reproducible repo for this issue: https://github.com/react-spring/react-spring/issues/627#issuecomment-541235141
TypeScript
1
star
51

next-style-issue

Issue: prop did not match, server: x, client: y for issue: https://github.com/vercel/next.js/discussions/14469
TypeScript
1
star
52

writing-javascript-actions

1
star
53

eslint-config-nando

Stress-free react native linting. 🏋🏻‍♂️
JavaScript
1
star
54

Penn-Requirement-Counter

🤓 Find courses that count for one or more requirements at UPenn.
JavaScript
1
star
55

expo-web-img-picker-bug

SDK 41 image picker not working on web.
JavaScript
1
star
56

expo-next-webpack5-issue

Reproduction of Webpack 5 not working with Expo in a Next.js app
JavaScript
1
star