I'm creating a mobile app with React-Native that has a screen with many Textinput - fields. After I upgraded from RN 0.63.2 to 0.71.4 (including package updates) I can't click on the input fields anymore (Textinput is not focused and Keyboard doesn't appear) but the textinput field is visible. If I open element inspector and click on the input field it only shows me the View above the Textinput. I also have another screen with Textinput which still works.
This is an example of my code:
<TouchableWithoutFeedback
onPress={() => {
setEnableAutomaticScroll(false);
Keyboard.dismiss();
}}>
<View style={stylesList.renderItem}>
<List.Section style={stylesList.listSection}>
{Boolean(renderItem?.onlyHeader) ? (
<List.Subheader style={stylesList.subheader}>{renderItem?.group}</List.Subheader>
) : (
<List.Accordion
expanded={renderItem?.expanded}
chevron={false}
onPress={async () => await closeOthersAccordions()}
style={stylesList.listAccordion}
left={() => (
<View onPress={async () => await closeOthersAccordions()}>
<Controller
control={control}
render={({ field: { onChange, onBlur, value } }) => (
<TextInput
returnKeyType='done'
selectTextOnFocus={!renderItem?.editable}
onTouchStart={async () => {
if (!renderItem?.editable) setEnableAutomaticScroll(false);
else setEnableAutomaticScroll(true);
await closeOthersAccordions();
}}
ref={textInputRef}
keyboardType={Platform.OS == 'android' ? 'phone-pad' : 'numbers-and-punctuation'}
label={showPlaceholder && !renderItem?.Value ? '' : LabelText}
multiline
adjustsFontSizeToFit
placeholder={placeholder}
error={error || errorNaN}
dense
style={stylesList.textInput}
defaultValue={renderItem?.Value?.toString()?.replace('.', ',')}
onFocus={async () => {
setEnableAutomaticScroll(true);
await closeOthersAccordions();
}}
editable={renderItem?.editable}
onEndEditing={async (e) => {
console.log("onEndEditing);
}}
onSubmitEditing={async (e) => {
console.log("onSubmitEditing);
}}
onChangeText={async (value) => {
console.log("onChangeText);
}
}}></TextInput>
)}
name={renderItem?.valueName}
rules={{
required: true,
min: {
value: renderItem?.minValue,
message: 'error message',
},
}}
defaultValue={renderItem?.Value?.toString()?.replace('.', ',')}
/>
{error && <Text style={stylesList.error}>{requiredText}</Text>}
{errorNaN && <Text style={stylesList.error}>{errorIsNaNText}</Text>}
</View>
)}>
<View style={stylesList.listItemsContainer}>
[...]
</View>
</List.Accordion>
)}
</List.Section>
</View>
</TouchableWithoutFeedback>
I already searched on google for a couple of hours but didn't find any solution that fits my problem. Avoiding the element before the didn't change anything.
Editing the react-native-paper package (v5.6.0) worked for me. I changed the property 'pointerEvents' from 'none' to 'box-none' in file node_modules\react-native-paper\src\components\List\ListAccordion.tsx.