Inheritance In React Native Style Sheets-CodePudding

So in a regular cascading style sheet we can inherit from other styles doing so:

.myStyle .temp {
   height: 100px,
   width: 80px,
}

My question is:

is there a way for me to do this in react native. I have tried a few different ways but cannot seem to get it to work. Some of the methods in which I have tried are as follows:

// Example One
// Error Thrown: tempStyle is not defined.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...tempStyle,
  },
  tempStyle :{
    backgroundColor: 'tomato'
  }
});

The following also did not work for me, it did not throw any errors but simply did not work.

I set the style to be the tempStyle and it was basically a blank style sheet which does make sense as it probably points to nothing.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tempStyle :{
    container :{
    backgroundColor: 'tomato'
  }
  }
});

I know that we can reference multiple styles inside of the style property in a component using brackets.

<View style={[Styles.temp, Styles.tempTwo]} />

Is this the only way to accomplish this?

CodePudding user response：

you can use the array notation:

<View style={[styles.container, styles.tempStyle]} />

CodePudding user response：

Your first idea does not work because you are trying to use a style object which will be created by StyleSheet.create. You cannot access them.

However, you could define your styles in a plain JS object and then use the spread syntax in order to achieve pretty much the same thing.

Notice that a style is just a JS object after all.

Let us call this file styles.js.

// helper, keep local
const tempStyle = {
    backgroundColor: 'tomato'
}

// we only want to use this style
// spread syntax works here
export const container = {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...tempStyle,
}

export SomeOtherStyle = {
    ...tempStyle,
}

Then, we can use the above styles as usual.

import { container, SomeOtherStyle } from './styles.js'

...

<View style={[container, someOtherStyle]}></View>

Notice that we can make use of typescript here as well (if you are using it in your project).

// helper, keep local
const tempStyle: ViewStyle = {
    backgroundColor: 'tomato'
}

// we only want to use this style
// spread syntax works here
export const container: ViewStyle = {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...tempStyle,
}

export SomeOtherStyle: ViewStyle = {
    ...tempStyle,
}

Using typescript, you will have autocompletion and typechecking for your styles. Notice as well that there might be different styles for different types of components (e.g. TextStyle).