diff options
Diffstat (limited to 'modules/expo-emoji-picker/src')
5 files changed, 89 insertions, 0 deletions
diff --git a/modules/expo-emoji-picker/src/EmojiPicker.android.tsx b/modules/expo-emoji-picker/src/EmojiPicker.android.tsx new file mode 100644 index 000000000..d8493b72e --- /dev/null +++ b/modules/expo-emoji-picker/src/EmojiPicker.android.tsx @@ -0,0 +1,28 @@ +import {useMemo} from 'react' +import {useColorScheme} from 'react-native' + +import {type EmojiPickerViewProps} from './EmojiPickerModule.types' +import EmojiPickerNativeView from './EmojiPickerView' + +const EmojiPicker = ({onEmojiSelected}: EmojiPickerViewProps) => { + const scheme = useColorScheme() + const styles = useMemo( + () => + ({ + flex: 1, + width: '100%', + backgroundColor: scheme === 'dark' ? '#000' : '#fff', + } as const), + [scheme], + ) + + return ( + <EmojiPickerNativeView + onEmojiSelected={emoji => { + onEmojiSelected(emoji) + }} + style={styles} + /> + ) +} +export default EmojiPicker diff --git a/modules/expo-emoji-picker/src/EmojiPicker.tsx b/modules/expo-emoji-picker/src/EmojiPicker.tsx new file mode 100644 index 000000000..8fee11df7 --- /dev/null +++ b/modules/expo-emoji-picker/src/EmojiPicker.tsx @@ -0,0 +1,15 @@ +import {type EmojiPickerViewProps} from './EmojiPickerModule.types' +import EmojiPickerNativeView from './EmojiPickerView' + +const EmojiPicker = ({children, onEmojiSelected}: EmojiPickerViewProps) => { + return ( + <EmojiPickerNativeView + onEmojiSelected={emoji => { + onEmojiSelected(emoji) + }}> + {children} + </EmojiPickerNativeView> + ) +} + +export default EmojiPicker diff --git a/modules/expo-emoji-picker/src/EmojiPickerModule.ts b/modules/expo-emoji-picker/src/EmojiPickerModule.ts new file mode 100644 index 000000000..a5b04e662 --- /dev/null +++ b/modules/expo-emoji-picker/src/EmojiPickerModule.ts @@ -0,0 +1,5 @@ +import {NativeModule, requireNativeModule} from 'expo' + +declare class EmojiPickerModule extends NativeModule {} + +export default requireNativeModule<EmojiPickerModule>('EmojiPicker') diff --git a/modules/expo-emoji-picker/src/EmojiPickerModule.types.ts b/modules/expo-emoji-picker/src/EmojiPickerModule.types.ts new file mode 100644 index 000000000..14690a38a --- /dev/null +++ b/modules/expo-emoji-picker/src/EmojiPickerModule.types.ts @@ -0,0 +1,20 @@ +import {type ViewProps} from 'react-native' + +export type EmojiSelectionListener = (event: { + nativeEvent: SelectionEvent +}) => void + +export type SelectionEvent = { + emoji: string +} + +export type EmojiPickerViewProps = ViewProps & { + /* + * Callback that will be called when an emoji is selected. + */ + onEmojiSelected: (emoji: string) => void +} + +export type EmojiPickerNativeViewProps = ViewProps & { + onEmojiSelected: EmojiSelectionListener +} diff --git a/modules/expo-emoji-picker/src/EmojiPickerView.tsx b/modules/expo-emoji-picker/src/EmojiPickerView.tsx new file mode 100644 index 000000000..0dff25fb5 --- /dev/null +++ b/modules/expo-emoji-picker/src/EmojiPickerView.tsx @@ -0,0 +1,21 @@ +import {requireNativeView} from 'expo' +import type * as React from 'react' + +import { + type EmojiPickerNativeViewProps, + type EmojiPickerViewProps, +} from './EmojiPickerModule.types' + +const NativeView: React.ComponentType<EmojiPickerNativeViewProps> = + requireNativeView('EmojiPicker') + +export default function EmojiPicker(props: EmojiPickerViewProps) { + return ( + <NativeView + {...props} + onEmojiSelected={({nativeEvent}) => { + props.onEmojiSelected(nativeEvent.emoji) + }} + /> + ) +} |