Registers callbacks for onBlur and onFocus events

[den-ii]

This PR enables users run functions, like style changes e.t.c, when the phone number input is on focus or blur state.

             <PhoneInput
                ref={phoneInput}
                layout="first"
                containerStyle={{
                  borderRadius: 10,
                  borderColor: Colors.black,
                  borderWidth: 1,
                }}
                onChangeText={(text) => {
                  setValue(text);
                }}
                onFocus={() => setContainerStyle("containerActive")}
                onBlur={() => setContainerStyle("container")}
                onChangeFormattedText={(text) => {
                  setFormattedValue(text);
                }}
                textContainerStyle={{
                  borderRadius: 10,
                }}
                textInputStyle={{
                  fontFamily: "Rubik_400Regular",
                  color: Colors.black,
                }}
                withShadow
                autoFocus
              /> 

[cjoshmartin]

@den-ii I also ran into the same problem but you can get an easier fix with spreading the textInputProps when they are deconstructed from the props:

  render() {
    const {
//...
      ...textInputProps
//...
    } = this.props;
//....

Because they are already getting passed as a whole thing to the text input. This will allow for any method that is supported by the text input to be supported on the phone field.

[thanhlucnguyen]

This works for me:

<PhoneInput
      ref={phoneInput}
      textInputProps={{
        // @ts-ignore
        ref: {phoneNumberText},
        onFocus: handleInputFocus,
        onBlur: handleInputBlur,
      }}
     layout="first"
      ...
    />