In reactjs I could just import styles from './styles.css' with a stylesheet containing .button, . button:hover, . button:active and it works.

Online converters turn this stylesheet into "button", "button_hover", "button_active" styles, but making a StyleSheet from those in react-native doesn't work.

How can I change element style on hover and active?

.button {
  background: #ff4931;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: all 200ms ease;
}

.button:hover {
  transition: all 100ms ease;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.button:active {
  transition: all 50ms ease;
  transform: scale(1.03);
  background: #e5432d;
}

In reactjs I could just import styles from './styles.css' with a stylesheet containing .button, . button:hover, . button:active and it works.

Online converters turn this stylesheet into "button", "button_hover", "button_active" styles, but making a StyleSheet from those in react-native doesn't work.

How can I change element style on hover and active?

.button {
  background: #ff4931;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: all 200ms ease;
}

.button:hover {
  transition: all 100ms ease;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.button:active {
  transition: all 50ms ease;
  transform: scale(1.03);
  background: #e5432d;
}

• javascript
• css
• react-native

1 Answer 1

This is how I've solved the problem for now, manually listening for the hover start and mousedown events:

import React from 'react'
import { View } from 'react-native'

class EventView extends React.Component {
  setStyles = (styles) => {
    this.root.setNativeProps({
      style: styles,
    })
  }

  state = {
    hover: false
  }

  render() {
    const { activeStyle, hoverStyle, style, onPressIn, onPressOut, ...passThrough } = this.props
    return (
      <View
        ref={(ponent) => { this.root = ponent }}
        onMouseEnter={
          () => {
            this.setStyles(hoverStyle)
            this.setState({ hover: true })
          }
        }
        onMouseLeave={
          () => {
            this.setStyles(style)
            this.setState({ hover: false })
          }
        }
        onStartShouldSetResponder={() => true}
        onResponderStart={
          () => {
            this.setStyles(activeStyle)
          }
        }
        onResponderRelease={
          () => {
            this.setStyles(this.state.hover ? hoverStyle : style)
          }
        }
        style={style}
        {...passThrough}
      />
    )
  }
}

export default EventView

Using the special view like this

const styles = StyleSheet.create({
  "button": {
    "background": "#ff4931",
    "boxShadow": "0 0 4px rgba(0, 0, 0, 0.3)",
    "transition": "all 200ms ease"
  },
  "button_hover": {
    "transition": "all 100ms ease",
    "transform": "scale(1.05)",
    "boxShadow": "0 0 8px rgba(0, 0, 0, 0.5)"
  },
  "button_active": {
    "transition": "all 50ms ease",
    "transform": "scale(1.03)",
    "background": "#e5432d"
  }
})

return (
  <EventView
    style={styles.button}
    hoverStyle={[ styles.button_hover, styles.button ]}
    activeStyle={[ styles.button_active, styles.button_hover, styles.button ]}
  >