integrate into native text input

package.json

@@ -25,7 +25,7 @@
     "build:apk": "eas build -p android --profile dev-android-apk"
   },
   "dependencies": {
-    "@atproto/api": "^0.6.16",
+    "@atproto/api": "^0.6.17",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@emoji-mart/react": "^1.1.1",

src/view/com/composer/TagInput.tsx

@@ -6,7 +6,6 @@ import {
   NativeSyntheticEvent,
   TextInputKeyPressEventData,
   Pressable,
-  InteractionManager,
 } from 'react-native'
 import {
   FontAwesomeIcon,
@@ -72,28 +71,33 @@ export function TagInput({
     [onChangeTags, setTags],
   )
 
+  const onSubmitEditing = React.useCallback(() => {
+    const _tags = sanitize(value)
+
+    if (_tags.length > 0) {
+      handleChangeTags(uniq([...tags, ..._tags]).slice(0, max))
+    }
+
+    // TODO: this is a hack to get the input to clear on iOS
+    setTimeout(() => {
+      setValue('')
+      input.current?.focus()
+    }, 1) // only positive values work
+  }, [max, value, tags, setValue, handleChangeTags])
+
   const onKeyPress = React.useCallback(
     (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      if (e.nativeEvent.key === 'Enter' || e.nativeEvent.key === ' ') {
-        const _tags = sanitize(value)
-
-        if (_tags.length > 0) {
-          handleChangeTags(uniq([...tags, ..._tags]).slice(0, max))
-        }
-
-        InteractionManager.runAfterInteractions(() => {
-          setValue('')
-          input.current?.focus()
-        })
+      if (e.nativeEvent.key === ' ') {
+        onSubmitEditing()
       } else if (e.nativeEvent.key === 'Backspace' && value === '') {
         handleChangeTags(tags.slice(0, -1))
       }
     },
-    [max, value, tags, setValue, handleChangeTags],
+    [value, tags, onSubmitEditing, handleChangeTags],
   )
 
-  const onChangeText = React.useCallback((value: string) => {
-    setValue(value)
+  const onChangeText = React.useCallback((v: string) => {
+    setValue(v)
   }, [])
 
   const onBlur = React.useCallback(() => {
@@ -129,8 +133,10 @@ export function TagInput({
           ref={input}
           value={value}
           onKeyPress={onKeyPress}
+          onSubmitEditing={onSubmitEditing}
           onChangeText={onChangeText}
           onBlur={onBlur}
+          blurOnSubmit={false}
           style={[styles.input, pal.textLight]}
           placeholder="Add tags..."
           autoCapitalize="none"
@@ -162,5 +168,6 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 4,
+    overflow: 'hidden',
   },
 })

yarn.lock

@@ -47,10 +47,10 @@
     tlds "^1.234.0"
     typed-emitter "^2.1.0"
 
-"@atproto/api@^0.6.16":
-  version "0.6.16"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.16.tgz#0e5f259a8eb8af239b4e77bf70d7e770b33f4eeb"
-  integrity sha512-DpG994bdwk7NWJSb36Af+0+FRWMFZgzTcrK0rN2tvlsMh6wBF/RdErjHKuoL8wcogGzbI2yp8eOqsA00lyoisw==
+"@atproto/api@^0.6.17":
+  version "0.6.17"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.17.tgz#d0dfefe8584ab08f706f0e0f4a1d80ab89f63f45"
+  integrity sha512-ux2yDEPY5n+KVnyyXXjLMyWUQ1bFBmKhw99qH6S+bx7BhkVktOMJA4nlQZwcKt3DrMXpY1E+42npQEW8px05Bw==
   dependencies:
     "@atproto/common-web" "^0.2.0"
     "@atproto/lexicon" "^0.2.1"