React-Native Textinput is not clickable inside List.Accordion

Question

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.

Did you try to render without the ``````? Maybe that's the problem. — Gabriel Menezes da Silva, Apr 05 '23 at 20:23
To do this behavior of closing the keyboard you could use this lib [lib](https://github.com/APSL/react-native-keyboard-aware-scroll-view). It's very famous to meet this kind of requirement. — Gabriel Menezes da Silva, Apr 13 '23 at 17:17
The above code is the renderitem of a inside a . At the moment my main problem is that I can't reach the (it doesn't appear on the element inspector). I suspect the as the problem (because it is the last thing that appears in the element inspector) but don't know how to solve the issue. — simsinas, Apr 17 '23 at 07:26

simsinas · Accepted Answer · 2023-04-17T10:53:05.927

0

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.

edited Apr 17 '23 at 10:53

answered Apr 17 '23 at 09:58

simsinas

1
3

React-Native Textinput is not clickable inside List.Accordion

1 Answers1