Documentation - Using Factory on Text Input

[OfficialDarkComet]

Description

The documentation (on the website) for "Using ref" where the Factory function is used on a Text Input component needs to be changed.

The example works, BUT if you build upon it, you will run into all sorts of problems involving re-rending, focus issues, loss of state values, etc... I spent the past couple days trying to fix the problem.

If you are having focus lose problems and tried everything... move the Factory OUTSIDE your component function.

As soon as you make NBInput a controlled component you'll have all sorts of problems. Moving it outside Example( ) avoids the component from being re-created every time your state is updated.

Hopefully this helps and I hope to see the documentation adjusted to help others avoid having the same problems.

Thank you for your time and for reading this.

- Logan (a.k.a DarkComet)

Problem Statement

The change is needed for the documentation because it will causes major issues and consequences for those who follow and use them (for this particular example, otherwise documentation is amazing!)

Proposed Solution or API

const NBInput = Factory(TextInput)

This line in the example needs to be moved OUTSIDE the Example( ) function.

const NBInput = Factory(TextInput);

const Example = () => {
  const inputRef = React.useRef(null);
  return <Stack space={4}>
      <NBInput placeholder="Click on the button" ref={inputRef} p="2" borderWidth="1" borderColor="cyan.400" borderRadius="md" _dark={{
      color: "trueGray.200"
    }} />
      <Button colorScheme="emerald" onPress={() => {
      inputRef.current.focus();
    }}>
        Set Focus
      </Button>
    </Stack>;
};

Link: https://docs.nativebase.io/nativebase-factory

Alternatives

No response

Additional Information

Please don't take this as a criticism of Native base. Native base is fantastic and documention is stellar! Thank you for creating and maintaining such an amazing library!

[Krithikj20]

Hi @OfficialDarkComet, Thank you for bringing this to our notice. We will look into it.