Can't dismiss keyboard programmatically

[stesvis]

Once you focus on the RichEditor and the keyboard shows, I am unable to close it.

You should be able to automatically close the keyboard by tapping outside of the editor (same behavior of the TextInput) or by calling Keyboard.dismiss().

None of those approaches work. In Android you can use the hardware button to close it, but in iOS there is no way.

How do you dismiss the keyboard?? Basically it seems impossible to "blur" the control.

[sujathasperi2022]

Same issue here when screen open the keyboard comes and you can never dismiss it. If somebody has a solution please post here

[stulip]

 /**
   * Dismisses the active keyboard and removes focus.
   */
  dismissKeyboard: () => void;

[Jamal-ReachFirst]

solution?

[cassiocsantana]

Solution?

[Jamal-ReachFirst]

+1

[hssdiv]

original answer with touchable:

// I use this for iOS (on android you can close keyboard yourself)
const richText = useRef(null);

<TouchableWithoutFeedback
  disable={Platform.OS === 'android'}
  onPress={() => {
    richText.current?.blurContentEditor(); // or richText.current?.dismissKeyboard();
  }}
>
  <RichEditor
    ref={(r) => {
      richText.current = r;
    }}
  />
</TouchableWithoutFeedback>

Currently I'm not using this solution with touchablewithoutfeedback because I wanted it to work on android also but it doesn't work on all android phones: https://github.com/wxik/react-native-rich-editor/issues/124#issuecomment-756316041

now I use this:

const richText = useRef(null);
  const measureView = useRef<View>(null);

  const [scrollY, setScrollY] = useState(0); // needed your rich-text located inside scrollview
  const [measure, setMeasure] = useState(null);
  useEffect(() => {
    measureView.current?.measure((x, y, width, height, pageX, pageY) => {
      const location = {
        x,
        y,
        width,
        height,
        pageX,
        pageY,
      };
      setMeasure(location);
    });
  }, [measureView.current]);

  return (
    ... scrollview with onScroll={(e) => setScrollY(e.nativeEvent.contentOffset.y)}...
    <View
      onStartShouldSetResponder={(e) => {
        if (
          e.nativeEvent.pageX <= measure.pageX + measure.width &&
          e.nativeEvent.pageX >= measure.pageX &&
          e.nativeEvent.pageY  + scrollY <= measure.pageY + measure.height &&   // remove scrollY in both lines if you don't have vertical scrollview
          e.nativeEvent.pageY  + scrollY >= measure.pageY
        ) {
          // after testing, seems like manually calling focusContentEditor() isn't needed
          // richText.current?.focusContentEditor();
          return false;
        } else {
          richText.current?.blurContentEditor(); // or richText.current?.dismissKeyboard();
          return true;
        }
      }}
    >
      <View collapsable={false} ref={measureView}>
        <RichEditor
          ref={(r) => {
            richText.current = r;
          }}
        />
      </View>
    </View>
   ...
  );