component is not defined while opened on web

Viewed 13

I have a component that work fine on android but it shows an error when I try to open it on the web using expo

Uncaught ReferenceError: TextInputMask is not defined at ./src/components/atoms/TextInputMask.js (TextInputMask.js:6:1)

Here is TextInputMask code that gives an error

import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
import { TextInput, Text } from "react-native-paper";
import { TextInputMask as TextInputMaskDefault } from "react-native-masked-text";

export default TextInputMask = React.forwardRef(
  (
    {
      label,
      placeholder,
      style,
      mode = "outlined",
      onChangeValue = () => {},
      type = "custom",
      options = {},
      value,
      icon,
      disabled,
      error,
      ...props
    },
    ref
  ) => {
    const [data, setData] = useState();
    const [maskValue, setMaskValue] = useState();
    useEffect(() => {
      if (value === null || value === undefined) {
        setMaskValue("");
        return;
      }
      if (value) {
        value = String(value);
        setMaskValue(value);
      }
    }, [value]);
    useEffect(() => {
      let rawValue = data?.getRawValue();
      onChangeValue(rawValue, maskValue);
    }, [maskValue]);
    return (
      <View style={style}>
        <View style={styles.viewInput}>
          <TextInput
            style={styles.textInput}
            label={label}
            placeholder={placeholder}
            mode={mode}
            autoCapitalize="none"
            autoCorrect={false}
            autoCompleteType="off"
            ref={ref}
            disabled={disabled}
            value={maskValue}
            error={error}
            render={(inputProps) => {
              return (
                <TextInputMaskDefault
                  {...inputProps}
                  type={type}
                  options={options}
                  onChangeText={(text) => setMaskValue(text)}
                  ref={(ref) => setData(ref)}
                />
              );
            }}
            {...props}
          />
          {icon ? (
            <Text style={styles.textInputIcon}>
              <TextInput.Icon
                name={icon}
                onPress={onPress}
                size={30}
                color={error ? Colors.red800 : null}
                disabled={disabled}
              />
            </Text>
          ) : null}
        </View>
      </View>
    );
  }
);

Any idea where the error might be? I wonder if there is a difference in creating component for android and web?

0 Answers
Related