React native typeScript and forwardRef in a functional component

Question

I'm in react native app an I use typeScript too. I have a functional component :

const Input: React.FunctionComponent<IInputProps> = ({
  inputStyle,
  placeHolderColor = EAppColors.DARK_GREY,
  placeHolder,
  value,
  onChangeText,
  autoFocus,
  onFocus,
  onBlur,
  onSubmitEditing,
  ref,
  keyboardType = EKeyboardType.DEFAULT,
}) => {
  return (
    <StyledInput
      testID="TextInputID"
      placeholderTextColor={placeHolderColor}
      placeholder={placeHolder}
    ...

I create some ref for different input before my render:

const firstNameRef = React.createRef<TextInput>();
    const lastNameRef = React.createRef<TextInput>();
    const birthDateRef = React.createRef<TextInput>();

and I use after this component in a class like that :

<StyledTextInput
                label={I18n.t('auth.heading.firstNameLabel')}
                errorText={errorText}
                ref={firstNameRef}
                autoFocus={true}
                placeHolder={I18n.t('auth.placeHolder.firstName')}
                isFocused={focusOnFirstFields}
                hasError={hasError}
                onFocus={() => this.setState({ focusOnFirstFields: true })}
                onBlur={() => this.setState({ focusOnFirstFields: false })}
                showClearButton={showFirstClearButton}
                value={firstName}
                onClearText={() => this.onClearText(1)}
                onChangeText={(value: string) =>
                  this.setState({
                    firstName: value,
                    disabled: false,
                    showFirstClearButton: true,
                  })
                }
                onSubmitEditing={() => {
               if (lastNameRef !== null && lastNameRef.current !== null) {
                     lastNameRef.current.focus();
                  }
                }}
                keyboardType={EKeyboardType.DEFAULT}
              />

But when I want to use onSubmitEditing for focus the next input, I have this error :

How can I resolve this issue ? Thank You!

Does this answer your question? How to use forwardRef with FunctionComponent in React Native using TypeScript — Fuze-Mcsea
– Fuze-Mcsea, Commented Apr 16, 2021 at 17:30
thank you @Fuze-Mcsea but no :( ps: I have edit my question would be more clear — E.D
– E.D, Commented Apr 19, 2021 at 12:01

jperl · Accepted Answer · 2021-04-19 12:42:49Z

3

Like this:

const FancyButton = React.forwardRef</* type of ref*/HTMLButtonElement, /* component props */ComponentProps>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>))

It will be correctly typed as

const FancyButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>

(You don't need to use React.FunctionComponent when using forwardRef).

const Input = React.forwardRef<TextInput, IInputProps>(({
  inputStyle,
  placeHolderColor = EAppColors.DARK_GREY,
  placeHolder,
  value,
  onChangeText,
  autoFocus,
  onFocus,
  onBlur,
  onSubmitEditing,
  keyboardType = EKeyboardType.DEFAULT,
}, ref /* <--- ref is passed here!!*/) => {
   // assuming this is a TextInput
  return (
    <StyledInput
      ref={ref}
      testID="TextInputID"
      placeholderTextColor={placeHolderColor}
      placeholder={placeHolder}
    ... 
})

edited Apr 19, 2021 at 12:42

answered Apr 16, 2021 at 17:42

jperl

5,2012 gold badges19 silver badges31 bronze badges

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

10 Comments

E.D Over a year ago

thank you @jperl I have edit my question would be more clear .... I have steel an error

jperl Over a year ago

@E.D I don't see forwardRef anywhere. That's what the error is telling you.

jperl Over a year ago

@E.D I have updated my answer. Let me know if you need further help.

E.D Over a year ago

I tried with your exemple but when with this code :

javascript const Input: React.forwardRef<TextInput, IInputProps> = ({   inputStyle,   placeHolderColor = EAppColors.DARK_GREY,   placeHolder,   value,   onChangeText,   autoFocus,   onFocus,   onBlur,   onSubmitEditing,   ref,   keyboardType = EKeyboardType.DEFAULT, }) => {   return (...

I have some erros with my props : Binding element 'placeHolder' implicitly has an 'any' type or Cannot find name 'ref'

jperl Over a year ago

You need to remove 'ref', it's passed a a second prop, have a look at the example.

|

Fuze-Mcsea · Accepted Answer · 2021-04-19 15:47:57Z

2

I faced a similar problem a few months ago. I solved it by doing:

   import {TextInputProps, TextInput} from 'react-native';

   type IProps = TextInputProps & {
      labelText?: string;
    };
    
    const TextInputStd: React.FC<IProps> = React.forwardRef(
      (
        {
          labelText,
          ...textInputProps
        }: IProps,
        ref: React.Ref<TextInput>,
      ) => {
        const {styles} = useStyles(_styles);
    
        return (
          <>
            <View style={[styles.textInputContainer, styles2.textInputContainer]}>
              <Text style={styles.labelText}>{labelText || ''}</Text>
              <View style={styles.inputWrapper}>
                <TextInput style={styles.input} {...textInputProps} ref={ref} />
              </View>
            </View>
          </>
        );
      },
    );

Hope this gives you an idea.

answered Apr 19, 2021 at 15:47

Fuze-Mcsea

916 bronze badges

1 Comment

E.D Over a year ago

Thank you for your response @Fuze-Mcsea I solved my issue with a precedent response in the same way ;)

Sam Petering · Accepted Answer · 2021-04-16 17:26:07Z

-2

not 100% sure what the question is here, but

<StyledInput
  ref={ref}
  testID="TextInputID"
  placeholderTextColor={placeHolderColor}
  placeholder={placeHolder}
  ...

should work, then you need to pass the ref in when calling this input.

answered Apr 16, 2021 at 17:26

Sam Petering

931 silver badge5 bronze badges

Collectives™ on Stack Overflow

React native typeScript and forwardRef in a functional component

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related