Fix emoji state

src/components/Emojis.tsx

@@ -1,15 +1,15 @@
 import EmojisButton from '@components/Emojis/Button'
 import EmojisList from '@components/Emojis/List'
+import { PasteInputRef } from '@mattermost/react-native-paste-input'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useEmojisQuery } from '@utils/queryHooks/emojis'
 import { getInstanceFrequentEmojis } from '@utils/slices/instancesSlice'
 import { chunk, forEach, groupBy, sortBy } from 'lodash'
 import React, { PropsWithChildren, RefObject, useEffect, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Keyboard, KeyboardAvoidingView, TextInput, View } from 'react-native'
+import { Keyboard, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
-import { ScrollView } from 'react-native-gesture-handler'
+import { Edge, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useSelector } from 'react-redux'
 import EmojisContext, { emojisReducer, EmojisState } from './Emojis/helpers/EmojisContext'
 
@@ -42,20 +42,26 @@ const prefetchEmojis = (
 
 export type Props = {
   inputProps: EmojisState['inputProps']
-  focusRef?: RefObject<TextInput>
+  focusRef?: RefObject<TextInput | PasteInputRef>
+  customButton?: boolean
+  customEdges?: Edge[]
+  customBehavior?: 'height' | 'padding' | 'position'
 }
 
 const ComponentEmojis: React.FC<Props & PropsWithChildren> = ({
   children,
   inputProps,
-  focusRef
+  focusRef,
+  customButton = false,
+  customEdges = ['bottom'],
+  customBehavior
 }) => {
   const { reduceMotionEnabled } = useAccessibility()
 
   const [emojisState, emojisDispatch] = useReducer(emojisReducer, {
     emojis: [],
-    targetProps: null,
+    inputProps,
-    inputProps
+    targetIndex: -1
   })
   useEffect(() => {
     emojisDispatch({ type: 'input', payload: inputProps })
@@ -89,9 +95,9 @@ const ComponentEmojis: React.FC<Props & PropsWithChildren> = ({
   const [keyboardShown, setKeyboardShown] = useState(false)
   useEffect(() => {
     const showSubscription = Keyboard.addListener('keyboardWillShow', () => {
-      const anyInputHasFocus = inputProps.filter(props => props.ref.current?.isFocused()).length
+      const anyInputHasFocus = inputProps.filter(props => props.isFocused.current).length
       if (anyInputHasFocus) {
-        emojisDispatch({ type: 'target', payload: null })
+        emojisDispatch({ type: 'target', payload: -1 })
       }
       setKeyboardShown(true)
     })
@@ -111,17 +117,23 @@ const ComponentEmojis: React.FC<Props & PropsWithChildren> = ({
   }, [])
 
   return (
-    <KeyboardAvoidingView style={{ flex: 1 }}>
+    <KeyboardAvoidingView style={{ flex: 1 }} behavior={customBehavior}>
-      <SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
+      <SafeAreaView style={{ flex: 1 }} edges={customEdges}>
-        <View style={{ flex: 1, justifyContent: 'space-between' }}>
+        <View style={{ flex: 1 }}>
           <EmojisContext.Provider value={{ emojisState, emojisDispatch }}>
-            <ScrollView keyboardShouldPersistTaps='always' children={children} />
+            {children}
             <View
               style={[
                 keyboardShown ? { position: 'absolute', bottom: 0, width: '100%' } : null,
                 { marginBottom: keyboardShown ? insets.bottom : 0 }
               ]}
-              children={emojisState.targetProps ? <EmojisList /> : <EmojisButton />}
+              children={
+                emojisState.targetIndex !== -1 ? (
+                  <EmojisList />
+                ) : customButton ? null : (
+                  <EmojisButton />
+                )
+              }
             />
           </EmojisContext.Provider>
         </View>

src/components/Emojis/Button.tsx

@@ -9,18 +9,19 @@ const EmojisButton: React.FC = () => {
   const { colors } = useTheme()
   const { emojisState, emojisDispatch } = useContext(EmojisContext)
 
+  const focusedPropsIndex = emojisState.inputProps?.findIndex(props => props.isFocused.current)
+  if (focusedPropsIndex === -1) {
+    return null
+  }
+
   return (
     <Pressable
       disabled={!emojisState.emojis || !emojisState.emojis.length}
       onPress={() => {
-        const targetProps = emojisState.inputProps?.find(props => props.ref.current?.isFocused())
+        if (emojisState.targetIndex === -1) {
-        if (!targetProps) {
-          return
-        }
-        if (emojisState.targetProps === null) {
           Keyboard.dismiss()
         }
-        emojisDispatch({ type: 'target', payload: targetProps })
+        emojisDispatch({ type: 'target', payload: focusedPropsIndex })
       }}
       hitSlop={StyleConstants.Spacing.S}
       style={{

src/components/Emojis/List.tsx

@@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { chunk } from 'lodash'
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   AccessibilityInfo,
@@ -21,191 +21,188 @@ import FastImage from 'react-native-fast-image'
 import validUrl from 'valid-url'
 import EmojisContext from './helpers/EmojisContext'
 
-const EmojisList = React.memo(
+const EmojisList = () => {
-  () => {
+  const dispatch = useAppDispatch()
-    const dispatch = useAppDispatch()
+  const { reduceMotionEnabled } = useAccessibility()
-    const { reduceMotionEnabled } = useAccessibility()
+  const { t } = useTranslation()
-    const { t } = useTranslation()
 
-    const { emojisState } = useContext(EmojisContext)
+  const { emojisState } = useContext(EmojisContext)
-    const { colors, mode } = useTheme()
+  const { colors, mode } = useTheme()
 
-    const addEmoji = (shortcode: string) => {
+  const addEmoji = (shortcode: string) => {
-      if (!emojisState.targetProps) {
+    if (emojisState.targetIndex === -1) {
-        return
+      return
-      }
-
-      const inputValue = emojisState.targetProps.value
-      const maxLength = emojisState.targetProps.maxLength
-      const selectionRange = emojisState.targetProps.selectionRange || {
-        start: emojisState.targetProps.value.length,
-        end: emojisState.targetProps.value.length
-      }
-
-      if (inputValue?.length) {
-        const contentFront = inputValue.slice(0, selectionRange.start)
-        const contentRear = inputValue.slice(selectionRange.end)
-
-        const whiteSpaceRear = /\s/g.test(contentRear.slice(-1))
-
-        const newTextWithSpace = ` ${shortcode}${whiteSpaceRear ? '' : ' '}`
-        emojisState.targetProps.setValue(
-          [contentFront, newTextWithSpace, contentRear].join('').slice(0, maxLength)
-        )
-      } else {
-        emojisState.targetProps.setValue(`${shortcode} `.slice(0, maxLength))
-      }
     }
 
-    const listItem = useCallback(
+    const {
-      ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
+      value: [value, setValue],
-        return (
+      selection: [selection, setSelection],
-          <View
+      ref,
-            key={index}
+      maxLength
-            style={{
+    } = emojisState.inputProps[emojisState.targetIndex]
-              flex: 1,
+
-              flexWrap: 'wrap',
+    const contentFront = value.slice(0, selection.start)
-              marginTop: StyleConstants.Spacing.M,
+    const contentRear = value.slice(selection.end)
-              marginRight: StyleConstants.Spacing.S
+
-            }}
+    const spaceFront = /\s/g.test(contentFront.slice(-1)) ? '' : ' '
-          >
+    const spaceRear = /\s/g.test(contentRear[0]) ? '' : ' '
-            {item.map(emoji => {
+
-              const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
+    setValue(
-              if (validUrl.isHttpsUri(uri)) {
+      [contentFront, spaceFront, shortcode, spaceRear, contentRear].join('').slice(0, maxLength)
-                return (
-                  <Pressable
-                    key={emoji.shortcode}
-                    onPress={() => {
-                      addEmoji(`:${emoji.shortcode}:`)
-                      dispatch(countInstanceEmoji(emoji))
-                    }}
-                    style={{ padding: StyleConstants.Spacing.S }}
-                  >
-                    <FastImage
-                      accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
-                        emoji: emoji.shortcode
-                      })}
-                      accessibilityHint={t(
-                        'screenCompose:content.root.footer.emojis.accessibilityHint'
-                      )}
-                      source={{ uri }}
-                      style={{ width: 32, height: 32 }}
-                    />
-                  </Pressable>
-                )
-              } else {
-                return null
-              }
-            })}
-          </View>
-        )
-      },
-      [emojisState.targetProps]
     )
 
-    const listRef = useRef<SectionList>(null)
+    const addedLength = spaceFront.length + shortcode.length + spaceRear.length
-    useEffect(() => {
-      const tagEmojis = findNodeHandle(listRef.current)
-      if (emojisState.targetProps) {
-        layoutAnimation()
-        tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
-      }
-    }, [emojisState.targetProps])
 
-    const [search, setSearch] = useState('')
+    setSelection({ start: selection.start + addedLength })
-    const searchLength = useRef(0)
+    ref?.current?.setNativeProps({
-    useEffect(() => {
+      selection: { start: selection.start + addedLength }
-      if (
+    })
-        (search.length === 0 && searchLength.current === 1) ||
+  }
-        (search.length === 1 && searchLength.current === 0)
-      ) {
-        layoutAnimation()
-      }
-      searchLength.current = search.length
-    }, [search.length, searchLength.current])
 
-    return emojisState.targetProps ? (
+  const listItem = ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
+    return (
+      <View
+        key={index}
+        style={{
+          flex: 1,
+          flexWrap: 'wrap',
+          marginTop: StyleConstants.Spacing.M,
+          marginRight: StyleConstants.Spacing.S
+        }}
+      >
+        {item.map(emoji => {
+          const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
+          if (validUrl.isHttpsUri(uri)) {
+            return (
+              <Pressable
+                key={emoji.shortcode}
+                onPress={() => {
+                  addEmoji(`:${emoji.shortcode}:`)
+                  dispatch(countInstanceEmoji(emoji))
+                }}
+                style={{ padding: StyleConstants.Spacing.S }}
+              >
+                <FastImage
+                  accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
+                    emoji: emoji.shortcode
+                  })}
+                  accessibilityHint={t(
+                    'screenCompose:content.root.footer.emojis.accessibilityHint'
+                  )}
+                  source={{ uri }}
+                  style={{ width: 32, height: 32 }}
+                />
+              </Pressable>
+            )
+          } else {
+            return null
+          }
+        })}
+      </View>
+    )
+  }
+
+  const listRef = useRef<SectionList>(null)
+  useEffect(() => {
+    const tagEmojis = findNodeHandle(listRef.current)
+    if (emojisState.targetIndex !== -1) {
+      layoutAnimation()
+      tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
+    }
+  }, [emojisState.targetIndex])
+
+  const [search, setSearch] = useState('')
+  const searchLength = useRef(0)
+  useEffect(() => {
+    if (
+      (search.length === 0 && searchLength.current === 1) ||
+      (search.length === 1 && searchLength.current === 0)
+    ) {
+      layoutAnimation()
+    }
+    searchLength.current = search.length
+  }, [search.length, searchLength.current])
+
+  return emojisState.targetIndex !== -1 ? (
+    <View
+      style={{
+        paddingBottom: StyleConstants.Spacing.Global.PagePadding,
+        backgroundColor: colors.backgroundDefault
+      }}
+    >
       <View
         style={{
-          paddingBottom: StyleConstants.Spacing.Global.PagePadding,
+          flexDirection: 'row',
-          backgroundColor: colors.backgroundDefault
+          alignItems: 'center',
+          paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+          paddingVertical: StyleConstants.Spacing.S
         }}
       >
         <View
           style={{
-            flexDirection: 'row',
+            borderBottomWidth: 1,
-            alignItems: 'center',
+            borderBottomColor: colors.border,
-            padding: StyleConstants.Spacing.Global.PagePadding,
+            alignSelf: 'stretch',
-            paddingBottom: StyleConstants.Spacing.S
+            justifyContent: 'center',
+            paddingRight: StyleConstants.Spacing.S
           }}
         >
-          <View
+          <Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
-            style={{
-              borderBottomWidth: 1,
-              borderBottomColor: colors.border,
-              alignSelf: 'stretch',
-              justifyContent: 'center',
-              paddingRight: StyleConstants.Spacing.S
-            }}
-          >
-            <Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
-          </View>
-          <TextInput
-            style={{
-              flex: 1,
-              borderBottomWidth: 1,
-              borderBottomColor: colors.border,
-              ...StyleConstants.FontStyle.M,
-              color: colors.primaryDefault,
-              paddingVertical: StyleConstants.Spacing.S
-            }}
-            onChangeText={setSearch}
-            autoCapitalize='none'
-            clearButtonMode='always'
-            keyboardAppearance={mode}
-            autoCorrect={false}
-            spellCheck={false}
-          />
         </View>
-        <SectionList
+        <TextInput
-          accessible
+          style={{
-          ref={listRef}
+            flex: 1,
-          horizontal
+            borderBottomWidth: 1,
-          keyboardShouldPersistTaps='always'
+            borderBottomColor: colors.border,
-          sections={
+            ...StyleConstants.FontStyle.M,
-            search.length
+            color: colors.primaryDefault,
-              ? [
+            paddingVertical: StyleConstants.Spacing.S
-                  {
-                    title: 'Search result',
-                    data: chunk(
-                      emojisState.emojis
-                        .filter(e => e.type !== 'frequent')
-                        .flatMap(e =>
-                          e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
-                        ),
-                      2
-                    )
-                  }
-                ]
-              : emojisState.emojis
-          }
-          keyExtractor={item => item[0]?.shortcode}
-          renderSectionHeader={({ section: { title } }) => (
-            <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
-              {title}
-            </CustomText>
-          )}
-          renderItem={listItem}
-          windowSize={4}
-          contentContainerStyle={{
-            paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
-            minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
           }}
+          onChangeText={setSearch}
+          autoCapitalize='none'
+          clearButtonMode='always'
+          keyboardAppearance={mode}
+          autoCorrect={false}
+          spellCheck={false}
         />
       </View>
-    ) : null
+      <SectionList
-  },
+        accessible
-  () => true
+        ref={listRef}
-)
+        horizontal
+        keyboardShouldPersistTaps='always'
+        sections={
+          search.length
+            ? [
+                {
+                  title: 'Search result',
+                  data: chunk(
+                    emojisState.emojis
+                      .filter(e => e.type !== 'frequent')
+                      .flatMap(e =>
+                        e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
+                      ),
+                    2
+                  )
+                }
+              ]
+            : emojisState.emojis
+        }
+        keyExtractor={item => item[0]?.shortcode}
+        renderSectionHeader={({ section: { title } }) => (
+          <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
+            {title}
+          </CustomText>
+        )}
+        renderItem={listItem}
+        windowSize={4}
+        contentContainerStyle={{
+          paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+          minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
+        }}
+      />
+    </View>
+  ) : null
+}
 
 export default EmojisList

src/components/Emojis/helpers/EmojisContext.tsx

@@ -1,11 +1,11 @@
-import { createContext, Dispatch, RefObject, SetStateAction } from 'react'
+import { createContext, Dispatch, MutableRefObject, RefObject } from 'react'
 import { TextInput } from 'react-native'
 
 type inputProps = {
-  ref: RefObject<TextInput>
+  value: [string, (value: string) => void]
-  value: string
+  selection: [{ start: number; end?: number }, (selection: { start: number; end?: number }) => void]
-  setValue: Dispatch<SetStateAction<string>>
+  isFocused: MutableRefObject<boolean>
-  selectionRange?: { start: number; end: number }
+  ref?: RefObject<TextInput> // For controlling focus
   maxLength?: number
 }
 
@@ -15,14 +15,14 @@ export type EmojisState = {
     data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
     type?: 'frequent'
   }[]
-  targetProps: inputProps | null
   inputProps: inputProps[]
+  targetIndex: number
 }
 
 export type EmojisAction =
   | { type: 'load'; payload: NonNullable<EmojisState['emojis']> }
-  | { type: 'target'; payload: EmojisState['targetProps'] }
   | { type: 'input'; payload: EmojisState['inputProps'] }
+  | { type: 'target'; payload: EmojisState['targetIndex'] }
 
 type ContextType = {
   emojisState: EmojisState
@@ -34,10 +34,10 @@ export const emojisReducer = (state: EmojisState, action: EmojisAction) => {
   switch (action.type) {
     case 'load':
       return { ...state, emojis: action.payload }
-    case 'target':
-      return { ...state, targetProps: action.payload }
     case 'input':
       return { ...state, inputProps: action.payload }
+    case 'target':
+      return { ...state, targetIndex: action.payload }
   }
 }
 

src/components/Input.tsx

@@ -1,30 +1,37 @@
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { Dispatch, forwardRef, RefObject, SetStateAction, useRef } from 'react'
+import React, { forwardRef, RefObject } from 'react'
 import { Platform, TextInput, TextInputProps, View } from 'react-native'
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { EmojisState } from './Emojis/helpers/EmojisContext'
 import CustomText from './Text'
 
 export type Props = {
-  value: string
-  setValue: Dispatch<SetStateAction<string>>
-  selectionRange?: { start: number; end: number }
-
   title?: string
   multiline?: boolean
-} & Omit<
+} & Pick<NonNullable<EmojisState['inputProps'][0]>, 'value' | 'selection' | 'isFocused'> &
-  TextInputProps,
+  Omit<
-  | 'style'
+    TextInputProps,
-  | 'onChangeText'
+    | 'style'
-  | 'onSelectionChange'
+    | 'onChangeText'
-  | 'keyboardAppearance'
+    | 'onSelectionChange'
-  | 'textAlignVertical'
+    | 'keyboardAppearance'
-  | 'multiline'
+    | 'textAlignVertical'
->
+    | 'multiline'
+    | 'selection'
+    | 'value'
+  >
 
 const ComponentInput = forwardRef(
   (
-    { title, multiline = false, value, setValue, selectionRange, ...props }: Props,
+    {
+      title,
+      multiline = false,
+      value: [value, setValue],
+      selection: [selection, setSelection],
+      isFocused,
+      ...props
+    }: Props,
     ref: RefObject<TextInput>
   ) => {
     const { colors, mode } = useTheme()
@@ -69,9 +76,11 @@ const ComponentInput = forwardRef(
             minHeight:
               Platform.OS === 'ios' && multiline ? StyleConstants.Font.LineHeight.M * 5 : undefined
           }}
-          onChangeText={setValue}
-          onSelectionChange={({ nativeEvent: { selection } }) => (selectionRange = selection)}
           value={value}
+          onChangeText={setValue}
+          onFocus={() => (isFocused.current = true)}
+          onBlur={() => (isFocused.current = false)}
+          onSelectionChange={({ nativeEvent }) => setSelection(nativeEvent.selection)}
           {...(multiline && {
             multiline,
             numberOfLines: Platform.OS === 'android' ? 5 : undefined

src/screens/Tabs/Me/Profile/Fields.tsx

@@ -7,10 +7,9 @@ import { TabMeProfileStackScreenProps } from '@utils/navigation/navigators'
 import { useProfileMutation } from '@utils/queryHooks/profile'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { isEqual } from 'lodash'
 import React, { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, TextInput, View } from 'react-native'
+import { Alert, ScrollView } from 'react-native'
 import FlashMessage from 'react-native-flash-message'
 
 const Field: React.FC<{
@@ -25,23 +24,21 @@ const Field: React.FC<{
   const [name, setName] = useState(field?.name || '')
   const [value, setValue] = useState(field?.value || '')
   allProps[index * 2] = {
-    ref: useRef<TextInput>(null),
+    value: [name, setName],
-    value: name,
+    selection: useState({ start: name.length }),
-    setValue: setName,
+    isFocused: useRef<boolean>(false),
-    selectionRange: name ? { start: name.length, end: name.length } : { start: 0, end: 0 },
     maxLength: 255
   }
   allProps[index * 2 + 1] = {
-    ref: useRef<TextInput>(null),
+    value: [value, setValue],
-    value,
+    selection: useState({ start: value.length }),
-    setValue,
+    isFocused: useRef<boolean>(false),
-    selectionRange: value ? { start: value.length, end: value.length } : { start: 0, end: 0 },
     maxLength: 255
   }
 
   useEffect(() => {
     setDirty(dirty =>
-      dirty ? dirty : !isEqual(field?.name, name) || !isEqual(field?.value, value)
+      dirty ? dirty : (field?.name || '') !== name || (field?.value || '') !== value
     )
   }, [name, value])
 
@@ -130,11 +127,11 @@ const TabMeProfileFields: React.FC<
               data: Array.from(Array(4).keys())
                 .filter(
                   index =>
-                    allProps[index * 2]?.value.length || allProps[index * 2 + 1]?.value.length
+                    allProps[index * 2]?.value[0].length || allProps[index * 2 + 1]?.value[0].length
                 )
                 .map(index => ({
-                  name: allProps[index * 2].value,
+                  name: allProps[index * 2].value[0],
-                  value: allProps[index * 2 + 1].value
+                  value: allProps[index * 2 + 1].value[0]
                 }))
             }).then(() => {
               navigation.navigate('Tab-Me-Profile-Root')
@@ -147,7 +144,7 @@ const TabMeProfileFields: React.FC<
 
   return (
     <ComponentEmojis inputProps={allProps}>
-      <View style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
+      <ScrollView style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
         {Array.from(Array(4).keys()).map(index => (
           <Field
             key={index}
@@ -157,7 +154,7 @@ const TabMeProfileFields: React.FC<
             field={fields?.[index]}
           />
         ))}
-      </View>
+      </ScrollView>
     </ComponentEmojis>
   )
 }

src/screens/Tabs/Me/Profile/Name.tsx

@@ -8,7 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, TextInput, View } from 'react-native'
+import { Alert, ScrollView, TextInput } from 'react-native'
 import FlashMessage from 'react-native-flash-message'
 
 const TabMeProfileName: React.FC<
@@ -26,21 +26,20 @@ const TabMeProfileName: React.FC<
   const { t, i18n } = useTranslation('screenTabs')
   const { mutateAsync, status } = useProfileMutation()
 
-  const [displayName, setDisplayName] = useState(display_name)
+  const [value, setValue] = useState(display_name)
-  const displayNameProps: NonNullable<EmojisState['targetProps']> = {
+  const displayNameProps: NonNullable<EmojisState['inputProps'][0]> = {
+    value: [value, setValue],
+    selection: useState({ start: value.length }),
+    isFocused: useRef<boolean>(false),
     ref: useRef<TextInput>(null),
-    value: displayName,
-    setValue: setDisplayName,
-    selectionRange: displayName
-      ? { start: displayName.length, end: displayName.length }
-      : { start: 0, end: 0 },
     maxLength: 30
   }
+  console.log('true value', value)
 
   const [dirty, setDirty] = useState(false)
   useEffect(() => {
-    setDirty(display_name !== displayName)
+    setDirty(display_name !== value)
-  }, [displayName])
+  }, [value])
 
   useEffect(() => {
     navigation.setOptions({
@@ -84,7 +83,7 @@ const TabMeProfileName: React.FC<
                 failed: true
               },
               type: 'display_name',
-              data: displayName
+              data: value
             }).then(() => {
               navigation.navigate('Tab-Me-Profile-Root')
             })
@@ -92,11 +91,11 @@ const TabMeProfileName: React.FC<
         />
       )
     })
-  }, [theme, i18n.language, dirty, status, displayName])
+  }, [theme, i18n.language, dirty, status, value])
 
   return (
     <ComponentEmojis inputProps={[displayNameProps]} focusRef={displayNameProps.ref}>
-      <View style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
+      <ScrollView style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
         <ComponentInput
           {...displayNameProps}
           autoCapitalize='none'
@@ -104,7 +103,7 @@ const TabMeProfileName: React.FC<
           textContentType='username'
           autoCorrect={false}
         />
-      </View>
+      </ScrollView>
     </ComponentEmojis>
   )
 }

src/screens/Tabs/Me/Profile/Note.tsx

@@ -8,7 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, TextInput, View } from 'react-native'
+import { Alert, ScrollView, TextInput } from 'react-native'
 import FlashMessage from 'react-native-flash-message'
 
 const TabMeProfileNote: React.FC<
@@ -27,11 +27,11 @@ const TabMeProfileNote: React.FC<
   const { mutateAsync, status } = useProfileMutation()
 
   const [notes, setNotes] = useState(note)
-  const notesProps: NonNullable<EmojisState['targetProps']> = {
+  const notesProps: NonNullable<EmojisState['inputProps'][0]> = {
+    value: [notes, setNotes],
+    selection: useState({ start: notes.length }),
+    isFocused: useRef<boolean>(false),
     ref: useRef<TextInput>(null),
-    value: notes,
-    setValue: setNotes,
-    selectionRange: notes ? { start: notes.length, end: notes.length } : { start: 0, end: 0 },
     maxLength: 500
   }
 
@@ -94,9 +94,9 @@ const TabMeProfileNote: React.FC<
 
   return (
     <ComponentEmojis inputProps={[notesProps]} focusRef={notesProps.ref}>
-      <View style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
+      <ScrollView style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
         <ComponentInput {...notesProps} multiline />
-      </View>
+      </ScrollView>
     </ComponentEmojis>
   )
 }