react-native-css-cascade

Finally, inheritable styles in React Native

React Native's docs say they don't support CSS-style inheritance because they think strong isolation is better. That's all good and fine, but for a React developer migrating to React Native, this violates the Principle of Least Surprise. React Native's styling system was specifically designed to mimic and behave like CSS, yet in their vainglorious hubris for some reason, React Native's designers decided to break CSS's long-established and understood model of inheritance.

So, swap these components in for React Native ones and get the same styles cascading through your React tree that you would expect in CSS.

Install

npm install --save react-native-css-cascade

Usage

import { View } from 'react-native-css-cascade'

export const Card = ({ selected, ...props }) => {
  const textColor = selected ? { color: 'green' } : { color: 'black' }
  // All <Text> nodes anywhere in the sub-tree
  // will inherit a color of green when this card is selected
  <View style={textColor} {...props} />
}

License

MIT © matthew-dean