React Native Animated Floating Reactions like Facebook

This tutorial explains how to create Animated Floating Reactions like Facebook in react native application. Floating emoji reactions are more popular in facebook live session, where you may have seen floating reaction in android activity screen.

You need to install animated floating reaction package :

Installation :

$ npm install --save react-native-animated-emoji

Once you have entered installation command, you will get message like this :

Animated Floating Reactions like Facebook :

Lets see the below simple example to create Animated Floating Reactions like Facebook in react native application.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Image, TouchableOpacity, Alert, Text, Button } from "react-native";
 import { AnimatedEmoji } from 'react-native-animated-emoji';

Step-4 : Create constructor in your App class with props parameter and Create super method with props parameter in constructor. In this example we are using state object to store emoji values and setting console.disableYellowBox = true, in order to disable the warning message.

defaultval = [] ;

    constructor(props) {
      super(props);

      // Disable warning message
      console.disableYellowBox = true;

      this.state = { emoji: this.defaultval};
    }

Step-5: create getRandomInt and showFloatingReaction function inside App class.

• getRandomInt  : This will generate random integer value.
• showFloatingReaction : This will create floating emoji animation effect, when user clicks on "Click Me" button.

getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
}

showFloatingReaction = () => {
      let emojiCount = this.state.emoji.length;
      let emojis = [...this.state.emoji,emojiCount+1];
      this.setState({emoji : emojis}, () => {
         console.log(this.state.emoji)
      });
};

Step-6 :  Implement render method and place below layout design inside the render block.

render() {

      let displayFloatingEmojiReaction = this.state.emoji.map(x => (
        <AnimatedEmoji
          index={'emoji.key'} // index to identity emoji component
          style={{ top: this.getRandomInt(200, 500) }} // start bottom position
          name={'sweat_smile'} // emoji name
          size={30} // font size
          duration={4000} // ms
          onAnimationCompleted={this.onAnimationCompleted} // completion handler
        />
      ));

      return (
        <View style={styles.container}>

          {displayFloatingEmojiReaction}

          <View style={{  position: 'absolute', width: '100%',  bottom:10, flex : 1,  alignItems: 'center', }}>
          <Button
            onPress={this.showFloatingReaction}
            title="Click Me"
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          />
          </View>

        </View>
      );
    }

Step-7 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to display Animated Floating Reactions like Facebook in react native application

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Image, TouchableOpacity, Alert, Text, Button } from "react-native";
 import { AnimatedEmoji } from 'react-native-animated-emoji';

 export default class App extends Component {

   defaultval = [1,2]


    constructor(props) {
      super(props);

      // Disable warning message
      console.disableYellowBox = true;

      this.state = { emoji: this.defaultval};
    }

    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    showFloatingReaction = () => {
      let emojiCount = this.state.emoji.length;
      let emojis = [...this.state.emoji,emojiCount+1];
      this.setState({emoji : emojis}, () => {
         console.log(this.state.emoji)
      });
    };

    render() {

      let displayFloatingEmojiReaction = this.state.emoji.map(x => (
        <AnimatedEmoji
          index={'emoji.key'} // index to identity emoji component
          style={{ top: this.getRandomInt(200, 500) }} // start bottom position
          name={'sweat_smile'} // emoji name
          size={30} // font size
          duration={4000} // ms
          onAnimationCompleted={this.onAnimationCompleted} // completion handler
        />
      ));

      return (
        <View style={styles.container}>

          {displayFloatingEmojiReaction}

          <View style={{  position: 'absolute', width: '100%',  bottom:10, flex : 1,  alignItems: 'center', }}>
          <Button
            onPress={this.showFloatingReaction}
            title="Click Me"
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          />
          </View>

        </View>
      );
    }
 }


 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Screenshot :

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Animated%20Floating%20Reactions%20like%20Facebook

This is all about React Native Animated Floating Reactions like Facebook. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.