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
– Loi Nguyen Huynh, Commented Oct 2, 2019 at 7:53

Loi Nguyen Huynh · Accepted Answer · 2019-12-20 08:31:23Z

9

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, 2019 at 8:31

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

answered Oct 2, 2019 at 8:01

Sakul Budhathoki

3663 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Loi Nguyen Huynh Over a year ago

I'll take a look at Styled Components later. Thank you very much.

Loi Nguyen Huynh · Accepted Answer · 2019-10-02 07:52:37Z

0

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

answered Oct 2, 2019 at 7:52

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

Comments

pill sam · Accepted Answer · 2024-03-04 09:02:15Z

0

a better way to reuse and compose 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,
  },
});

answered Mar 4, 2024 at 9:02

pill sam

314 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Loi Nguyen Huynh · Accepted Answer · 2024-04-05 12:16:19Z

0

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)

answered Apr 5, 2024 at 12:16

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related