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+