Skip to content

Instantly share code, notes, and snippets.

@browniefed

browniefed/gist:36fa79536e24769f0b99282b939b90c6

Last active September 5, 2016 21:02
Show Gist options
  • Save browniefed/36fa79536e24769f0b99282b939b90c6 to your computer and use it in GitHub Desktop.
Save browniefed/36fa79536e24769f0b99282b939b90c6 to your computer and use it in GitHub Desktop.
Download ZIP
Text mask issues
Raw
gistfile1.md

RN mask link https://github.com/text-mask/text-mask/blob/reactNativeMasks/reactnative/src/reactNativeTextMask.js

The reason why text-mask is better than others is it doesn'y rely on onKeyUp or any key events. This makes it much more reliable on mobile devices w/ Samsung generally screwing events up w/ custom browser crap they build on top of chrome.

It only deals with previous value, next value, and cursor position.

Those are all typically accessible in onChange (sync) which allows us to make reliable updates for the value, as well as the new cursor position. In RN they are 2 separate calls. So it makes it a little more difficult as rather than onChange things need to be handled in onSelectionChange

However when we then control the selection value via setNativeProps we get called again.

Ideally in onChange, new value as well as new cursor position would be exposed.

A new call that combines them all is a little less than ideal since most people rely on onChange and onChangeText. As well as the potential to use preventDefault. However I haven't seen a prevelance of this on RN much.

@janicduplessis
Copy link

I think the issue you have also is that onChange gets called before onSelectionChange this is why you have to skip the next onSelectionChange event after updating in onChange.

onChange -> update to new selection -> onSelectionChange without the previous update because setNativeProps is async

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment