React Native: all styles in the StyleSheet object were converted to type number after export

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 import import generalStyle from '@mainModule/styles'(I created a file package.jsonso this path works) And the console log looks like this:

Object {container: 10, basicInfo: 118}

Can anyone here help me?

Answer 1

@NellyNgo, , , , StyleSheet.create. , , , , . flatten , StyleSheet.create. :

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

StyleSheet.flatten(styles.prop)

node_modules/react-native/Libraries/StyleSheet/flattenStyle.js. , .

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

RN 0.41.2

Answer 2

StyleSheet.create , , , .

, , , 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)

Answer 4

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

then import YourStyle from './YourStyle';