TextInput with typing digits from right to left and adding zeroes automatically for money input

Question

I'm trying to implement TextInput with typing digits from right to left and adding zeroes automatically while user is typing. Any ideas how to implement this correctly?

The expected behavior should look like this.

What I have right now:

 constructor(props) {
    super(props);
    this.state = {
      payrate: '',
    };
  }

  handleTextChange = (text) => {
    const newAmount = parseFloat(text/100);
     this.setState({
       payrate: newAmount,
     })


 <TextInput
         autoFocus
         style={[styles.textInput]}
         value={payrate}
         placeholder="0.00"
         maxLength={9}
         keyboardType="numeric"
         placeholderTextColor="#adecf5"
         onChangeText={this.handleTextChange}
         underlineColorAndroid='rgba(0,0,0,0)'
         autoCapitalize="none"
         selection={{start: cursor, end: cursor}}
         />

I have customized the TextInput for USA Number format I think yes, this can be done. Please check my blog. https://medium.com/@maulikdhameliya/how-to-format-number-input-to-usa-phone-number-format-in-react-native-e68363b0c6e4 to make it from right, give textAlign right — Maulik Dhameliya, Sep 28 '18 at 11:13

score -1 · Answer 1 · answered Sep 27 '18 at 15:43

-1

We use react-native-masked-text for that, works decently. https://github.com/benhurott/react-native-masked-text/blob/master/README.md

answered Sep 27 '18 at 15:43

Cole

838
1
8
25

Is it possible to type text from right to left there? – Lucky_girl Sep 27 '18 at 16:10
this does't answer the question regarding typing right to left – George Salamanca May 18 '20 at 19:09
it's been awhile, but I believe the library I shared supports RTL. Also just checked the GH page and looks like the developer isn't supporting it anymore. – Cole May 26 '20 at 16:16

TextInput with typing digits from right to left and adding zeroes automatically for money input

1 Answers1

Linked