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)

Answer 1

Years after I posted the question I and realized that self-referencing is actually possible with getter

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