Stylesheet.create incompatible return type

[badsyntax]

The problem

The return type of RNW StyleSheet.create is incompatible with RN StyleSheet.create. This causes problems in css libraries where RN is aliased to RNW via https://www.npmjs.com/package/babel-plugin-react-native-web.

RNW implementation:

react-native-web/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js

Lines 47 to 57 in 13f7b9e

	create(styles: Object): {| [key: string]: number |} {
	const result = {};
	Object.keys(styles).forEach((key) => {
	if (process.env.NODE_ENV !== 'production') {
	validate(key, styles);
	}
	const id = styles[key] && ReactNativePropRegistry.register(styles[key]);
	result[key] = id;
	});
	return result;
	},

RN implementation:

https://github.com/facebook/react-native/blob/36318b6776507ba31070f6c8a3493609238a1a98/Libraries/StyleSheet/StyleSheet.js#L359-L371

How to reproduce

// RNW
StyleSheet.create({
  foo: {
    color: 'blue'
  }
})
// results in: { foo: 89 }


// RN
StyleSheet.create({
  foo: {
    color: 'blue'
  }
})
// results in: { foo: { color: 'blue' } }

Simplified test case: Not sure if this is useful: https://codesandbox.io/s/async-bush-kfpgo?file=/src/App.js

Expected behavior

I expect the return type to match RN.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.17.0
• React (version): 16.14.0
• Browser: n/a

Additional context

• I believe this was changed in RN with this commit: facebook/react-native@a8e3c7f
• Number in @emotion/native does not work emotion-js/emotion#1543 (comment)

[necolas]

This has been discussed before and for now we keep the original RN return type as web optimisations are built around it

[badsyntax]

Okie doke. I took a quick look at the required changes and I agree it seems like high effort to refactor things to align with react-native, which is unfortunate.

Here's some related issues where this change was previously discussed:

• React Native Web Style should not return number id #1593
• StyleSheet.create return object #1466
• Style object created with object spread do not get applied on web #1259 (Possibly related, not sure)