CODEWITHSUNDEEP
cssreact-nativestylesheet
FabianoLothor
FabianoLothor

Reputation: 2977

StyleSheet - Extend Style Value in React Native

Exists some way to do something like this?

const styles = StyleSheet.create({
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  },
  mainColor: { color: '#FFFFFF' },
  usernameIcon: {
    {this.styles.mainColor} // <-- How import the style, instead does write the code - color: '#FFFFFF'?
  },
  usernameItem: {
    backgroundColor: '#FF8484',
    borderColor: '#FFFFFF',
    paddingTop: 7
  },
});

Add many classes in my components it's very verbose and I likely do something likes the code above.

Upvotes: 2

Views: 5804

Answers (2)

LeonHeart
LeonHeart

Reputation: 561

you can achieve it by doing this:

<View style={styles.mainFooterCont(noFooter)}>
  <Text> Testing </Text>
</View>

in your stylesheet doing this:

mainFooterCont: noFooter => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'flex-end',
   paddingBottom: noFooter ? 0 : 20,
   paddingTop: Metrics.ratio(noFooter ? 0 : 5),
   }),

Upvotes: 0

Roy Wang
Roy Wang

Reputation: 11260

There's no style inheritance syntax (like those of CSS preprocessors) in React Native.

But since it's all JS you can just do it with JS:

const MAIN_COLOR = 'white';

const someStyle = {
  padding: 5,
  margin: 5,
}

const styles = StyleSheet.create({
  usernameIcon: {
    color: MAIN_COLOR,
    ...someStyle,
  },
  generalStyle: {
    backgroundColor: 'white',
  }
})

// you can also combine styles in the component
// note that the latter style will override duplicated styles
<View style={[styles.usernameIcon, styles.generalStyle]} />

Upvotes: 8

Related Questions