Skip to content

RTL support not working as expected #131

@ajp8164

Description

@ajp8164

Describe the bug

I'd like to enter mins/secs from right to left. First digit entered should be LSD of seconds. Each subsequent digit entered enters as LSD secs and pushes all other digits to the left.

I supposed mask is '[00]:[00]' and isRTL=true. I've also set textAlign=right.

I'd expect the result in onChangedText() to have the 'formatted' value as follows.

When user types 2, it shows: 00:02
When user types 23, it shows: 00:23
When user types 2345, it shows: 23:45

Is this correct setup and expected behavior? Setting up for RTL doesn't seem to make a difference.

Code snippet

              <MaskedTextInput
                ref={ref}
                style={{textAlign: 'right'}}
                onChangeText={(a, b, c, d) => {
                  onChangeText(a, b, c, d);
                  console.log(a, b, c, d);
                }}
                isRTL={true}
                mask={'[00]:[00]'}
              />

Repo for reproducing
Seems straight-forward enough.

To Reproduce
Steps to reproduce the behavior:

Setup as above and enter text.

Expected behavior
I'd expect the result in onChangedText() to have the 'formatted' value as follows.

When user types 2, it shows: 00:02
When user types 23, it shows: 00:23
When user types 2345, it shows: 23:45

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

  • Desktop OS: MacOS
  • Device: Simulator
  • OS: iOS latest
  • RN version: 0.80
  • RN architecture: fabric
  • JS engine: Hermes
  • Library version: 1.4.3

Additional context
None

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions