Is ReactNative's accessibilityLabel and iOS Label retrieved using iOS Accessibility Inspector one & the same?
Same goes for Android Text retrieved using UIAutomatorViewer
We are planning to rely heavily on accessibilityLabel in ReactNative for Appium /webdriverIO driven automated tests. Will it be sustainable?
Or shall we use in combination traditional iOS predicate / iOS classchain / Android XPath etc locators?
According to RN docs http://facebook.github.io/react-native/docs/accessibility,
you need to provide accessible={true} prop to the element that you want to use accssibilty, then you can add accessibilityLabel to that element. for Ex :-
<TouchableOpacity
accessible={true}
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
onPress={this._onPress}
>
<View style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</View>
</TouchableOpacity>
you can more details about this in RN docs http://facebook.github.io/react-native/docs/accessibility.
Related
Here is my react native code
<Pressable
onPress={handleSignIn}>
<Text style={styles.linkTextStyle}>{signInLinkText}</Text>
</Pressable>
I want to write unit test case with react native testing library to test onPress function. Could some help me on this?
I believe you can just use the react native testing library docs here https://callstack.github.io/react-native-testing-library/docs/api/#fireeventpress-element-reacttestinstance--void. It shows you all the possibilities of react native testing library which is really good.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
There is no official way to do this right now. As a turnaround, I used react-native-webview library for this purpose. My code implementation is as follows:
<WebView
forceDarkOn
style={{
backgroundColor: THEME.COLORS.primaryBackground,
}}
source={{
uri: `https://www.tradingview.com/chart?symbol=usd`,
}}
useWebKit={true}
originWhitelist={['https://www.tradingview.com']}
allowsInlineMediaPlayback={true}
incognito
/>
Please note that I have used incognito and originWhitelist params. Incognito for disabling cache as trading view will display a non dismiss ad after some time and originWhitelist for disabling popup ads that open new windows.
I'm using a cloud based storage for avatar images. If an image for a user doesn't exist I want to fallback to the user title.The code below works for android, but on IOS the image is just blank and no title.
<Avatar rounded source={{ uri: avatarUrl }} title={userName.slice(0, 2)} />
On a regular Image you can use onError to handle this, but I don't see how I can use this on the Avatar.
Anyone have any suggestions how to fix this? or another package that handles it better?
Thanks!
I'm making a Morse Code translator app with React Native, but whenever a user types '--' into the InputText, it automatically corrects (on iOS at least) to '–' (en-dash), which is not desirable, for it makes the morse code unreadable.
I've done my best to search the internet, but to no avail. I also attempted using different monospace fonts, but it appears not to make a difference.
I would like to somehow, using React Native stop the double hyphen from being automatically being turned into the en-dash, for the sake of readability.
Setting the keyboardType to ascii-capable you can achieve the desired.
Please note that the ascii-capable is a ios only option.
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
value={this.state.text}
keyboardType={'ascii-capable'}
onChangeText={(text) => this.setState({text})}
/>
Here is the different type of keyboard
The end result looks like this:
I have a question that I have not been able to solve for some time and I have not been able to do it yet. Do you know how to make a text to speech work in background React Native Android app?
If you want sounds to work on iOS in background mode you need to do 2 things:
enable audio capabilities in xcode
configure AVAudioSession. There is already a package for it here: https://github.com/BonnierNews/react-native-audio-session
I did this at the root of the project, using react-native-sound, but should be the same with react-native-audio-session:
import Sound from 'react-native-sound';
Sound.setCategory('Playback'); // this will play sound in background
Somewhere in your background runner:
Tts.speak('Some text);
We can use ACCESSIBILITY.Accessibility, means making your apps usable to both normal users and users with disabilities. Any person can have one or more form of disability.
Step1:-
Turn on TalkBack in your device Settings
Open your device's Settings app Settings app.>>Open Accessibility>> then TalkBack.>>Turn on TalkBack.
then add following props to every component of ReactNative.
accessible={true}
accessibilityLabel={label}
Like this:-
return (
<TouchableOpacity
accessible={true}
accessibilityLabel={label}
accessibilityTraits={"button"}
accessibilityComponentType={"button"}
onPress={() => {
onPress(data.name);
}}
>
<Icon
name={icon}
style={styles.icon}
size={icon_size}
color={icon_color}
/>
</TouchableOpacity>
)