I am trying to locate the below highlighted meeting information. However in appium inspector all the elements are combined and shown in a single container.
Three elements highlighted in red has different test id's but when I try to inspect it shows all three as one element. Hence I am not able to interact with any specific element on iOS.
I can inspect the same three elements as different elements in android app. It works fine for android.
p.s - I have also tried to inspect elements using accessibility inspector. the result is the same.
The app is developed in react native for Android and iOS.
Appium desktop version- 1.18.0-2
code snippet-
<Card.Content>
<Title
accessibilityLabel="testID-meetingTitle"
testID="testID-meetingTitle"
>
{item.name}
</Title>
<Text
style={{ fontSize: 14, lineHeight: 20, color: "rgba(0,0,0,0.6)" }}
testID-meetingTitle
accessibilityLabel="testID-meetingInformation"
testID="testID-meetingInformation"
>
{item.date}
</Text>
</Card.Content>
Please let me know if there is any solution for the same..
You should NOT specify accessibilityLabel for ios
separate props for ios and android like so:
export default function testID(id) {
return Platform.OS === 'android'
? {
accessible : true,
accessibilityLabel: id,
}
: {
testID: id,
};
}
and then
<Text
{...otherProps}
{...testID('testID-meetingInformation')}
/>
Related
I have a screen with header and content, and in the content section I have a search and I want when I open the keyboard to raise all the view. I tried keyboardAvoidingView but it's not working for me. What I am doing wrong here ?
return (
<View style={styles.content}>
<View style={styles.header}>
...
</View>
<KeyboardAvoidingView
keyboardVerticalOffset={hp(30)}
style={{flex: 1}}
behavior="padding">
...
</KeyboardAvoidingView>
</View>
);
and for the styling:
header: {
height: hp(30),
width: wp(100),
},
container: {
flexGrow: 1,
backgroundColor: Colors.white,
// borderTopLeftRadius: wp(7),
// borderTopRightRadius: wp(7),
},
and here is how it looks
On Android, when you style the root View to flex:1, the application height will automatically reduce by the keyboard height when keyboard is shown.
And for using of KeyboardAvoidingView, this component should be put to an as high as possible level. Formally, you shouldn't place any sized component outside it to prevent some display problems. And to adapt this component, please make sure to check the compatibility both iOS and Android. It has different behavior on the two systems.
You could try setting the behavior to be platform specific like so:
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
// ...
</KeyboardAvoidingView>
It behaves slightly different on iOS and Android and this fixed my issues.
I've also seen react-native-keyboard-aware-scroll-view recommended on many posts regarding the same topic. It might be a more reliable thing to use according to other users but I haven't tried it.
I'm trying to make an app with React Native which shows a lot of information to the end user.
It's vital that the user can select/copy/paste the info from and to the app.
The selectable property of Text is quite useful since it uses the native android UI for selecting text.
My only problem is that if you select a part of the text (intentionally or accidentally), you can only deselect if you tap inside the Text component again.
That is, if I touch the screen anywhere else (where any other component would be, even its father), the text keeps being selected.
Take, for example, the "Hello World" in React Native Documentation, and just add the selectable property:
import React from 'react';
import { Text, View } from 'react-native';
export default function YourApp() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text selectable>
Try editing me! 🎉
</Text>
</View>
);
}
If you run it on android, you'll notice that you can indeed select and copy when you double tap (or long tap) as expected. But you won't be able to cancel the selection unless you tap on some part of the text again. If you touch any other part of the screen the selection UI won't go away.
Is there a way to achieve that? There are too many Text components in my app, with varying length and size. When users accidentally select something, a lot feel frustrated tapping away and nothing happening.
In this case I would use a TouchableWithoutFeedback component.
TouchableWithoutFeedback
Example from RN, where alert('Pressed!') is your function to remove selection.
function MyComponent(props) {
return (
<View {...props} style={{ flex: 1, backgroundColor: '#fff' }}>
<Text>My Component</Text>
</View>
);
}
<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
<MyComponent />
</TouchableWithoutFeedback>;
I cannot see the player, when mounting to my page:
return (
<YouTube
apiKey="xxx"
videoId={youtubeVideo} // The YouTube video ID
play={false} // control playback of video with true/false
fullscreen={false} // control whether the video should play in fullscreen or inline
loop={false} // control whether the video should loop when ended
onReady={e => console.log('ready')}
onChangeState={e => console.log('onchange')}
onChangeQuality={e => console.log('change quality')}
onError={e => console.log(e.error)}
style={{ alignSelf: "stretch", height: 300 }}
/>
);
I get console logs for the onReady callback but no video. How can I display my video?
Are there any better alternatives? Having looked into these two packages, react-native-youtube and react-native-vimeo. Both haven't been maintained for a while and have various issues.
What is the best way to embed video from youtube that fits guidelines for both Play and App Stores? With lots of video based apps on the Play stores, how does everyone else do it?
Is your YouTube component wrapped inside a parent view with flex ? I'm using the same package in my app and it seems to be working fine and this is pretty much how I've got it set up.
// Parent view (page container)
<View style={{ flex : 1 }}>
...
<Youtube
apiKey={API_KEY}
videoId={videoID}
style={{ marginTop : 15, height : 250, alignSelf : 'stretch' }} />
...
</View>
I'm trying to create a screen that looks like the attached picture. The styling code I used works only for iOS but doesn't work for Android.
The sample code with preview can be found here: https://snack.expo.io/#tushark/absolute-android
Please check for both iOS and android.
Here is the layout I want to create.
I've create a new Expo project from a sample code you give here: https://snack.expo.io/S1yDf4Q47
On the AbsoluteView Component add another View to handle the display screen:
<View style={styles.container}>
<View style={{borderColor:'transparent'}}> // add borderColor, or the screen looks weird on android (i don't know why)
{View of card, row, title and content styles}
</View>
<OrangeButton
label="CONFIRM"
onPress={() => console.log('Pressed')}
styleButton={styles.loginBtn}
/>
</View>
and the Button Component I change the Bottom: -20 to top: width / 3,
and the layout look's like :
Android :
iOS:
I would recommend leaving the orange button outside of the card container and using an absolute position with device height to position it, you can also do the same for the card container to give the button the same position relevant to the card container on any device.
ex.
top: Dimensions.get('window').height/8
I have the following react-native code which does exactly what I want because it prints a solid black rectangle:
getTable() {
const cell = {
backgroundColor:'black',
flex:1,
height:50,
};
const table = {
borderColor:'black',
borderLeftWidth:0,
borderRightWidth:0,
borderTopWidth:0,
borderBottomWidth:0,
width:'100%'};
return (
<View style={table}>
<View style={{flexDirection:"row"}}>
<View style={cell}></View>
<View style={cell}></View>
<View style={cell}></View>
</View>
</View>
);
}
However, when I change the table.borderLeftWidth to a value of 1, I see a white vertical line 66% from the left of the black box as depicted in this image:
Why does adding a border left to the container cause a white line to the interior content?
This issue happens in all iOS devices and all iOS simulated devices. It does not appear in Android. What am I doing wrong?
Based on the fact that this issue only occurs on iOS devices I'd suspect it's an issue with the iOS implementation. The react-native issue #2089 on GitHub seems to be similar to what you're encountering.
The issue lies in react-native's "implementation" of CSS on iOS devices (since it's not actually CSS) and that it's simply a rendering bug (probably with flexbox). I'd recommend that you post about your issue there and see if they can resolve it.