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)

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)

• javascript
• react-native
• ecmascript-6
• react-native-stylesheet

• I'm pretty new to React Native so if there's something wrong with my question, pardon me. – Loi Nguyen Huynh Commented Oct 2, 2019 at 7:53

4 Answers 4

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.

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...

a better way to reuse and pose stylesheet:

const baseStyles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderRadius: 10,
    flex: 1,
  },
});

export const styles = StyleSheet.create({
  container: baseStyles.container,
  card: {
    backgroundColor: "lightblue",
    ...baseStyles.container,
  },
});

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)