How to make a custom text input for password in React Native?

Question

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.

hong developer · Accepted Answer · 2019-08-14 08:59:12Z

3

You can use the modules you have without making them.

You can use react-native-pin-view

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 }}
          />

answered Aug 14, 2019 at 8:59

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

How to make a custom text input for password in React Native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related