I am trying to make a numericInput component and I was trying to refactor the below code by removing RNTextInput. i couldnot understand the part where it was using
React.forwardRef<RNTextInput, Props>((props, ref) => {const { onChangeText, ...rest } = props;
why do we pass ref?
`import React, { useCallback } from "react";import { TextInput as RNTextInput, StyleSheet, TextInputProps, View } from "react-native";import { BaseTextInput } from "src/components/atoms/BaseTextInput";import { colorsConst } from "src/styles/const/colorsConst";type Props = Omit<TextInputProps, "keyboardType" | "selectionColor" | "autoCapitalize"> & { disabled?: boolean;};export const NumericInput = React.memo( React.forwardRef<RNTextInput, Props>((props, ref) => { const { onChangeText, ...rest } = props; const onChanged = useCallback( (text: string) => { return onChangeText ? onChangeText(text.replace(/[^0-9]/g, "")) : undefined; }, [onChangeText], ); return (<View style={styles.container}><BaseTextInput ref={ref} style={[ styles.text, { ...(rest.disabled ? { color: colorsConst.DISABLED } : {}), }, ]} {...rest} keyboardType="number-pad" onChangeText={onChanged} /></View> ); }),);NumericInput.displayName = "NumericInput";const styles = StyleSheet.create({ container: { borderRadius: 5, borderWidth: 1, borderColor: colorsConst.DIVIDER, }, text: { width: "100%", fontSize: 14, paddingHorizontal: 18, },});`