You can argue it is not React's fault as usual, but this is how:

    <Button styles={[...]}
      onPress={() => setState('active')} />

    const styles = StyleSheet.create({
        active: { backgroundColor: 'purple' }
    })

progressing into:

    <Button styles={[...]}
      onPress={() => setState('active')}
      onHover={() => setState('hover')} />

    const styles = StyleSheet.create({
        active: { backgroundColor: 'purple' }
        hover: { backgroundColor: 'blue' }
    })

which is frictionless and 'clean', vs the alternative:

    const styles = StyleSheet.create({
      button: {
        '&:hover': { backgroundColor: 'blue' }
      }
    })

The states here doesn't make a lot of sense, but I think it illustrates the idioms involved and how you end up focused on JS. This is so common I bet most devs who entered the market using React will see absolutely no issue in that.

Another familiar case is not having direct control over a parent/child component's styles, only their state, making it impossible to do it with CSS. Not exposing `style` is very common in component libraries, and using CSS-in-JS means you can't easily target them with CSS selectors.