How I make this input in react native customable?

Question

I need a verification input and want to make it like in this picture:

I know how to make it but not customable. Maybe I want to make 4 or 5.

I can make it like this

const input2 = useRef();
const input3 = useRef();
const input4 = useRef();
const input5 = useRef();

<TextInput onChangeText={(e) => (setText(e), input2.focus() ) } />
<TextInput ref={(input) => { input2 = input } } />

But then its hardcoded. How can I make it customable ?

David Scholz · Accepted Answer · 2022-04-04 19:58:35Z

1

You could use react-native-confirmation-code-field which is highly customizable.

Here is a basic example using 4 inputs instead of 5. In fact, you can use any number of inputs.

const [value, setValue] = useState("")
  const ref = useBlurOnFulfill({ value, cellCount: 4 })
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  })
  return (
     <SafeAreaView style={{ margin: 40, marginTop: 80 }}>
      <CodeField
        ref={ref}
        {...props}
        // Use `caretHidden={false}` when users can't paste a text value, because context menu doesn't appear
        value={value}
        onChangeText={setValue}
        cellCount={4}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={({ index, symbol, isFocused }) => (
          <Text
            style={{
              width: 40,
              height: 40,
              lineHeight: 38,
              fontSize: 24,
              borderWidth: 2,
              borderColor: "#00000030",
              textAlign: "center",
            }}
            key={index}
            onLayout={getCellOnLayoutHandler(index)}>
            {symbol || (isFocused ? <Cursor /> : null)}
          </Text>
        )}
      />
    </SafeAreaView>

In general this component is very customizable. You can render your own input components, etc.

The above code yields the following very simple output. Designing the exact same component as given in your picture boils to designing a custom cell inside the render function.

answered Apr 4, 2022 at 19:58

David Scholz

10k14 gold badges24 silver badges42 bronze badges

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

2 Comments

universe11 Over a year ago

Can you tell me how I run a function when I wrote the last letter/number ?

David Scholz Over a year ago

You are setting the value itself with a single state in the onChangeText function, thus if the values length is equal to cellCount, then the last cell as been filled.

Collectives™ on Stack Overflow

How I make this input in react native customable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related