How to style nested elements in React Native Stylesheet?

In JSS for React, you can style elements within other elements like this:

nav: {
  fontSize: 24,
  display: 'flex',
  flexDirection: 'row',
  color: '#fff',
  marginTop: 24,
  marginLeft: 16,

  '& svg': {
    marginLeft: 12
  },
}

However, I tried this approach in React Native Stylesheets, and it was a syntax error.

I don't want to give every SVG in my navigation a style attribute, so is there a way to do something similar in React Native? Thanks

React Native's StyleSheet doesn't support nested selectors like & svg from JSS, because styles are scoped to each component and don't cascade. There's no concept of global styles or child selectors like in web CSS.

If you want to apply a consistent style to all SVGs in your navigation, one approach is to create a wrapper component like and apply the shared style inside it

As a child: <NavIcon><MySvgIcon /></NavIcon>

const NavIcon = ({ children }) => {
  return (
    <View style={{ marginLeft: 12 }}>
      {children}
    </View>
  );
};

Or as a prop: <NavIcon Icon={MySvgIcon} />

const NavIcon = ({ Icon }) => {
  return (
    <View style={{ marginLeft: 12 }}>
      <Icon />
    </View>
  );
};