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;
}
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={(component) => { this.root = component }}
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 ]}
>