Emoji 15

babel.config.json

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

package.json

@@ -1,10 +1,11 @@
 {
     "name": "react-native-emoji-input",
-    "version": "1.1.9",
+    "version": "1.2.0",
     "description": "A React Native emoji keyboard component",
     "main": "index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "compile": "npx babel-node scripts/compile.js"
     },
     "repository": {
         "type": "git",
@@ -31,8 +32,8 @@
     },
     "homepage": "https://github.com/sskhandek/react-native-emoji-input#readme",
     "dependencies": {
-        "emoji-datasource": "^4.0.4",
-        "emoji-datasource-apple": "^4.0.4",
+        "emoji-datasource": "^15.0.1",
+        "emoji-datasource-apple": "^15.0.1",
         "eslint-plugin-react": "^7.8.2",
         "fuse.js": "^3.4.4",
         "lodash": "^4.17.5",
@@ -44,5 +45,10 @@
     },
     "jest": {
         "preset": "react-native"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.22.9",
+        "@babel/node": "^7.22.6",
+        "@babel/preset-env": "^7.22.9"
     }
-}
+}

src/Emoji.js

@@ -1,139 +1,139 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, Text, TouchableOpacity, StyleSheet, Image, Platform } from 'react-native';
-import _ from 'lodash';
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Platform,
+} from "react-native";
+import _ from "lodash";
 
-const EMOJI_DATASOURCE_VERSION = '4.0.4';
+const EMOJI_DATASOURCE_VERSION = "15.0.1";
 
 class Emoji extends React.PureComponent {
-    static propTypes = {
-        data: PropTypes.shape({
-            char: PropTypes.char,
-            unified: PropTypes.char
-        }),
-        onPress: PropTypes.func,
-        onLongPress: PropTypes.func,
-        native: PropTypes.bool,
-        size: PropTypes.number,
-        style: PropTypes.object,
-		labelStyle: PropTypes.object,
-        selected: PropTypes.bool,
-        selectedBorderWidth: PropTypes.number,
-    };
+  static propTypes = {
+    data: PropTypes.shape({
+      char: PropTypes.char,
+      unified: PropTypes.char,
+    }),
+    onPress: PropTypes.func,
+    onLongPress: PropTypes.func,
+    native: PropTypes.bool,
+    size: PropTypes.number,
+    style: PropTypes.object,
+    labelStyle: PropTypes.object,
+    selected: PropTypes.bool,
+    selectedBorderWidth: PropTypes.number,
+  };
 
-    static defaultProps = {
-        native: true
-    };
+  static defaultProps = {
+    native: true,
+  };
 
-    _getImage = data => {
-        let localImage = _.get(data, 'localImage');
-        if (localImage) return localImage;
+  _getImage = (data) => {
+    let localImage = _.get(data, "localImage");
+    if (localImage) return localImage;
 
-        let image = _.get(data, 'lib.image');
-        let imageSource = localImage || {
-            uri: `https://unpkg.com/emoji-datasource-apple@${EMOJI_DATASOURCE_VERSION}/img/apple/64/${image}`
-        };
-        return imageSource;
+    let image = _.get(data, "lib.image");
+    let imageSource = localImage || {
+      uri: `https://unpkg.com/emoji-datasource-apple@${EMOJI_DATASOURCE_VERSION}/img/apple/64/${image}`,
     };
+    return imageSource;
+  };
 
-    render() {
-        let imageComponent = null;
-
-        const {
-            native,
-            style,
-            labelStyle,
-            data,
-            onPress,
-			onLongPress, 
-			selected
-        } = this.props;
+  render() {
+    let imageComponent = null;
 
-        if (!native) {
-            const emojiImageFile = this._getImage(data);
+    const { native, style, labelStyle, data, onPress, onLongPress, selected } =
+      this.props;
 
-            const imageStyle = {
-                width: this.props.size,
-                height: this.props.size
-            };
+    if (!native) {
+      const emojiImageFile = this._getImage(data);
 
-            imageComponent = (
-                <Image style={imageStyle} source={emojiImageFile} />
-            );
-        } else {
-            if (!data.char) {
-                data.char = data.unified.replace(/(^|-)([a-z0-9]+)/gi, (s, b, cp) =>
-                    String.fromCodePoint(parseInt(cp, 16))
-                );
-            }
-        }
+      const imageStyle = {
+        width: this.props.size,
+        height: this.props.size,
+      };
 
-        const emojiComponent = (
-            <View style={StyleSheet.flatten([styles.emojiWrapper, style])}>
-                {native ? (
-                    <Text
-                        style={StyleSheet.flatten([
-                            styles.labelStyle,
-                            labelStyle,
-                            {
-                                fontSize: this.props.size
-                            }
-                        ])}
-                    >
-                        {data.char}
-                    </Text>
-                ) : (
-                    imageComponent
-                )}
-            </View>
+      imageComponent = <Image style={imageStyle} source={emojiImageFile} />;
+    } else {
+      if (!data.char) {
+        data.char = data.unified.replace(/(^|-)([a-z0-9]+)/gi, (s, b, cp) =>
+          String.fromCodePoint(parseInt(cp, 16))
         );
-        const selectedBorderWidth = this.props.selectedBorderWidth
-            ? 0.75 * this.props.selectedBorderWidth
-            : this.props.size;
-            return onPress || onLongPress ? (
-                <TouchableOpacity
-                    style={[styles.emojiWrapper]}
-                    onPress={evt => {
-                        onPress && onPress(data, evt);
-                    }}
-                    onLongPress={evt => {
-                        onLongPress && onLongPress(data, evt);
-                    }}
-                >
-                    {selected ? (
-                        <View
-                            style={{
-                                backgroundColor: "#d4e6eb",
-                                borderWidth: 1,
-                                width: selectedBorderWidth,
-                                height: selectedBorderWidth,
-                                borderRadius: selectedBorderWidth / 2,
-                                borderColor: "#00ACEB",
-                                paddingBottom: Platform.OS === "android" && 2.5,
-                            }}
-                        >
-                            {emojiComponent}
-                        </View>
-                    ) : (
-                        emojiComponent
-                    )}
-                </TouchableOpacity>
-            ) : (
-                emojiComponent
-            );
+      }
     }
+
+    const emojiComponent = (
+      <View style={StyleSheet.flatten([styles.emojiWrapper, style])}>
+        {native ? (
+          <Text
+            style={StyleSheet.flatten([
+              styles.labelStyle,
+              labelStyle,
+              {
+                fontSize: this.props.size,
+                minWidth: this.props.size * 1.5,
+              },
+            ])}
+          >
+            {data.char}
+          </Text>
+        ) : (
+          imageComponent
+        )}
+      </View>
+    );
+    const selectedBorderWidth = this.props.selectedBorderWidth
+      ? 0.75 * this.props.selectedBorderWidth
+      : this.props.size;
+    return onPress || onLongPress ? (
+      <TouchableOpacity
+        style={[styles.emojiWrapper]}
+        onPress={(evt) => {
+          onPress && onPress(data, evt);
+        }}
+        onLongPress={(evt) => {
+          onLongPress && onLongPress(data, evt);
+        }}
+      >
+        {selected ? (
+          <View
+            style={{
+              backgroundColor: "#d4e6eb",
+              borderWidth: 1,
+              width: selectedBorderWidth,
+              height: selectedBorderWidth,
+              borderRadius: selectedBorderWidth / 2,
+              borderColor: "#00ACEB",
+              paddingBottom: Platform.OS === "android" && 2.5,
+            }}
+          >
+            {emojiComponent}
+          </View>
+        ) : (
+          emojiComponent
+        )}
+      </TouchableOpacity>
+    ) : (
+      emojiComponent
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    emojiWrapper: {
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        flex: 1
-    },
-    labelStyle: {
-        color: 'black',
-        fontWeight: 'bold'
-    }
+  emojiWrapper: {
+    justifyContent: "space-around",
+    alignItems: "center",
+    flex: 1,
+  },
+  labelStyle: {
+    color: "black",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
 });
 
 export default Emoji;