Reaction Button

Reactions button like Facebook does.

Installation

Yarn:

yarn add @luu-truong/react-native-reaction-button

NPM:

npm install @luu-truong/react-native-reaction-button

Usage

import ReactionButton from '@luu-truong/react-native-reaction-button'

function Demo() {
  const [value, setValue] = React.useState(-1);

  function onChange(index: number) {
    setValue(value === index ? -1 : index);
  }

  const reactions = [
    {
      source: {
        url: '...'
      },
      title: 'Like'
    },
    {
      source: require('....'),
      title: 'Haha'
    }
  ];

  return <ReactionButton reactions={reactions} defaultIndex={0} value={value} onChange={onChange} />
}

Properties

| Name | Type | Required | Description | | --- | --- | --- | --- | | debug | boolean | no | Debug message. Default: false | | reactionSize | number | no | Render reaction image at size. Default: 40px | | reactions | ReactionItem[] | yes | List reactions | | value | number | yes | Selected reaction index. | | defaultIndex | number | no | Default reaction | | onChange | (index: number) => void | yes | Callback when a reaction pressed | | textProps | object | no | Props passed to button reaction text | | reactionSmallSize | number | no | Size to render reaction in button | | DefaultImage | (passedProps: any) => JSX.Element | no | Default image component to render reaction when value is unspecified | | reactionContainerStyle | object | no | Style apply to reactions popover container | | imageProps | {renderImage: (props) => JSX.Element} | no | | | style | ViewStyle | no | | | hitSlop | {top: number; left: number; right: number; bottom: number} | no | |

ReactionItem properties: | Name | Type | Required | Description | | --- | --- | --- | --- | | source | object | yes | Image object source | | title | string | yes | Reaction title |

React native support

| Version | react-native version | | --- | --- | | 1.x.x | 0.64.0+ |