I'm reading the React Native docs / tutorial, and I'm wondering what the point of the StyleSheet.create
function is.
For example, the tutorial has the following code:
const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, });
But I don't understand the difference between that and:
const styles = { bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, };
Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).
React Native StyleSheet is a way of styling an application using JavaScript code, the main function of react native StyleSheet is concerned with styling and structuring of components in an application, all components of react native make use of a prop known as style, names and properties values work in a similar way as ...
If you wanted to get the styles out of the created styles object, you should have used the flatten method. The majority of the answers reference this flatten method and you could not access styles property as if it was a normal object. E.g. const styles = StyleSheet.
TL;DR Always use StyleSheet.create()
when you can.
The answer by Nico is correct, but there is more to it.
To summarize:
Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).
As you might know, sending the data across the bridge is a very costly operation that has significant impact on the performance of the application. So, using StyleSheet.create()
you reduce the strain on the bridge.
StyleSheet.create
does not add performance gains anymore.
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29265#issuecomment-430783289
quoting the github comment:
@alloy I understand what docs says, but can prove that code:
const myStyle: ViewStyle = { flex: 1 } export const FlexView: React.SFC = (props) => <View style={myStyle}>{props.children}</View>
has almost same performance (even slightly faster) compared to
const s = StyleSheet.create({ flex: { flex: 1 } }) export const FlexView: React.SFC = (props) => <View style={s.flex}>{props.children}</View>
because if you look at sources, you discover that latest chunk effectively extracted to this (see: https://github.com/facebook/react-native/blob/0.57-stable/Libraries/StyleSheet/StyleSheet.js#L373):
const s = { flex: { flex: 1 } } export const FlexView = (props) => <View style={s.flex}>{props.children}</View>
And yes, in previous versions of RN it was global registry of styles, but it was even more slow, because it never crossed bridge border actually (proof from 0.55 branch) 😀
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With