A drop-in replacement Text component for React Native that removes overhead
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