I am newbie to react native with expo, I have created a functional component that tries to do things similar to the behavior of the TextInput of react-native-paper, with animations and so on.
The problem is I have several instances of this component on the same screen and when I press on the first one to write to it, the rest of them also get focused. And if I fill any text in the first one, the second one triggers the notifications without having been touched.
I am using formik, Yup and typescript.
This is how I call the component in the form:
...<ScrollView><FloatingLabelInput label="Ciudad" marginBottom={20} onChangeText={text => { formik.setFieldValue('city', text) }} value={formik.values.city} error={formik.errors.city} /><FloatingLabelInput label="Calle principal" marginBottom={20} onChangeText={text => { formik.setFieldValue('mainStreet', text) }} value={formik.values.mainStreet} error={formik.errors.mainStreet} /></ScrollView> ....The component definition:
...export default function FloatingLabelInput(props: FloatingLabelInputProps) { const { label, style, onChangeText, value, error, containerStyle, border } = props useEffect(() => { if (value === '') { resetViewTransition.start() resetLabelTransition.start() } }, [value]) const handleFocus = () => { animateViewTransition.start() animateLabelTransition.start() } const handleBlur = () => { if (value === '') { resetViewTransition.start() resetLabelTransition.start() } } const handleTextChange = (text: string) => { if (text.length > 0) { animateViewTransition.start() animateLabelTransition.start() } onChangeText && onChangeText(text) } return (<View style={styles(marginBottom).mainContainer}><Animated.View style={[styles().container, error ? styles().containerError : border !== undefined && { borderColor: viewAnimationBorderColor(border) }, containerStyle]}><Animated.Text style={[styles().labelStyle, { top: labelAnimationTop, fontSize: labelAnimationFontSize, color: labelAnimationColor }]}>{label}</Animated.Text> {secureTextEntry && <Icon name={passwordShown ? 'eye-outline' : 'eye-off-outline'} size={25} style={styles().eye} onPress={() => setPasswordShown(!passwordShown)} />}<TextInput selectionColor={error ? colors.fireEngineRed : border ? border : colors.nightRider} underlineColorAndroid="transparent" style={[styles().input, { color: error ? colors.fireEngineRed : border ? border : colors.nightRider }, style]} onChangeText={handleTextChange} value={value} onFocus={handleFocus} onBlur={handleBlur} keyboardType={defineKeyBoardType} maxLength={maxLength} secureTextEntry={secureTextEntry && !passwordShown} keyboardAppearance="dark" /></Animated.View> {error && (<HelperText type="error" style={styles().errorText}> {error}</HelperText> )}</View> )}