fix: ref type

example/src/App.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
 import { MaskedTextInput } from 'react-native-advanced-input-mask';
 
 const alphaNumericChars =
@@ -15,17 +15,22 @@ const charAlphaNumerics = [
 ];
 
 export default function App() {
+  const inputRef = React.useRef<TextInput>(null);
+
   const [textState, setTextState] = React.useState({
     extracted: '',
     formatted: '',
   });
 
   const [focused, setFocused] = React.useState(false);
 
-  const onChangeText = React.useCallback((formatted, extracted) => {
-    console.log('extracted:', extracted, 'formatted:', formatted);
-    setTextState({ extracted, formatted });
-  }, []);
+  const onChangeText = React.useCallback(
+    (formatted: string, extracted: string) => {
+      console.log('extracted:', extracted, 'formatted:', formatted);
+      setTextState({ extracted, formatted });
+    },
+    []
+  );
 
   const onFocus = React.useCallback((e) => {
     console.log(e.nativeEvent);
@@ -38,12 +43,17 @@ export default function App() {
     setTextState({ extracted: '', formatted: '' });
   }, []);
 
+  const onFocusButtonPress = React.useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <View style={styles.container}>
       <Text>extracted value {textState.extracted}</Text>
       <Text>formatted value {textState.formatted}</Text>
       <Text>focused {focused ? 'Yes' : 'No'}</Text>
       <MaskedTextInput
+        ref={inputRef}
         defaultValue=""
         value={textState.formatted}
         onFocus={onFocus}
@@ -59,6 +69,7 @@ export default function App() {
         customNotations={charAlphaNumerics}
       />
       <Button title="Clear text" onPress={clearText} />
+      <Button title="Focus text input" onPress={onFocusButtonPress} />
     </View>
   );
 }

src/views/MaskedTextInput/index.tsx

@@ -14,62 +14,59 @@ const styles = StyleSheet.create({
   },
 });
 
-const MaskedTextInput = memo<MaskedTextInputProps>(
-  forwardRef<TextInput, MaskedTextInputProps>(
-    (
-      {
-        affinityCalculationStrategy,
-        affinityFormat,
-        allowSuggestions,
-        autocomplete,
-        autocompleteOnFocus,
-        autoSkip,
-        customNotations,
-        customTransformation,
-        defaultValue,
-        isRTL,
-        mask,
-        autoCapitalize = 'words',
-        value,
-        onChangeText,
-        onTailPlaceholderChange,
-        ...rest
-      },
-      ref
-    ) => {
-      const IS_FABRIC = 'nativeFabricUIManager' in global;
+const MaskedTextInput = forwardRef<TextInput, MaskedTextInputProps>(
+  (
+    {
+      affinityCalculationStrategy,
+      affinityFormat,
+      allowSuggestions,
+      autocomplete,
+      autocompleteOnFocus,
+      autoSkip,
+      customNotations,
+      customTransformation,
+      defaultValue,
+      isRTL,
+      mask,
+      autoCapitalize = 'words',
+      value,
+      onChangeText,
+      onTailPlaceholderChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const IS_FABRIC = 'nativeFabricUIManager' in global;
 
-      const onAdvancedMaskTextChangeCallback = useCallback(
-        ({ nativeEvent: { extracted, formatted, tailPlaceholder } }) => {
-          onChangeText?.(formatted, extracted);
-          onTailPlaceholderChange?.(tailPlaceholder);
-        },
-        [onChangeText, onTailPlaceholderChange]
-      );
+    const onAdvancedMaskTextChangeCallback = useCallback(
+      ({ nativeEvent: { extracted, formatted, tailPlaceholder } }) => {
+        onChangeText?.(formatted, extracted);
+        onTailPlaceholderChange?.(tailPlaceholder);
+      },
+      [onChangeText, onTailPlaceholderChange]
+    );
 
-      return (
-        <>
-          <TextInput {...rest} autoCapitalize={autoCapitalize} ref={ref} />
-          <MaskedTextInputDecoratorView
-            affinityCalculationStrategy={affinityCalculationStrategy}
-            affinityFormat={affinityFormat}
-            allowSuggestions={allowSuggestions}
-            autocomplete={autocomplete}
-            autocompleteOnFocus={autocompleteOnFocus}
-            autoSkip={autoSkip}
-            customNotations={customNotations}
-            customTransformation={customTransformation}
-            defaultValue={defaultValue}
-            isRTL={isRTL}
-            onAdvancedMaskTextChange={onAdvancedMaskTextChangeCallback}
-            primaryMaskFormat={mask}
-            style={IS_FABRIC ? styles.farAway : styles.displayNone}
-            value={value}
-          />
-        </>
-      );
-    }
-  )
+    return (
+      <>
+        <TextInput {...rest} autoCapitalize={autoCapitalize} ref={ref} />
+        <MaskedTextInputDecoratorView
+          affinityCalculationStrategy={affinityCalculationStrategy}
+          affinityFormat={affinityFormat}
+          allowSuggestions={allowSuggestions}
+          autocomplete={autocomplete}
+          autocompleteOnFocus={autocompleteOnFocus}
+          autoSkip={autoSkip}
+          customNotations={customNotations}
+          customTransformation={customTransformation}
+          defaultValue={defaultValue}
+          isRTL={isRTL}
+          onAdvancedMaskTextChange={onAdvancedMaskTextChangeCallback}
+          primaryMaskFormat={mask}
+          style={IS_FABRIC ? styles.farAway : styles.displayNone}
+          value={value}
+        />
+      </>
+    );
+  }
 );
-
-export default MaskedTextInput;
+export default memo(MaskedTextInput);