CSS Variables for React Native

[natew]

Introduction

CSS Variables are a nice way to have basically generic values that can be set contextually for any part of a sub-tree. When they change, they change the value of a style without re-rendering the rest of the tree.

This change could bring about huge quality of life and performance benefits for React Native, and would align it closer to the web.

Details

The basic idea would be something like this:

import { View } from 'react-native'

export default () => (
  <View style={{ '--variableName': 'red' }}>
    <View style={{ backgroundColor: 'var(--variableName)' }} />
  </View>
) 

This would set the variableName variable in the parent container to red, and then below it would use it. I've purposefully made this syntax as close to CSS as possible to align with the web, for familiarity.

Of course it could also work through StyleSheet.create().

Discussion points

This solves some things quite a bit more elegantly I think than something like DynamicColorIOS, because it allow for more than just light and dark. For example, Tamagui themes are quite a bit more powerful than just light and dark and can support things like light_red, or light_red_Button. The power of CSS variables means this just works, so I'd love that same power on Native.