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>
