-
Notifications
You must be signed in to change notification settings - Fork 7
Description
React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Memory: 1.07 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
Description:
I am currently using Formik with react-text-mask-hoc to do a phone number masked input. It works perfectly fine on Android however on IOS the cursor goes the wrong character after passing the masked characters.
As shown in the GIF after entering 868 the cursor jumps back to the second position.
This is my set-up
import { TextMask, TextInputAdapter } from 'react-text-mask-hoc/ReactNative';
<TextMask
Component={TextInputAdapter}
guide={false}
mask={[/[1-9]/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
maxLength={12}
keyboardType={keyboardType}
value={value}
onChange={this.handleChange}
onBlur={this.handleTouch}
error={error}
showMask
style={styles.FieldInput}
/>