Unable to hide keyboard on iPhone

[a4abs]

I have been exploring different approaches to hide the keyboard on an iPhone or add a custom button to dismiss it, but so far, I haven't found an optimal solution. In React Native, we can achieve this using InputAccessoryView, but it doesn't seem to work effectively with a rich text editor.

Please share any potential solutions for this.

[blift]

Add some button to close keyboard, and call blurRichEditor

const blurRichEditor = () => {
  if (richText.current) {
     richText.current.blurContentEditor();
  }
};

<Button
  onPress={() => blurRichEditor()}
>
  <Text>Close keyboard</Text>
</Button>

[cassiocsantana]

It's a solution, but it doesn't end up being common. The interesting thing would be if the normal textInput event was emitted

[rachelcao277]

Discovered dispissKeyboard() in the source code to hide the keyboard, possibly using richText.current.dispissKeyboard() externally to hide the keyboard. you can trigger it through any event.

[willrcline]

I have a solution. The key here is PanResponder, which is configured to detect downward swipes across a particular location (similar functionality to IOS notes app). Also i'm varying the height of the container div based on whether the keyboard is visible.

const RichEditorWrapper = ({isKeyboardVisible, initialContentHTML, setCurrentText, currentText, richTextRef }) => {
  const viewHeight = isKeyboardVisible ? 280 : screenHeight - 180;

    let startTouchY = 0;
    const panResponder = useRef(
        PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onMoveShouldSetPanResponder: () => true,
            onPanResponderGrant: (evt) => {
                startTouchY = evt.nativeEvent.pageY;
            },
            onPanResponderMove: (evt, gestureState) => {
                // Logic during the dragging, can be used if needed
            },
            onPanResponderRelease: (evt, gestureState) => {
                const endTouchY = evt.nativeEvent.pageY;
                if (endTouchY > startTouchY && endTouchY > viewHeight - 47) {
                  richTextRef.current?.dismissKeyboard()
                }
            },
        })
    ).current;

    return (
      <ScrollView 
        {...panResponder.panHandlers}
        // keyboardDismissMode={true} 
        showsVerticalScrollIndicator={false}
        style={{}} 
      >
        <View style={{
          height: viewHeight,
        }}>
          <RichEditor
            ref={richTextRef}
            initialContentHTML={initialContentHTML}
            keyboardDismissMode={true} 
            showsVerticalScrollIndicator={false}
            useContainer={false}
            onChange={text => {
              // console.log(" EntryEditor RichEditorWrapper currentText___", text);
              setCurrentText(text);
            }}
            editorStyle={{
              backgroundColor: Colors.BLACK,
              color: Colors.WHITE,
              caretColor: Colors.WHITE,
            }}
          />
        </View>
      {/* If they touch obove here and drag their finger downward past the bottom edge of the above view, the keyboard should hide */}
      </ScrollView>
    )
  }

[Quy1e99]

using TouchableWithoutFeedback to call blurContentEditor when click outside is the only way now