Inheritance In React Native Style Sheets

Question

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?

Answer 1

Your first idea does not work because you are trying to use a style object defined inside the create function of StyleSheet for another style object defined within the same create function. You cannot access them inside the create function.

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