react-native-fast-text

A faster version of the React Native Text component that removes (for the most part) unnecessary overhead.

Why?

The native Text implementation includes additional *onPress props:

  • onLongPress
  • onPress
  • onPressIn
  • onPressOut
  • disabled
  • pressReactOffset

It also includes a state variable called isHighlighted which causes unnecessary renders.

By removing this extra logic and going straight down into RCTText we have a much faster text component.

Read this Twitter thread by Nate

Here’s the Text implementation from React Native

Installation

Install the module. Use it however you’d like.

There’s a codmod in here that will convert all of your import { Text } from 'react-native to use import { Text } from 'react-native-fast-text.

npx jscodeshift -t node_modules/react-native-fast-text/codemods/transform-to-fast-text.js

Then when the time comes, you can also run a codemod to remove react-native-fast-text

npx jscodeshift -t node_modules/react-native-fast-text/codemods/transform-from-fast-text.js

Thanks

All I did was create the package. The brains behind this is Nate from Tamagui (@natebirdman). Tamagui is an incredible cross platform library.

@FernandoTheRojo also had an awesome thread breaking down why this is happening

GitHub

View Github