react-native-emoji-popup
react-native-emoji-popup copied to clipboard
okwasniewski
Native Emoji Picker for React Native
react-native-emoji-popup 🌈
Emoji Popup for React Native, using native primitives.
https://github.com/user-attachments/assets/a6f94dc5-6175-419c-a6e4-04ef48aaf913
Installation
npm i react-native-emoji-popup
Usage
The API is simple, just wrap your component with the EmojiPopup component and pass a callback to the onEmojiSelected prop.
import { EmojiPopup } from 'react-native-emoji-popup';
export default function EmojiExample() {
const [emoji, setEmoji] = useState('🫡');
return (
<View>
<TextInput value={emoji} />
<EmojiPopup onEmojiSelected={setEmoji}>
<Text style={styles.buttonText}>Open Emoji Picker</Text>
</EmojiPopup>
</View>
);
}
On Android, you can also pass a custom close button component to the closeButton prop.
import { EmojiPopup } from 'react-native-emoji-popup';
const CloseButton = ({ close }: { close: () => void }) => (
<Pressable onPress={close}>
<Text style={styles.buttonText}>Close ❌</Text>
</Pressable>
);
export default function EmojiExample() {
const [emoji, setEmoji] = useState('🫡');
return (
<View>
<TextInput value={emoji} />
<EmojiPopup
onEmojiSelected={setEmoji}
closeButton={CloseButton}
style={styles.buttonText}
>
<Text style={styles.buttonText}>Open Emoji Picker</Text>
</EmojiPopup>
</View>
);
}
Props
| Prop | Type | Platform | Description | Default |
|---|---|---|---|---|
children |
React.ReactNode |
iOS, Android | The component that will trigger the emoji picker when pressed | - |
onEmojiSelected |
(emoji: string) => void |
iOS, Android | Callback function that receives the selected emoji as a parameter | - |
closeButton |
(props: { close: () => void }) => React.ReactNode |
Android | Custom close button component that receives a close function | Default close button |
contentContainerStyle |
StyleProp<ViewStyle> |
Android | Style object for customizing the emoji picker container appearance | - |
style |
StyleProp<ViewStyle> |
iOS, Android | Style object for the trigger component container | - |
Features
Dark Mode Support
The emoji picker automatically adapts to the device's color scheme on both platforms. On Android, you can customize the color scheme by passing a contentContainerStyle prop to the EmojiPopup component and specifying the backgroundColor property.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Acknowledgements
- MCEmojiPicker - underlying iOS library.
- Emoji2 - underlying Android library.
Made with create-react-native-library
okwasniewski