Animated emoji reaction

Author: atoami

.DS_Store

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+.idea/

.gitignore

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 David Bala
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

LICENSE

@@ -0,0 +1,34 @@
+# react-native-animated-emoji
+Animated Floating Reactions like Facebook
+
+### Installation
+
+```sh
+$ npm install --save react-native-animated-emoji
+```
+or
+
+```sh
+yarn add react-native-animated-emoji
+```
+
+### Usage
+
+```javascript
+import { AnimatedEmoji } from 'react-native-animated-emoji';
+
+export const App = () => (
+  <AnimatedEmoji
+    key={emoji.key}
+    index={emoji.key}
+    ref={ref => this._emojis[emoji.key] = ref}
+    style={{ bottom: emoji.yPosition }}
+    name={emoji.name}
+    size={emoji.size}
+    duration={emoji.duration}
+    onAnimationCompleted={this.onAnimationCompleted}
+  />
+)
+```
+### Animated Floating Reactions
+![emoji]()

README.md

@@ -0,0 +1 @@
+export { AnimatedEmoji } from './lib';

index.js

@@ -0,0 +1,218 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ * @flow
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Animated,
+  StyleSheet,
+  Dimensions,
+  Text
+} from 'react-native';
+
+import Emoji from './Emoji';
+
+const ANIMATION_END_X = Dimensions.get('window').width;
+const NEGATIVE_END_X = ANIMATION_END_X * -1;
+
+export class AnimatedEmoji extends Component<{}> {
+
+  /**
+   * PropTypes Definition
+   */
+  static propTypes = {
+    style: PropTypes.any,
+    name: PropTypes.string.isRequired,
+    onAnimationCompleted: PropTypes.func,
+    index: PropTypes.number.isRequired,
+  };
+
+  static defaultProps = {
+    style: [],
+    onAnimationCompleted: () => {}
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      position: new Animated.Value(ANIMATION_END_X),
+      isAnimationStarted: false
+    };
+  }
+
+  getRandomInt = (max) => {
+    return Math.floor(Math.random() * Math.floor(max));
+  };
+
+  /**
+   * Function to generate input range
+   * @param start
+   * @param end
+   * @param count
+   * @returns {Array}
+   */
+  generateInputRanges = (start, end, count) => {
+    const length = start - end;
+    const segment = length / (count - 1);
+    const results = [];
+    results.push(start);
+    for (let i = count - 2; i > 0; i--) {
+      results.push(end + segment * i);
+    }
+    results.push(end);
+    return results;
+  };
+
+  /**
+   * Function to generate scale output range
+   * @param count
+   * @returns {Array}
+   */
+  generateYOutputRange = (count) => {
+    const results = [];
+    for (let i = 0; i < count; i++) {
+      results.push(Math.random() * 50);
+    }
+    return results;
+  };
+
+  /**
+   * Function to generate scale output range
+   * @param count
+   * @returns {Array}
+   */
+  generateScaleOutputRange = (count) => {
+    const results = [];
+    for (let i = 0; i < count; i++) {
+      results.push(Math.random() + 1);
+    }
+    return results;
+  };
+
+  /**
+   * Function to generate a path
+   */
+  generateAnimation = () => {
+    /**
+     * Position X
+     */
+    this._xAnimation = this.state.position.interpolate({
+      inputRange: [NEGATIVE_END_X, 0],
+      outputRange: [ANIMATION_END_X, 0]
+    });
+
+    /**
+     * Position Y
+     */
+    let randomSize = this.getRandomInt(3) + 3;
+    const inputRangeY = this.generateInputRanges(NEGATIVE_END_X, 0, randomSize);
+
+    this._yAnimation = this._xAnimation.interpolate({
+      inputRange: inputRangeY,
+      outputRange: this.generateYOutputRange(randomSize)
+    });
+
+    /**
+     * Scale
+     */
+    randomSize = this.getRandomInt(2) + 2;
+    const inputRangeScale = this.generateInputRanges(NEGATIVE_END_X, 0, randomSize);
+
+    this._scaleAnimation = this._xAnimation.interpolate({
+      inputRange: inputRangeScale,
+      outputRange: this.generateScaleOutputRange(randomSize),
+      extrapolate: 'clamp'
+    });
+
+    /**
+     * Opacity
+     */
+    this._opacityAnimation = this._xAnimation.interpolate({
+      inputRange: [NEGATIVE_END_X, NEGATIVE_END_X/4*3, NEGATIVE_END_X/4*2, NEGATIVE_END_X/4, 0],
+      outputRange: [1, 1, 1, 0.8, 0.0]
+    });
+
+    /**
+     * Rotate
+     */
+    this._rotateAnimation = this._xAnimation.interpolate({
+      inputRange: [NEGATIVE_END_X, NEGATIVE_END_X/4*3, NEGATIVE_END_X/4*2, NEGATIVE_END_X/4, 0],
+      outputRange: ['0deg', '-20deg', '0deg', '20deg', '0deg']
+    });
+  };
+
+  componentDidMount() {
+    this.startAnimating();
+  }
+
+  startAnimating = () => {
+    const { onAnimationCompleted, index } = this.props;
+
+    /**
+     * Generate animation paths
+     */
+    this.generateAnimation();
+
+    /**
+     * Start animating
+     * Once animating is done, reset values
+     */
+    this.setState({
+      isAnimationStarted: true
+    }, () => {
+      Animated.timing(this.state.position, {
+        duration: this.props.duration,
+        toValue: -100,
+        useNativeDriver: true
+      }).start(() => {
+        this.setState({
+          isAnimationStarted: false,
+          position: new Animated.Value(ANIMATION_END_X),
+        });
+        onAnimationCompleted(index);
+      });
+    });
+  };
+
+  getAnimationStyle = () => {
+    if (this.state.isAnimationStarted) {
+      return {
+        transform: [
+          { translateY: this._yAnimation },
+          { translateX: this.state.position },
+          { scale: this._scaleAnimation },
+          { rotate: this._rotateAnimation }
+        ],
+        opacity: this._opacityAnimation
+      }
+    }
+
+    return {};
+  };
+
+  render() {
+    const { style, name, size } = this.props;
+
+    return (
+      <Animated.View style={[styles.container, this.getAnimationStyle(), style]}>
+        <Text style={{ fontSize: size }}>
+          <Emoji name={name}/>
+        </Text>
+      </Animated.View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 30,
+    transform: [
+      { translateX: ANIMATION_END_X }
+    ],
+  }
+});

lib/AnimatedEmoji.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text } from 'react-native';
+import PropTypes from 'prop-types';
+import nodeEmoji from 'node-emoji';
+
+export default Emoji({
+  name
+}) {
+  return (
+    <Text>
+      {nodeEmoji.get(name)}
+    </Text>
+  );
+}
+
+Emoji.propTypes = {
+  name: PropTypes.string.isRequired
+};

lib/Emoji.js

@@ -0,0 +1 @@
+export { AnimatedEmoji } from './AnimatedEmoji';

lib/index.js

@@ -0,0 +1,38 @@
+{
+  "name": "react-native-animated-emoji",
+  "version": "0.1.0",
+  "description": "Animated Floating Reactions like Facebook",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "animation",
+    "animated-emoji",
+    "emoji",
+    "simple",
+    "emoticons",
+    "emoticon",
+    "emojis",
+    "smiley",
+    "smileys",
+    "smilies",
+    "ideogram",
+    "ideograms"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:bdavid68/react-native-animated-emoji.git"
+  },
+  "author": "David Bala <b.david6008@gmail.com>",
+  "peerDependencies": {
+    "react-native": ">=0.29"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0",
+    "node-emoji": "^1.3.1"
+  }
+}