react-native-emoji-popup

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