Blurring text input

[pauljakobwhite]

Hello, I've tried going about this in many different ways but I can't seem to get the inner text input to give up focus (i.e. blur). It is causing issues interacting with touchables in the screen and is not being fixed by applying akeyboardShouldPersistTaps="always||handled" anywere, is there something I'm missing or is this a bug? Example below:

<KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <PhoneInput
        ref={phoneInput}
        defaultValue={phoneNumber}
        defaultCode={countryCode}
        onChangeText={(text) => {
          setPhoneNumber(text);
        }}
        onChangeFormattedText={(text) => {
          setFormattedPhoneNumber(text);
        }}
        textInputProps={{
          selectionColor: "#FF6376",
          keyboardType: "phone-pad",
        }}
        {...}
      />
      <TouchableOpacity>
        onPress={() =>
          handleSignIn(phoneInput.current?.isValidNumber(phoneNumber))
        }
             <....>
      </TouchableOpacity>
    </KeyboardAvoidingView>

Thanks!

[clairestolp]

I also have need of the TextInput methods to call focus after completing a previous field. It would be really helpful to expose them so they could be accessed through a ref.

[andrewjmathers]

Unsure if I understand this problem right, but if you want to dismiss the keyboard by triggering blur event, you can use react-native Keyboard object to trigger dismiss() when needed. Usecase demonstrated in this article https://reactnative.dev/docs/keyboardavoidingview

[tanushreeShelare]

selectionColor: "#FF6376", is your selectionColor working?

[DarkcoderSe]

As @andrewjmathers said earlier, Keyboard.dismiss() can remove the focus from the phone number text input field.