react-native-emojis-picker v0.0.2

light theme	dark theme

Installation

npm install react-native-emojis-picker

Dependencies

This library needs react-native-reanimated to be installed in your project before you can use it:

npm install react-native-reanimated@3.6.2

Add react-native-reanimated/plugin plugin to your babel.config.js.

  module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Usage

wrap the whole app in EmojiProvider

import { EmojiProvider } from "react-native-emojis-picker";
export default function App() {
  return <EmojiProvider>//rest your app</EmojiProvider>;
}

simple emoji component

import { Button, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import { EmojiModal } from "react-native-emojis-picker";

export default function EmojiComponent() {
  const [showModal, setShowModal] = useState(false);
  const [emoji, setEmoji] = useState("");
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 100 }}>{emoji}</Text>
      <Button
        title="Show Emojis Modal 😁"
        onPress={() => {
          setShowModal(true);
        }}
      />
      {showModal && (
        <EmojiModal
          onPressOutside={() => setShowModal(false)}
          onEmojiSelected={(emoji) => {
            setShowModal(false);
            setEmoji(emoji);
          }}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

now import the component we just created into App.tsx

import { EmojiProvider } from "react-native-emojis-picker";
import EmojiComponent from "./components/emoji";
export default function App() {
  return (
    <EmojiProvider>
      <EmojiComponent />
    </EmojiProvider>
  );
}

EmojiModal Props

Author

Majed Al-Otaibi, Majed@skiff.com

License

react-native-emojis-picker is available under the MIT license. See the LICENSE file for more info