styled components :hover with react-native and react-native-web

Question

I'm using styled-components in React-Native App. Let's say I have link component:

import styled from 'styled-components/native';

const Link = styled.Text`
  color: 'red';

  &:hover {
    color: 'blue';
  }
`

After that, I 'compile' my React-Native code with react-native-web.

All is great expect that hover is not working. (Text color remains red on hover.)

My guess is that https://github.com/styled-components/css-to-react-native is removing the hover definition.

Any idea how to fix this?

Solution 1

For native mobile development hover doesn't have a definition, that's because there is no cursor on the screen like there is on desktop devices. As React Native for web simulates how RN works, the :hover selector loose its sense

Solution 2

You can use onMouseEnter and onMouseLeave like in the refs section of styled-components. Advanced guide.

Solution 3

You can use rn-css that works like styled-components but with better support for css in React-Native.

Just replace import styled from 'styled-components/native'; with import styled from 'rn-css'; and your code will work.

Comments

[ValRob]

but that is onPress event. not hover event.

[Adrian Moisa]

Probably 0.01% of the users tried this... you can have a mouse device connected to your phone or tablet. A pointer will show up like in traditional deckstops.