A drop-in replacement Text component for React Native that removes overhead
source link: https://reactnativeexample.com/a-drop-in-replacement-text-component-for-react-native-that-removes-overhead/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK