rn-interactive

Handle interactions with your components effectively across platforms

• Consistent API across desktop and touch devices
• DOM events handled by React
• Only 932 bytes gzipped

Installation

npm install rn-interactive

Usage example

import { Interactive } from 'rn-interactive';

function Button({ disabled = false }) {
  return (
    <Interactive disabled={disabled}>
      {({ isHovered, isFocused, isPressed }) => (
        <View
          accessibilityRole="button"
          accessible={!disabled}
          style={[
            styles.button,
            isHovered && styles.hovered,
            isFocused && styles.focused,
            isPressed && styles.pressed,
            disabled && styles.disabled,
          ]}
        >
          <Text>{title}</Text>
        </View>
      )}
    </Interactive>
  );
}

API

Interactive

Create an Interactive component

Props | Type | Description --- | --- | --- children | Element or Function | Element or callback providing the current state. disabled | boolean | Prevents the interaction when enabled. Default to false. onHoverIn | function | Callback when the element is hovered. onHoverOut | function | Callback when the element loses the hovered state. onPressIn | function | Callback when the element is pressed. onPressOut | function | Callback when the element loses the pressed state. onFocusIn | function | Callback when the element is focused. onFocusOut | function | Callback when the element loses the focused state.