React Native: onFocus and onBlur for custom inputs

Question

in my react native project I`ve created a custom input component, let's call it "CustomInput". This just returns a standard .

const CustomInput = (props) => {
  return (
    <TextInput
      style={{
        backgroundColor: "white",
        padding: 10,
        borderWidth: 1,
        borderColor: "#eee",
        borderRadius: 2,
        marginBottom: 12,
      }}
      placeholder={props.placeholder}
      value={props.value}
    ></TextInput>
  );
};

I want to call it in a parent component, like:

<CustomInput
  placeholder="Family Name"
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
/>;

How can I dynamically use the onFocus() and onBlur() method to highlight them when the user-focused it?

If I don't use a custom input I can do it like that:

<TextInput
  ref={(input) => {
    this.inputFullName = input;
  }}
  style={styles.loginTextInput}
  placeholder="Fullname"
  value={this.state.fullName}
  onChangeText={(text) => this.setState({ fullName: text })}
  onFocus={() => this.focusedInput(this.inputFullName)}
  onBlur={() => this.blurInput(this.inputFullName)}
/>;

focusedInput = (inputField) => {
  inputField.setNativeProps({
    style: { borderColor: "#4094ec" },
  });
};

How about forwarding the ref of TextInput in your custom component? It enables you to use ref of TextInput In the parent of your custom component? Watch this doc. <en.reactjs.org/docs/forwarding-refs.html> — Hyeonseo Kim
– Hyeonseo Kim, Commented Oct 12, 2021 at 7:36

ridvanaltun · Accepted Answer · 2021-10-13 06:03:57Z

1

The solution is a mix-up, between forwarding the ref and passing the function:

const CustomInput = React.forwardRef((props, ref) => (
  <TextInput
    ref={ref}
    style={{
      backgroundColor: "white",
      padding: 10,
      borderWidth: 1,
      borderColor: "#eee",
      borderRadius: 2,
      marginBottom: 12,
    }}
    onChangeText={props.onChangeText}
    placeholder={props.placeholder}
    value={props.value}
    onFocus={props.onFocus}
    onBlur={props.onBlur}
  ></TextInput>
));

Call in the parent component:

<CustomInput
  ref={(input) => {
    this.inputLastName = input;
  }}
  placeholder={i18n.t("enterLastName")}
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
  onFocus={() => this.focusedInput(this.inputLastName)}
  onBlur={() => this.blurInput(this.inputLastName)}
/>;

edited Oct 13, 2021 at 6:03

ridvanaltun

3,0902 gold badges21 silver badges32 bronze badges

answered Oct 12, 2021 at 8:28

Kaukau

215 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ridvanaltun · Accepted Answer · 2021-10-12 12:52:02Z

0

You can add them in props:

const CustomInput = (props) => {
  return (
    <TextInput
      style={{
        backgroundColor: "white",
        padding: 10,
        borderWidth: 1,
        borderColor: "#eee",
        borderRadius: 2,
        marginBottom: 12,
      }}
      placeholder={props.placeholder}
      value={props.value}
      onFocus={() => props.onFocus()}
      onBlur={() => props.onBlur()}
    ></TextInput>
  );
};

And call it like:

<CustomInput
  placeholder="Family Name"
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
  onFocus={() => yourFunctionForOnFocus()}
  onBlur={() => yourFunctionForOnBlur()}
/>;

edited Oct 12, 2021 at 12:52

ridvanaltun

3,0902 gold badges21 silver badges32 bronze badges

answered Oct 12, 2021 at 7:37

poPaTheGuru

1,1301 gold badge20 silver badges43 bronze badges

1 Comment

Kaukau Over a year ago

Yes you can. But then you are missing the the reference of the choosen inputField. This would work online with one field, but not if you have it more than once -> it would always highlight the last one rendered...

Collectives™ on Stack Overflow

React Native: onFocus and onBlur for custom inputs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related