about summary refs log tree commit diff
path: root/modules/expo-emoji-picker/src
diff options
context:
space:
mode:
Diffstat (limited to 'modules/expo-emoji-picker/src')
-rw-r--r--modules/expo-emoji-picker/src/EmojiPicker.android.tsx28
-rw-r--r--modules/expo-emoji-picker/src/EmojiPicker.tsx15
-rw-r--r--modules/expo-emoji-picker/src/EmojiPickerModule.ts5
-rw-r--r--modules/expo-emoji-picker/src/EmojiPickerModule.types.ts20
-rw-r--r--modules/expo-emoji-picker/src/EmojiPickerView.tsx21
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)
+      }}
+    />
+  )
+}