11

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?

kit
  • 1,166
  • 5
  • 16
  • 23
Dávid Ďurika
  • 111
  • 1
  • 1
  • 5
  • Maybe you can ref to my answer in [onmouseenter event in react native](https://stackoverflow.com/a/66204539/6318705) – Li Zheng Feb 15 '21 at 08:14

4 Answers4

6

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

Johnny M. Salas
  • 61
  • 1
  • 5
  • 6
    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. – Adrian Moisa Feb 05 '20 at 10:44
4

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

boriaz50
  • 860
  • 4
  • 17
anonkey
  • 102
  • 4
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.

Sharcoux
  • 5,546
  • 7
  • 45
  • 78
-1

Try use TouchableHighlight.

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

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

Gabriel Arantes
  • 102
  • 2
  • 8