CODEWITHSUNDEEP
reactjsreact-native
Nelly Ngo
Nelly Ngo

Reputation: 51

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

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?

Upvotes: 5

Views: 1586

Answers (4)

Olena Horal
Olena Horal

Reputation: 1214

@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

Upvotes: 3

ダン クァン ミン
ダン クァン ミン

Reputation: 1

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

then import YourStyle from './YourStyle';

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

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)

Upvotes: 1

Moti Azu
Moti Azu

Reputation: 5442

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.

Upvotes: 1

Related Questions