React Native: All styles in StyleSheet object after exporting were converted to number type

Question

My style object: mainModule/styles.js

export default StyleSheet.create({
  container: {
    width: 0
  },
  basicInfo: {
    height: 167,
    backgroundColor: 'red,
    justifyContent: 'center',
    alignItems: 'center'
  }
}

When I importing import generalStyle from '@mainModule/styles' (I created a package.json file to make that path works) And the console log shows like this:

Object { container: 10, basicInfo: 118 }

Could anyone here can help me?

Answer 1

@NellyNgo, you probably trying to flatten the whole object that StyleSheet.create returns. I did the same and it was driving me crazy, because it seemed to work for everyone else but for me returned the same value that I've passed to it. Actually flatten will work for the separate property of the object that was created by StyleSheet.create. Like this:

const styles = StyleSheet.create({prop: {...}, prop2: {...})

and then you can do StyleSheet.flatten(styles.prop)

Check the code in node_modules/react-native/Libraries/StyleSheet/flattenStyle.js. that's the place where it failed for me.

 function getStyle(style) {
          if (typeof style === 'number') {
            return ReactNativePropRegistry.getByID(style);
          }
          return style;
     }

Check the whole source if interested

My RN version is 0.41.2

Answer 2

StyleSheet.create creates style ids that are cached in order to reduce the amount of data that goes through the bridge.

You can use them and they will work perfectly, but if you need to alter them after importing, you should export the style object without StyleSheet.create.

Answer 3

In styles.js:

const stylesObj = {
  container: {
    width: 0
  },
  basicInfo: {
    height: 167,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center'
  }
}

export default stylesObj

And in the component:

import stylesObj from 'styles'

const styles = StyleSheet.create(stylesObj)