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 .

Answer 2

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

Answer 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.

Answer 4

Try use TouchableHighlight.

You can define the backgroundcolor when your button it's pressed or not!

Follow the guide onhttps://facebook.github.io/react-native/docs/touchablehighlight