How does React Natives Stylesheet.create work? - reactjs

Question

Here is the code for the create method.
create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
// TODO: This should return S as the return type. But first,
// we need to codemod all the callsites that are typing this
// return value as a number (even though it was opaque).
if (__DEV__) {
for (const key in obj) {
if (obj[key]) {
Object.freeze(obj[key]);
}
}
}
return obj;
},
How does this function work and what does the <+ operator do?

Answer 1

create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
Defines a function called create that has a parameter called obj. It is type annotated, using Flow with the following meaning:
The parameter obj is type S as denoted by obj: S
Where S is of type or a subtype of ____Styles_Internal as denoted by <+S: ____Styles_Internal>. + is a variance sigil signifying covariant types are accepted (types which are a subtype, along with the type itself)
The return type is a readonly version of obj as denoted by $ReadOnly<S>
if (__DEV__) {
for (const key in obj) {
if (obj[key]) {
Object.freeze(obj[key]);
}
}
}
for...in iterates over enumerable properties and if the value of the property is truthy, the value is frozen by Object.freeze. The value would normally be an object (see examples from React Native's documentation on stylesheet) so freezing it would prevent the object from being changed. These things only happen when the __DEV__
variable is true, which signifies the code is running in a development environment.
I did not author the code, so I can only speculate why it behaves like this:
This behaviour only occurs in development potentially because it could break production apps, based on the commit message from the author of code:
I don't really know if we have/need any safer way of rolling this out than just landing it. It can break if the object passed to StyleSheet.create is mutated afterwards but that isn't a practice anywhere I've seen.
I don't know why the test for whether to freeze or not is truthiness.
I'm not certain why the objects need freezing but I suspect it's to remove unintended side effects from mutating style objects as React likely compares style objects between renders by reference.
return obj;
},
Returns the object.
Further reading
Covariance and contravariance
Subtyping