Animated Emoji Picker For React Native

Description:

An animated, modern emoji picker for React Native applications.

How to use it:

1. Install the emoji picker with NPM.

# NPM
$ npm install react-native-emojis-picker

2. The component requires the Reanimated library for smooth animations.

# NPM
$ npm install react-native-reanimated

// babel.config.js
module.exports = {
  presets: [
    // ...
  ],
  plugins: [
    // ...
    'react-native-reanimated/plugin',
  ],
};

3. Wrap the app into EmojiProvider.

import { EmojiProvider } from "react-native-emojis-picker";

export default function App() {
  return 
}

4. Add the emoji modal to your app.

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>
  );
}

5. Import the emoji component.

import { EmojiProvider } from "react-native-emojis-picker";
import EmojiComponent from "./components/emoji";

export default function App() {
  return (
    <EmojiProvider>
      <EmojiComponent />
    </EmojiProvider>
  );
}

6. Available props for Emoji Modal.

intensityBlur?: number;
columns?: number;
onEmojiSelected: (emoji: string) => void;
onPressOutside?: () => void;
categories?: Key[];
modalStyle?: ViewStyle;
position?: "top" | "bottom" | "center";
darkMode?: boolean;
autoFocusSearch?: boolean;

Preview: