How to inherit style within StyleSheet.create in React Native (using destructuring syntax maybe)

Question

I want to reuse styles within StyleSheet.create's parameter object, how to do that?

See the code:

const styles = StyleSheet.create({
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    ...style1
  }
})

Originally, I want style2 to inherit all color and backgroundColor from style1, and expand 1 more property called width. So I did try the code above, but then it got an error "style1 is not declared". I realized the problem, so I replaced ...style1 with ...this.style1, the error went away, but it didn't work as I expected. I wondered why and tried running this snippet in javascript to test the behavior:

styles = {
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    inherit: this.style1
  }
}
console.log(styles.style2.inherit)

It pooped out the result undefined, which is not styles.style1. I realized the problem again and after replacing inherit: this.style1 with inherit: styles.style1, the javascript snippet works, but not in the React Native code.

I think until now, you understand what I want, so my question is how could I achieve that (reuse style code in React Native)? I think there would be many workarounds, so please give me as many as you can. Thank you.

Here is the list of syntaxes I did try but not get the expected result (or as my brain is not working well, I was wrong):

...style1
...this.style1
...styles.style1
...StyleSheet.style1
...StyleSheet.flatten(styles.style1)

I'm pretty new to React Native so if there's something wrong with my question, pardon me. — Loi Nguyen Huynh, Oct 02 '19 at 07:53

score 7 · Accepted Answer · edited Dec 20 '19 at 08:31

7

It's impossible to Self-references in object literals / initializers

Solution: 1

const baseStyle = {
  color: 'red',
  backgroundColor: 'white'
}

const styles = StyleSheet.create({
  style1: baseStyle,
  style2: {
    width: 100,
    ...baseStyle
  }
})

Solution 2 Use Styled Components to manage and reuse styles easily.

edited Dec 20 '19 at 08:31

Loi Nguyen Huynh

8,492
2
29
52

answered Oct 02 '19 at 08:01

Sakul Budhathoki

326
3
9

I'll take a look at `Styled Components` later. Thank you very much. – Loi Nguyen Huynh Oct 02 '19 at 08:13

score 0 · Answer 2 · answered Oct 02 '19 at 07:52

I know 1 workaround is to put the "reuseable" style1 object outside of StyleSheet.create:

const style1 = {
  color: "red",
  backgroundColor: "white"
}
const styles = StyleSheet.create({
  style2: {
    width: 100,
    ...style1
  }
})

Is there a better way? Because style1 can also be a style used by another element, I can't use <Element style={styles.style1}/> any more...

How to inherit style within StyleSheet.create in React Native (using destructuring syntax maybe)

2 Answers2