EXAMPLE: emoji picker

package.json

@@ -165,6 +165,7 @@
     "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.6",
     "reactotron-react-native": "^5.1.7",
+    "rn-emoji-keyboard": "^1.7.0",
     "sass": "^1.77.2",
     "setimmediate": "^1.0.5",
     "use-debounce": "^9.0.4"

src/components/molecules/Field/Field.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react'
 
 import { FieldCheckbox } from './FieldCheckbox'
 import { FieldCheckboxGroup } from './FieldCheckboxGroup'
+import { FieldEmojiPicker } from './FieldEmojiPicker'
 import { FieldInput } from './FieldInput'
 import { FieldRadioGroup } from './FieldRadioGroup'
 import { FieldSelect } from './FieldSelect'
@@ -12,6 +13,7 @@ type FieldComposition = React.FC<PropsWithChildren> & {
   Checkbox: typeof FieldCheckbox
   RadioGroup: typeof FieldRadioGroup
   Select: typeof FieldSelect
+  EmojiPicker: typeof FieldEmojiPicker
 }
 
 const Field: FieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ Field.CheckboxGroup = FieldCheckboxGroup
 Field.Checkbox = FieldCheckbox
 Field.RadioGroup = FieldRadioGroup
 Field.Select = FieldSelect
+Field.EmojiPicker = FieldEmojiPicker
 
 export { Field }
 export * from './types'

src/components/molecules/Field/FieldEmojiPicker.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, useCallback, useImperativeHandle, useRef, useMemo } from 'react'
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+
+import type { FieldEmojiPickerProps } from './types'
+
+import {
+  FormErrorMessage,
+  FormLabel,
+  Box,
+  EmojiPicker,
+  EmojiPickerRef,
+} from '@/design-system/components'
+import { getLayoutProps } from '@/design-system/utils/getLayoutProps'
+
+export const FieldEmojiPicker = forwardRef<EmojiPickerRef, FieldEmojiPickerProps>(
+  (
+    {
+      errorMessage,
+      isInvalid,
+      isRequired,
+      label,
+      labelStyle,
+      onBlur,
+      onFocus,
+      testID,
+      onChangeEmoji,
+      ...props
+    },
+    ref
+  ) => {
+    const _emojiPickerRef = useRef<EmojiPickerRef>(null)
+
+    const { layoutProps, restProps: emojiPickerProps } = useMemo(
+      () => getLayoutProps(props),
+      [props]
+    )
+
+    const handleFocus = useCallback(() => {
+      _emojiPickerRef?.current?.focus()
+    }, [onFocus])
+
+    const handleBlur = useCallback(
+      (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        onBlur && e && onBlur(e)
+        _emojiPickerRef.current?.blur()
+      },
+      [onBlur]
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: handleFocus,
+        blur: handleBlur,
+        ..._emojiPickerRef.current,
+      }),
+      [handleBlur, handleFocus]
+    )
+
+    return (
+      <Box width="100%" gap={1} mb={2} {...layoutProps}>
+        <FormLabel
+          {...{ isRequired, label, labelStyle }}
+          testID={testID + ':label'}
+          onLabelPress={handleFocus}
+        />
+        <EmojiPicker
+          isInvalid={isInvalid || Boolean(errorMessage)}
+          onChangeEmoji={onChangeEmoji}
+          {...emojiPickerProps}
+          ref={_emojiPickerRef}
+          testID={testID + ':input'}
+        />
+        <FormErrorMessage {...{ errorMessage }} testId={testID + ':error_message'} />
+      </Box>
+    )
+  }
+)

src/components/molecules/Field/types.ts

@@ -7,6 +7,7 @@ import {
   SelectProps,
   StyledProps,
   TouchableRef,
+  EmojiPickerProps,
 } from '@/design-system'
 
 // -----------------------
@@ -92,3 +93,12 @@ export type FieldCheckboxProps = FormLabelProps &
   CheckboxProps & {
     errorMessage?: string
   }
+
+// -----------------------
+// ----- EMOJI PICKER ----
+// -----------------------
+
+export type FieldEmojiPickerProps = FormLabelProps &
+  EmojiPickerProps & {
+    errorMessage?: string
+  }

src/components/organisms/ControlledField/ControlledEmojiPicker.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import { Controller, ControllerProps, FieldValues, get } from 'react-hook-form'
+
+import type { ControlledEmojiPickerProps } from './types'
+import { Field } from '../../molecules'
+
+export const ControlledEmojiPicker = <TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  errors,
+  rules,
+  children,
+  ...props
+}: ControlledEmojiPickerProps<TFieldValues>) => {
+  const errorMessage = get(errors, name)?.message
+
+  const renderEmojiPicker = useCallback(
+    ({
+      field: { onChange, name, ref, value, ...fieldProps },
+    }: Parameters<ControllerProps['render']>[0]) => {
+      return (
+        <Field.EmojiPicker
+          {...props}
+          {...fieldProps}
+          emoji={value}
+          ref={ref}
+          errorMessage={errorMessage}
+          onChangeEmoji={onChange}
+        />
+      )
+    },
+    [errorMessage, props]
+  )
+
+  return (
+    <Controller
+      name={name}
+      // @ts-expect-error: For some reason, the type of render is not being inferred correctly
+      control={control}
+      rules={rules}
+      render={renderEmojiPicker}
+    />
+  )
+}

src/components/organisms/ControlledField/ControlledField.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react'
 
 import { ControlledCheckbox } from './ControlledCheckbox'
 import { ControlledCheckboxGroup } from './ControlledCheckboxGroup'
+import { ControlledEmojiPicker } from './ControlledEmojiPicker'
 import { ControlledInput } from './ControlledInput'
 import { ControlledRadioGroup } from './ControlledRadioGroup'
 import { ControlledSelect } from './ControlledSelect'
@@ -12,6 +13,7 @@ type ControlledFieldComposition = React.FC<PropsWithChildren> & {
   RadioGroup: typeof ControlledRadioGroup
   Checkbox: typeof ControlledCheckbox
   Select: typeof ControlledSelect
+  EmojiPicker: typeof ControlledEmojiPicker
 }
 
 const ControlledField: ControlledFieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ ControlledField.CheckboxGroup = ControlledCheckboxGroup
 ControlledField.Checkbox = ControlledCheckbox
 ControlledField.RadioGroup = ControlledRadioGroup
 ControlledField.Select = ControlledSelect
+ControlledField.EmojiPicker = ControlledEmojiPicker
 
 export { ControlledField }
 export * from './types'

src/components/organisms/ControlledField/types.ts

@@ -6,6 +6,7 @@ import {
   FieldRadioGroupProps,
   FieldSelectProps,
   FieldCheckboxProps,
+  FieldEmojiPickerProps,
 } from '@/components/molecules'
 
 // -----------------------
@@ -68,3 +69,13 @@ export type ControlledCheckboxProps<TFieldValues extends FieldValues = FieldValu
   'onChange' | 'isChecked'
 > &
   ControlledFieldProps<TFieldValues>
+
+// -----------------------
+// ----- EMOJI PICKER ----
+// -----------------------
+
+export type ControlledEmojiPickerProps<TFieldValues extends FieldValues = FieldValues> = Omit<
+  FieldEmojiPickerProps,
+  'ref' | 'onChangeEmoji' | 'emoji'
+> &
+  ControlledFieldProps<TFieldValues>

src/design-system/components/EmojiPicker.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, useCallback, useImperativeHandle } from 'react'
+import { StyleSheet } from 'react-native'
+import EmojiKeyboard from 'rn-emoji-keyboard'
+
+import { BoxWithShadow } from './BoxWithShadow'
+import { Icon } from './Icon'
+import { Row } from './Row'
+import { Text } from './Text'
+import { Touchable } from './Touchables'
+import { EmojiPickerProps, EmojiPickerRef } from './types'
+
+import { useBoolean, useTheme } from '@/hooks'
+import { hex2rgba } from '@/utils'
+
+export const EmojiPicker = forwardRef<EmojiPickerRef, EmojiPickerProps>(
+  ({ emoji, onChangeEmoji, placeholder, isDisabled, isInvalid, ...props }, ref) => {
+    const [isOpen, setIsOpen] = useBoolean(false)
+    const { colors } = useTheme()
+
+    const clearEmoji = useCallback(() => {
+      onChangeEmoji({
+        emoji: '',
+        name: '',
+        slug: '',
+      })
+    }, [onChangeEmoji])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: setIsOpen.on,
+        blur: setIsOpen.off,
+      }),
+      [setIsOpen.on, setIsOpen.off]
+    )
+
+    return (
+      <>
+        <BoxWithShadow isInvalid={isInvalid}>
+          <Touchable
+            onPress={setIsOpen.on}
+            width="100%"
+            minW={48}
+            disabled={isDisabled}
+            alignItems="center"
+            borderColor={
+              isDisabled ? 'border.disabled' : isInvalid ? 'border.error' : 'border.primary'
+            }
+            bg={isDisabled ? 'bg.disabled_subtle' : 'bg.primary'}
+            borderRadius={8}
+            borderWidth={1}
+            flexDirection="row"
+            overflow="hidden"
+            {...props}
+          >
+            <Row
+              alignItems="center"
+              gap={2}
+              px={2}
+              py={2}
+              justifyContent="space-between"
+              width={'100%'}
+            >
+              <Text.MdRegular
+                style={emoji?.emoji ? styles.input : undefined}
+                color={emoji?.emoji ? 'text.primary' : 'text.placeholder'}
+              >
+                {emoji?.emoji || placeholder}
+              </Text.MdRegular>
+              {emoji?.emoji ? (
+                <Touchable right={0} onPress={clearEmoji}>
+                  <Icon name="close-line" color="text.primary" size={18} />
+                </Touchable>
+              ) : null}
+            </Row>
+          </Touchable>
+        </BoxWithShadow>
+        {/* FIXME: Emoji picker is not looking nice on web and bigger screens, we need to do something with that */}
+        <EmojiKeyboard
+          open={isOpen}
+          onClose={setIsOpen.off}
+          onEmojiSelected={(selectedEmoji) => {
+            onChangeEmoji(selectedEmoji)
+            setIsOpen.off()
+          }}
+          theme={{
+            backdrop: hex2rgba(colors.bg.primary, 0.2),
+            header: colors.text.primary,
+            container: colors.bg.primary,
+            knob: colors.border.primary,
+            category: {
+              icon: colors.text.secondary,
+              iconActive: colors.text.primary,
+              container: colors.bg.quaternary,
+              containerActive: colors.bg.active,
+            },
+            search: {
+              text: colors.text.primary,
+              placeholder: colors.text.placeholder,
+              icon: colors.text.primary,
+              background: colors.bg.primary,
+            },
+          }}
+          enableSearchBar
+        />
+      </>
+    )
+  }
+)
+
+const styles = StyleSheet.create({
+  input: {
+    fontFamily: 'system',
+  },
+})

src/design-system/components/index.ts

@@ -5,6 +5,7 @@ export * from './BoxWithShadow'
 export * from './Button'
 export * from './Center'
 export * from './Column'
+export * from './EmojiPicker'
 export * from './GradientBox'
 export * from './Row'
 export * from './Spacer'

src/design-system/components/types.ts

@@ -269,3 +269,28 @@ export type CheckboxProps = TouchableProps & {
   size?: 'sm' | 'md'
   pb?: SizingValue
 }
+
+// -----------------------
+// ----- EMOJI PICKER ----
+// -----------------------
+
+export type EmojiPickerRef = { focus: () => void; blur: () => void }
+
+export type EmojiPickerProps = TouchableProps & {
+  // Logic
+  onChangeEmoji: (newValue: EmojiType) => void
+  emoji?: EmojiType
+
+  // UI
+  placeholder?: string
+  isDisabled?: boolean
+  isInvalid?: boolean
+  rightElement?: JSX.Element
+  leftElement?: JSX.Element
+}
+
+type EmojiType = {
+  emoji: string
+  name: string
+  slug: string
+}

src/hooks/forms/useTestForm.ts

@@ -18,6 +18,7 @@ const defaultValues: TestFormValues = {
   age: '',
   education: '',
   interests: [],
+  icon: '',
 }
 
 export const useTestForm = () => {
@@ -52,6 +53,7 @@ export const useTestForm = () => {
     music: { required: t('test_form.errors.music') },
     interests: { required: t('test_form.errors.interests') },
     sex: { required: t('test_form.errors.sex') },
+    icon: { required: t('test_form.errors.icon') },
   }
 
   const {