How to pass props to forwardref

Question

I am using a forwardref to pass a library component into another library component. I need a way to also pass some props into the forwardref, such as text input label. I searched high and low and can't seem to find how to do this. When I check the props, they are not passed from parent (AutocompleteDropdown). What am I missing?

 const SelectorInput = forwardRef((props, ref) => {
    return (
      <TextInput
        {...props}
        ref={ref}
        label={props.label}
        mode={"outlined"}
        outlineColor={"#68c25a"}
        activeOutlineColor={"#68c25a"}
        style={styles.sheepTextInput}
        onSelectItem={(value) => setFieldValue(props.field, value.id)}
      />
    );
  });

<AutocompleteDropdown
         InputComponent={SelectorInput}
         ref={searchRef}
         label={"foobar"}
          dataSet={suggestionsList}
          {bunch of other props}
/>

I tried passing the forwardref as a function but it didn't work. I also tried passing it as a component with props but that didn't work either (got error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.)

score 0 · Answer 1 · answered Nov 01 '22 at 02:25

Nevermind. If anyone else is trying to use react-native-autocomplete-dropdown with react-native-paper, pass your forwardref textinput props into the AutocompleteDropdown's textinputprops prop like so:

textInputProps={{
               autoCorrect: false,
               autoCapitalize: "none",
               label: "foobar",
               style: {
                 backgroundColor: "transparent",
                 borderColor: "transparent",
                 color: "black",
               },
               selectionColor: "#68c25a",
             }}

How to pass props to forwardref

1 Answers1