As I work on developing a numericInput component, my goal is to streamline the code by eliminating RNTextInput. The part that confuses me is how it utilizes
React.forwardRef<RNTextInput, Props>((props, ref) => {
const { onChangeText, ...rest } = props;
What is the purpose of passing 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,
},
});