I am trying to implement Accessibility for react native application. I have 2 nested Text Tags, If I enable the accessibility for all Text Tags, It is highlighting the first Text Tag.
I enabled in all 2 Text tags, but only first Text tag is visible for Accessibility
<Text accessible={true} accessibilityLabel={'Hello'} >Hello
<Text accessible={true} accessibilityLabel={'Stack Devs!'}>Stack Devs!
</Text>
</Text>
I need to make the second Text accessible. As of now only first Text is accessible
I had same problem recently. Only proper way to do it on RN, is to have the whole string in one property:
<Text accessible={true} accessibilityLabel={'Hello Stack Devs!'}>
{'Hello'}
<Text>{'Stack Devs!'}</Text>
</Text>
Related
I am learning React Native for a project at work. I Need to display something like an article and I have dummy data in a JSON object as shown in the image. How do I break it into paragraphs so that it doesn't show just one big block of text?
I have a component with the code below;
<View style={{ marginVertical: SIZES.extraLarge}}>
<Text style={{fontSize:SIZES.large, textAlign:'justify', }}>{data.description</Text>
</View>
I'm working on a translation function and facing this issue.
<Text style={styles.descText}>
{`All reports size is
${<Text style={styles.downloadSize}>
{bytesToSize(this.props.downloadSize)}
</Text>}
Text to display
`}
</Text>
You can see there's a Text tag inside a text. but on the screen, it render [Object] instead of a View.Is there anyway to solve this?
You shouldn't do Text inside Text. It should looks like this:
<>
<Text style={styles.descText}>All reports size is</Text>
<Text style={styles.downloadSize}>
{`${bytesToSize(this.props.downloadSize)}`}
</Text>
<Text style={styles.descText}>Text to display</Text>
</>
From what I understand to create links in inline text the solution is too use nested text components like so (ps i know that using click me as a link is bad style I'm just trying to highlight the main issue)
<Text>
To find out more
<Text onClick={() => console.log('link was pressed')} accessibilityRole="button">
Click me
</Text>
</Text>
The onClick works but the accessibilityRole does not appear to work.
I'm new to React Native and I tried to create a text with an inline text as follows:
<Text style={{textDecorationLine: 'line-through'}}>
$75.00{' '}
<Text style={{textDecorationLine: 'none'}>$50</Text>
</Text>
The problem is that it renders
$75.00 $50.00
and not
$75.00 $50.00
I've seen that there's a workaround in html, is there a similar solution for React Native?
Note: I tried to make the strikethrough appear in a code section but this feature seems to not work anymore.
You can write your code in following way
<Text>
<Text style={{textDecorationLine: 'line-through'}}>$75.00</Text>
<Text style={{textDecorationLine: 'none'}}>$50</Text>
</Text>
I am working on a react native project. Where I need to implement drop-down with an input field. When I type anything in the input field it should filter the dropdown content.
I can't use react-native-dropdown on anything because it placed a mask on the whole screen and I am not able to type anything when the dropdown is open.
So I tried to implement my own drop-down.
<View style = {{position:'absolute', zIndex:5, backgroundColor:'red'}}>
<View style = {[Styles.dropdownView, {display:this.props.display}]}>
<ScrollView style={{ top:0, bottom:0}}>
{ listData.map((val, i) => <Text key = {i} > {val} </Text> )}
</ScrollView>
</View>
</View>
Every thing is working fine but I am not able to scroll it vertically. Though it's working fine with horizontal scroll.
Please help me to fix this or suggest some other way.