cc: @mountiny
Background
In our project we have two ways of passing styles to components:
- Using global styles defined in styles.ts
- Inline styling (eg.
style={{width: 100}})
The following approach is fine according to the React Native documentation.
However, the implementation of StyleSheet.create on React Native and react-native-web differs. On React Native it basically does nothing and returns the same JS object it receives as argument. That’s why the docs say it’s fine to use plain JS objects. But on react-native-web it triggers CSS class compilation logic. Because of that some CSS props may not work as expected. One of the problematic props is pointerEvents, which is handled a bit differently while not passed via StyleSheet.create.
Another thing is that passing plain JS objects or inline styling on web is not very performant, thus we should use StyleSheet.create instead. This makes sure that react-native-web creates CSS classes that are attached to components.
Performance impact
The following measurements have been made on an example app, in order to focus only on the style performance.
Using StyleSheet.create reduces the render time by ~10% on web
What’s important to indicate, in the example app I didn’t have any complex logic, without any major computation, which means it’s almost pure component render.
Potential further improvements not to be prioritized now
Removing array passed to style can save ~3% of the render time
Also pretty interesting metric, but not so spectacular, even though on Android the difference could reach to 7%. However, because it would require some major refactor I think we could leave it for now. Especially because we don’t use an array in every place where style prop gets passed. This means that its impact can be smaller, and I would like to do some bigger measurements in App before committing.
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~021965063735657791708
- Upwork Job ID: 1965063735657791708
- Last Price Increase: 2025-09-08
Issue Owner
Current Issue Owner: @trjExpensify
cc: @mountiny
Background
In our project we have two ways of passing styles to components:
style={{width: 100}})The following approach is fine according to the React Native documentation.
However, the implementation of
StyleSheet.createon React Native andreact-native-webdiffers. On React Native it basically does nothing and returns the same JS object it receives as argument. That’s why the docs say it’s fine to use plain JS objects. But on react-native-web it triggers CSS class compilation logic. Because of that some CSS props may not work as expected. One of the problematic props ispointerEvents, which is handled a bit differently while not passed viaStyleSheet.create.Another thing is that passing plain JS objects or inline styling on web is not very performant, thus we should use
StyleSheet.createinstead. This makes sure thatreact-native-webcreates CSS classes that are attached to components.Performance impact
The following measurements have been made on an example app, in order to focus only on the
styleperformance.Using StyleSheet.create reduces the render time by ~10% on web
What’s important to indicate, in the example app I didn’t have any complex logic, without any major computation, which means it’s almost pure component render.
Potential further improvements not to be prioritized now
Removing array passed to style can save ~3% of the render time
Also pretty interesting metric, but not so spectacular, even though on Android the difference could reach to 7%. However, because it would require some major refactor I think we could leave it for now. Especially because we don’t use an array in every place where style prop gets passed. This means that its impact can be smaller, and I would like to do some bigger measurements in App before committing.
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @trjExpensify