https://github.com/majiedo/react-native-emojis-picker
Simple, customizable emojis picker for React Native 👌👌
https://github.com/majiedo/react-native-emojis-picker
emoji-picker emojis react react-native reanimated3
Last synced: 3 months ago
JSON representation
Simple, customizable emojis picker for React Native 👌👌
- Host: GitHub
- URL: https://github.com/majiedo/react-native-emojis-picker
- Owner: Majiedo
- License: mit
- Created: 2024-02-04T07:48:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-28T00:18:32.000Z (8 months ago)
- Last Synced: 2025-03-17T05:44:43.435Z (3 months ago)
- Topics: emoji-picker, emojis, react, react-native, reanimated3
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-emojis-picker
- Size: 1.52 MB
- Stars: 25
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-native-emojis-picker
It's built with TypeScript and uses Reanimated 2 for smooth animations
| light theme | dark theme |
| :---------------------------: | :--------------------------: |
|  |  |
### Installation
```bash
npm install react-native-emojis-picker
```
### Dependencies
This library needs react-native-reanimated to be installed in your project before you can use it:
```bash
npm install [email protected]
```
Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
```ts
module.exports = {
presets: [
... // don't add it here :)
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
```
### Usage
wrap the whole app in `EmojiProvider`
```ts
import { EmojiProvider } from "react-native-emojis-picker";
export default function App() {
return (
//rest your app
);
}
```
simple emoji component
```ts
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 (
{emoji}
{
setShowModal(true);
}}
/>
{showModal && (
setShowModal(false)}
onEmojiSelected={(emoji) => {
setShowModal(false);
setEmoji(emoji);
}}
/>
)}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
```
now import the component we just created into `App.tsx`
```ts
import { EmojiProvider } from "react-native-emojis-picker";
import EmojiComponent from "./components/emoji";
export default function App() {
return (
);
}
```
### `EmojiModal` Props
| Property | Type | Default | description |
| :-------------: | :---------------------------: | :------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| intensityBlur | number | 20 | the intensity of the backgroud blur |
| columns | number | 10 | number of columns |
| onEmojiSelected | function | undefined | function fire when emoji selected and return the selected emoji |
| onPressOutside | function | undefined | function fire when the user press outside the modal |
| position | "top" or "bottom" or "center" | "center" | position of the modal |
| autoFocusSearch | boolean | false | auto focus the search textbox |
| darkMode | boolean | false | theme of the modal |
| categories | Key[] | All categories | only categories these are shown in the modal such as ( "Smileys & Emotion" "Activities" "Animals & Nature" "Flags" "Food & Drink" "Objects" "People & Body" "Symbols" "Travel & Places") |
### Author
Majed Al-Otaibi, [email protected]
### License
react-native-emojis-picker is available under the MIT license. See the LICENSE file for more info