Why does my keyboard get dismissed at each keystroke when I extract a View with a TextInput to a function, but not when I return it directly? - react-native

Question

I created a FormInput component which encapsulates a View with a TextInput:
<FormInput inputType="text" title={translate("Exam Name")} value={name} setValue={setName} ref={examNameRef} required />
Inside FormInput I do the following:
if (inputType === 'text') {
// return (
// <View style={[styles.button, { height: 90 }]} >
// <View style={{ flexDirection: 'row' }}>
// <Text style={[styles.fieldLabel, {}]}>{title}</Text>
// {required && <Text style={{ color: 'red' }}>{' *'}</Text>}
// </View>
// <View>
// {requiredValidationError ?
// <Text style={[styles.fieldValue, { borderColor: 'red', color: 'red' }]}>{'Campo Obrigatório'}</Text>
// :
// <TextInput style={[styles.fieldValue]} value={value} onChangeText={setValue} />
// }
// </View>
// </View>
// )
return <InputText />
The function InputText has the same code as the commented code above:
function InputText() {
return (
<View style={[styles.button, { height: 90 }]} >
<View style={{ flexDirection: 'row' }}>
<Text style={[styles.fieldLabel, {}]}>{title}</Text>
{required && <Text style={{ color: 'red' }}>{' *'}</Text>}
</View>
<View>
{requiredValidationError ?
<Text style={[styles.fieldValue, { borderColor: 'red', color: 'red' }]}>{'Campo Obrigatório'}</Text>
:
<TextInput style={[styles.fieldValue]} value={value} onChangeText={setValue} />
}
</View>
</View>
)
}
When I use it like this my keyboard keeps getting dismissed at every key stroke,but when I uncomment the commented part above and return the View directly instead of putting it inside a function this bug doesn't happen. What could be the problem?
Here's the whoe FormInput.js:
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Text, Pressable, View, TextInput, SafeAreaView, TouchableOpacity, Platform, ActivityIndicator, StyleSheet, Switch } from 'react-native';
import { useNavigation, useRoute, useTheme } from '#react-navigation/native';
import { translate } from '../../translate';
import Page from '../../components/Page';
import Picker from '../../components/Picker';
import Modal from '../../components/Modal';
import Button from '../../components/Button';
import DateTimePicker from '#react-native-community/datetimepicker';
import Toast from 'react-native-simple-toast';
import moment from 'moment';
import Icon from 'react-native-vector-icons/Ionicons';
Icon.loadFont();
const FormInput = forwardRef(({ inputType, title, value, setValue, required, maxLength }, ref) => {
const [modalVisible, setModalVisible] = useState(false);
const [internalValue, setInternalValue] = useState(value);
const [dateTimePickerMode, setDateTimePickerMode] = useState("date");
const [date, setDate] = useState(new Date());
const [requiredValidationError, setRequiredValidationError] = useState(false);
const inputRef = useRef();
useImperativeHandle(ref, () => ({
validate() {
if (required) {
if (internalValue) {
setRequiredValidationError(false)
} else {
setRequiredValidationError(true)
}
}
},
error: requiredValidationError
}));
const onChangeDate = (event, newDate) => {
if (event.type === "dismissed") {
setDateTimePickerMode("date")
setModalVisible(false);
return;
}
const dateWithTime = new Date(date);
if (dateTimePickerMode === 'date') {
setModalVisible(true);
setDate(newDate || new Date());
setDateTimePickerMode('time');
} else {
setModalVisible(false);
dateWithTime.setHours(newDate.getHours());
dateWithTime.setMinutes(newDate.getMinutes());
setDateTimePickerMode('date');
setValue(dateWithTime);
}
}
function InputSwitch() {
return (
<View style={[styles.button, { paddingRight: 15 }]} >
<Text style={[styles.fieldLabel, { marginBottom: 10 }]}>{title}</Text>
<View style={{ marginRight: 30 }}>
<Switch
style={{ transform: [{ scaleX: Platform.select({ ios: 0.8, android: 1.3 }) }, { scaleY: Platform.select({ ios: 0.8, android: 1.3 }) }] }}
thumbColor={"#f4f3f4"}
onValueChange={setValue}
value={value}
/>
</View>
</View>
)
}
function InputText() {
return (
<View style={[styles.button, { height: 90 }]} >
<View style={{ flexDirection: 'row' }}>
<Text style={[styles.fieldLabel, {}]}>{title}</Text>
{required && <Text style={{ color: 'red' }}>{' *'}</Text>}
</View>
<View>
{requiredValidationError ?
<Text style={[styles.fieldValue, { borderColor: 'red', color: 'red' }]}>{'Campo Obrigatório'}</Text>
:
<TextInput style={[styles.fieldValue]} value={value} onChangeText={setValue} />
}
</View>
</View>
)
}
function InputNumber() {
return (
<View style={[styles.button, { height: 90 }]} >
<View style={{ flexDirection: 'row' }}>
<Text style={[styles.fieldLabel, {}]}>{title}</Text>
{required && <Text style={{ color: 'red' }}>{' *'}</Text>}
</View>
<View>
<Text style={[styles.fieldValue, { borderColor: requiredValidationError ? 'red' : 'grey', color: requiredValidationError ? 'red' : 'grey' }]}>{requiredValidationError ? 'Campo Obrigatório' : value}</Text>
</View>
</View>
)
}
function InputDate() {
return (
<View>
{inputType === 'date' && modalVisible && (
<DateTimePicker
testID="dateTimePicker"
value={internalValue ? new Date(internalValue) : new Date()}
is24Hour={true}
mode={dateTimePickerMode}
onChange={onChangeDate}
/>
)}
<Pressable style={[styles.button, { height: 90 }]} onPress={() => setModalVisible(true)} >
<View style={{ flexDirection: 'row' }}>
<Text style={[styles.fieldLabel, {}]}>{title}</Text>
{required && <Text style={{ color: 'red' }}>{' *'}</Text>}
</View>
<Text style={styles.fieldValue}>{value ? moment(value).format('DD/MM/yyyy HH:mm') : ''}</Text>
</Pressable>
</View>
)
}
if (inputType === 'text') {
// return (
// <View style={[styles.button, { height: 90 }]} >
// <View style={{ flexDirection: 'row' }}>
// <Text style={[styles.fieldLabel, {}]}>{title}</Text>
// {required && <Text style={{ color: 'red' }}>{' *'}</Text>}
// </View>
// <View>
// {requiredValidationError ?
// <Text style={[styles.fieldValue, { borderColor: 'red', color: 'red' }]}>{'Campo Obrigatório'}</Text>
// :
// <TextInput style={[styles.fieldValue]} value={value} onChangeText={setValue} />
// }
// </View>
// </View>
// )
return <InputText />
} else if (inputType === 'number') {
return <InputNumber />
} else if (inputType === 'switch') {
return <InputSwitch />
} else if (inputType === 'date') {
return <InputDate />
} else {
return <Text style={{ backgroundColor: 'orange', textAlign: 'center', padding: 10, margin: 10 }}>Input do tipo {inputType} não está implementado</Text>
}
})
const styles = StyleSheet.create({
container: {
backgroundColor: '#A7A6A6',
marginBottom: 100
},
header: {
backgroundColor: '#FF000010',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: Platform.select({ ios: 10, android: 10 })
},
title: {
flex: 1,
fontSize: 32,
color: '#626262',
fontWeight: 'bold',
backgroundColor: '#00FF0010',
},
modalView: {
marginVertical: 230,
marginHorizontal: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
padding: 5
},
fieldLabel: {
color: "grey",
fontWeight: "bold",
textAlign: "left"
},
fieldValue: {
color: "black",
textAlign: "right",
borderBottomWidth: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 5,
textAlign: 'right',
borderColor: 'grey',
},
modalText: {
marginBottom: 15,
textAlign: "center"
},
textInput: {
borderWidth: 0,
paddingHorizontal: 20,
fontSize: 16,
marginBottom: 4,
color: '#626262',
borderRadius: 0,
borderBottomWidth: 1,
borderColor: '#626262',
width: 300,
textAlign: 'center'
},
});
export default FormInput;
And the return of the parent component:
return (
<>
<Page type="static" title={'Avaliação'} subtitle={'Editar'}>
<ScrollView style={{ flexGrow: 0.8, paddingHorizontal: 5}} keyboardShouldPersistTaps="always">
<FormInput inputType="text" title={translate("Exam Name")} value={name} setValue={setName} ref={examNameRef} required />
<FormInput inputType="text" title={translate("Code")} value={code} setValue={setCode} maxLength={8} ref={examCodeRef} required />
<FormInput inputType="number" title={translate("Max Grade")} value={maxGrade} setValue={setMaxGrade} />
<FormInput inputType="number" title={translate("Weight")} value={weight} setValue={setWeight} ref={examWeightRef} required />
<FormInput inputType="date" title={translate("Start Date")} value={startDate} setValue={setStartDate} />
<FormInput inputType="date" title={translate("End Date")} value={endDate} setValue={setEndDate} />
<FormInput inputType="switch" title={translate("Ignore Formula")} value={ignoreFormula} setValue={setIgnoreFormula} />
</ScrollView>
</Page>
<View style={{}}>
<Button style={[styles.button, {}]} textStyle={styles.buttonText} title={translate('Save')} onPress={() => saveExam()} requestFeedback />
</View>
</>
);