🚀 - React Native support

[nsbarsukov]

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});

[wesleyguirra]

how to use with react-native?

[nsbarsukov]

how to use with react-native?

This issue is not solved yet