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?

Answer 1

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