CODEWITHSUNDEEP
reactjsreact-native
Edgar
Edgar

Reputation: 931

React Native: Modular styling

foo.js (Code block from React Native boilerplate):

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

What is the best way to declare new styles from a different file bar.js?

1) Add a new property to styles?

//import styles from 'foo.js'

styles.forNewComponent = {
  fontSize: 30,
};

2) Or create new StyleSheet obj? 

const StylesforNewComponent = StyleSheet.create({
  fontSize: 30,
});

When using 1) method and console.log(styles); the output is:

Object {container: 3, welcome: 4, instructions: 5, forNewComponent: Object}

Why forNewComponent 's value is an object but other properties have ID am I doing it wrong? Will I have performance issues?

Upvotes: 0

Views: 107

Answers (1)

Serhii Baraniuk
Serhii Baraniuk

Reputation: 3375

Use StyleSheet.create instead plain object. Because StyleSheet creates something like cache.

static create(obj) - Creates a StyleSheet style reference from the given object.

And when you use StyleSheet - you will be warned if you do something wrong in styles

And good practice is 1 component = 1 stylesheet

Upvotes: 1

Related Questions