maskito
maskito copied to clipboard
🚀 - React Native support
Which package(s) are relevant/related to the feature request?
@maskito/react
Description
Problem
Investigate if it is possible to add React Native support.
The following code
import {TextInput, View} from 'react-native';
import {useMaskito} from "@maskito/react";
// ...
const options = {
mask: /^\d+$/,
}
export default function App() {
const maskedInputRef = useMaskito({options});
return (
<View style={styles.container}>
<TextInput ref={maskedInputRef}></TextInput>
</View>
);
}
throws
TypeError: e.querySelector is not a function (it is undefined)
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
Why?
In React Native el.querySelector
does not work!
Proposed solution
Try to create adapter for React Native. Something like:
class MaskitoReactNativeElement extends MaskitoElement {
constructor(host) {
this.host = host;
}
get value() {
return this.host.value || '';
}
set value(value) {
this.host.value = value;
}
get selectionStart() {
return this.host.selection?.start;
}
get selectionEnd() {
return this.host.selection?.end;
}
}
const elementPredicate = el => new MaskitoReactNativeElement(el);
const maskedInputRef = useMaskito({options, elementPredicate});