Cannot find children of React Native app's ScrollView and TouchableWithoutFeedback

Hi all,

I am designing a test suite for a React Native app. I had all my selectors working, but recently the developer wrapped the login screen with a <ScrollView> and <TouchableWithoutFeedback>. Now, when the app is run on an iOS simulator, I can only find XCUIElementTypeScrollView and one of its children XCUIElementTypeOther (probably the <TouchableWithoutFeedback> component wrapper. On the Appium inspector, it just shows up as one big component, with the XPath just ending where there used to be more. Is this a known issue with React Native apps? Do I have to tell the developer to change his code? Any suggestions would be great. Let me know if you need more code.

For reference, this is the React Native code:

      <ScrollView
        style={styles.scrollContainer}
        ref={ref => this.scrollView = ref}
        scrollEnabled={false}
        keyboardShouldPersistTaps={true}
      >
        <TouchableWithoutFeedback style={{flex: 1}} onPress={dismissKeyboard}>
          <View>
            {this._renderHeader()}

            <View style={styles.inputs}>
            <View accessibiltyLabel="emailLabel">
              <InputTextRow
                icon="user"
                returnTypeKey="next"
                placeholder="email"
                keyboardType="email-address"
                value={this.state.email}
                onChange={email=> this.setState({email})}
                onSubmitEditing={() => this.refs.passwordRow.refs.input.focus()}
              />
          </View>
          <View accessibiltyLabel="passwordLabel">
              <InputTextRow
                icon="key"
                ref='passwordRow'
                type="password"
                returnTypeKey="go"
                placeholder="password"
                value={this.state.password}
                onChange={password => this.setState({password})}
                onSubmitEditing={ this._handleLoginPress }
              />
            </View>

            <Button onPress={this._handleLoginPress} isActing={this.state.isActing}>LOG IN</Button>

          </View>
        </TouchableWithoutFeedback>
      </ScrollView>

Having the same issue too. Appium Inspector can’t find the child nodes inside the ListView. Would be great to know the solution for this.

Does someone find any solutions for it?

This is some sort of limitation on appium’s end. I had the same issue and have to ask developer to remove the scrollView.

It is possible to access these elements with the accessibility features. I.E. tabbing to the dropdown and then ‘arrow’ keying into the dropdown and stuff. It’s super annoying, but I was able to use a dropdown I was unable to access in the traditional ways(or even with the exact XPath through predicate or direct driver actions.)

For react it makes sense to switch to a webview context. It never worked properly in native context using standard accessibility features.

You could try to set the following property inside the parent component.

accessible={false}

This worked for me