Ad

How To Make A Custom Text Input For Password In React Native?

enter image description here

How can I go about making a TextInput of password type like this in React Native? I want the input to turn into a black circle only like the default type, but I want it to customize according to my padding between each input.

Ad

Answer

You can use the modules you have without making them.

You can use react-native-pin-view

pinview.gif

The way I'm using it

import PinView from "react-native-pin-view";
...
          <PinView
            onComplete={this.onFinishCheckingCode.bind(this)}
            pinLength={4}
            inputBgColor="#888888"
            inputActiveBgColor="#ffd90d"
            buttonBgColor="#ffffff"
            buttonTextColor="black"
            keyboardViewStyle={{
              borderColor: "#dfdfdf",
              borderWidth: 1,
              width: windowHeight / 11,
              height: windowHeight / 11
            }}
            inputViewStyle={{ width: 18, height: 18, marginRight: 20 }}
          />
Ad
source: stackoverflow.com
Ad