I am building a react-native app, using expo#43.0.0 and I am testing on a device with iOS 15.1
I have two TextInputs for the login:
<TextInput
textContentType='username'
autoComplete={true}
autoCorrect={false}
value={email}
onChangeText={(input) => setEmail(input)}
/>
<TextInput
autoComplete={true}
textContentType='password'
secureTextEntry={true}
value={password}
onChangeText={(input) => setPassword(input)}
/>
Problem:
When I click into the TextInput for the username, the keyboard comes in. I now click the key icon for keychain and I can select credentials from the icloud-keychain. After selecting the credentials, the keyboard disappears again, but the two TextInputs remain empty. When I now click into one of the two TextInput Components, both are filled correctly.
Anyone ran into something similar or has a solution, that the both inputs are filled as soon as the credentials are selected, without clicking them again?
Thank you.
I had a similar issue in my app, input fields with keychain usage wouldn't show the value until I clicked on it again.
But the solution was had nothing to do with the input fields but the fact that the application changes state when you are in the keychain selection screen, this resulted in displaying my anti screen screenshot which when displayed updated the root of the component tree.
What generates the bug for me.
Hope it help
Related
I'm facing an issue on TextInput's contextMenuHidden on Android, IOS works well not showing the context menu though.
<TextInput style={styles.input} contextMenuHidden={true} />
I did tried the view component solution:
removeClippedSubviews={true}
However, the behaviour came back, after I delete the whole text input -> retype the text -> double tap (shows back context menu)
Not sure if anyone experienced this before, but need some advice/suggestion for Android case, must I create a custom native ui component instead?
I am developing a react-native app with multi-line TextInput fields.
The TextInputs are used as inputs but also to display the content, in display mode the TextInput is disabled (editable={false}).
I would like to let the user filling the form to overflow if needed and the user that reads the input (display mode) to be able to see the over-flowing text. I thought of using the scroll option but there are two problems with it:
It is also disabled when the TextInput is disabled
The request is to overflow the text because the form will eventually be printed.
The solution I applied was to create a <Text /> component and pass the input value there. Because in react-native <Text /> adjusts it's height to the height of the string it displays.
I have an application created by react-native which contains a modal raise from bottom. Now I'm tring to use appium to automate the application and in android it works fine. While in iOS, when I try to use appium inspector on the modal, it just get penetrated and return control below.
<Modal style={styles.bottomModal} isVisible={btmModal} backdropOpacity={0.3} onBackdropPress={this._closeBtmModal}>
<View style={styles.ways}>
<TouchableOpacity accessibilityLabel={IDS.MANUAL_NAV_CAMERA} testID={IDS.MANUAL_NAV_CAMERA} style={styles.line} onPress={() => this._navCamera()}>
<Image style={styles.scan} source={require('../../../resources/images/scan.png')} /><Text style={styles.lineTxt}>扫码绑定</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_TEXT} testid={IDS.MANUAL_ADD_TEXT} style={styles.line} onPress={this._navManualBindMfa}>
<Text style={styles.lineTxt}>手动输入</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_MODAL_CANCEL} testId={IDS.MANUAL_ADD_MODAL_CANCEL} style={[styles.line, styles.cancelline]} onPress={this._closeBtmModal}>
<Text style={styles.cancelTxt}>取消</Text>
</TouchableOpacity>
</View>
</Modal>
Try to get appium inspector working against this modal. Thanks for any suggestion in advance.
Possible strategies to try:
"setting accessible={false} on outer most layer makes child views accessible."
See https://github.com/appium/appium/issues/6517#issuecomment-298037046
If your modal has a transparent background the components behind may will still be marked as visible. I use an environment variable set in the build for testing with appium which removes the transparency option. This does mean that the build being tested is not identical to the normal build
React-Native 0.63
Desktop Appium 1.22.0
Appium Inspector 2022.1.2
In our project the obstacle was the element Pressable. Setting property accessible={false} to it fixed an ability for Appium to find elements on modal windows as well. <TouchableOpacity accessible={false}> also plays role for finding elements on screens.
I have to highlight that Appium Inspector's screenshot view still won't recognize elements, but its searching functionality ('id' for iOS) finds them.
Up until now, I was under the impression that if Appium Inspector does not render a component then it means it does not see it, therefore I won't be able to use it in tests.
As it turns out, its searching engine can still find such a component, and therefore we can use it in tests, although sometimes it requires adding additional props to certain components, like accessible={false} or a testID to a parent component.
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i.toString()}
console.log('Hi from React Native')
renderItem={({ item }) =>
<Text>
{`${item.name.first} ${item.name.last}`}
</Text>
}
/>
That's my function example of where I'm doing a console.log, but there's nothing showing up in the "Debug Console" of VSCode. I know everything is running and the component likely did mount as I am able to view my app on the Expo client app on my device. I am getting an error saying 'identified expected'.
I'm also not sure what a keyExtractor is doing here.
First off, you cannot use a console.log statement there, FlatList expects a list of props in that place. You may place your log statement in JavaScript code block.
Secondly, to use VSCode's debugger, you have to attach it to your packager first. Have you done that? You'll need a relevant VSCode extension. There's some help available here and here on how to do that; it's a separate issue. You can simply use Google Chrome as an alternative by enabling JS debugging from your app. (In your app, open the developer menu, then tap Debug JS Remotely. Then in the Google Chrome window that opens, right click > Inspect > Console).
Finally, renderItem is a FlatList prop which renders each individual item in your list. You can use to style or modify each item of your FlatList.
I don't know whether questions is understood or not. My problem I have a login screen and made validations for that if email.length === 0 now when I tap the submit button just showing an error message using setState.
Then Now, I want to show like a when I start to type the correct email address the error message is to disappear. In Android, we can handle this using android: visible or android: invisible property. But in react native I don't know how to solve this. Help me pls anyone.
If you show your message error like this
<Text> {this.state.msgError } <Text>
Then if you want to hide it when there is an email , you can simply put to the value of your state to an empty string :
this.setState({msgError:""});