I work on accessibility for an ios app.
I use TouchableHightLight on checkboxes.
I need the screen reader of ios, the VoiceOver to know how to announced to the user if a checkbox has been checked or unchecked.
<View style={styles.rememberMeContainer}>
<TouchableHighlight
underlayColor="transparent"
accessibilityLabel={props.rememberMeText}
accessible={true}
style={styles.rememberMeCheckBox}
onPress={() => {props.setRememberMe(!props.rememberMe)}}>
<Image style={styles.checkBoxImage}
source={props.rememberMe ?
require("../../../images/general/v_icon_purple.png") : null}/>
</TouchableHighlight>
<Text accessible={false} style={styles.rememberMeCheckBoxlabelStyle}>
{props.rememberMeText}
</Text>
</View>)
I read:
https://facebook.github.io/react-native/docs/accessibility.html
, but i don't find anything about it, or I missed something.
How can I do it accessible?
accessible={true}
style={styles.rememberMeCheckBox}
onPress={() => {props.setRememberMe(!props.rememberMe)}}>
<Image style={styles.checkBoxImage}
source={props.rememberMe ?
require("../../../images/general/icon_unchecked.png") : require("../../../images/general/icon_checked.png")}/>
</TouchableHighlight>
Currently (0.59), React Native doesn't support a switch or checkbox for accessibilityRole.
But there's a PR open adding support for it. https://github.com/facebook/react-native/pull/24095
Hopefully, it will land in version 0.60.
Related
I make check box list on Model Pop up by using react native multiple select
checkbox list listed but it take full screen height
i am not able to fix this issue
please Any body help me
Outer Element would be a modal, then make a view of a specific height inside that modal,
Example
<Modal transparent={true}
visible={this.state.showDialog}
animationType='fade'>
<View style={{opacity:.5, backgroundColor:'black',flex:1}}/>
<View
style={{position:'absolute',padding:16,top:0,bottom:0,left:0,right:0
,justifyContent:'center',alignContent:"center",
alignItems:'center'}}>
<View style={{backgroundColor:’red’,padding:16,borderRadius:5,
width:'60%',height:'10%',alignContent:'center',alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:14,alignSelf:'center',textAlign:'center'}}>
Sorry!!
</Text>
<Text style={{marginTop:5,fontSize:12,alignSelf:'center',textAlign:'center',color:’black’}}>
{this.props.errorMessage}
</Text>
<Button title='close'
onPress={()=>this.setState({showDialog:false})}/>
</View>
</View>
</Modal>
This is kind of what I want to achieve in my react native app. How should I go about it?
this is just an idea to show or hide a TextInput upon button press
return (
<View>
<TouchableOpacity onPress={() => this.setState({show : !this.state.show})}>
<Text>Click Here</Text>
</TouchableOpacity>
{this.state.show ? <TextInput
Value={this.state.value}
onChangeText={value => this.setState({value})}
/>
: null}
</View>
);
Initialize this.state.show as either true or false according to your requirement.
Your question could have been more clearer along with your efforts that you had tried
I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android
I'm using react native version 0.39 and the android version is 6.1.
The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I'm not getting any errors of warnings.
It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.
On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn't working. Thus, I suppose that it has something to do with memory issues. But I'm not sure.
I've added largeMemoryHeap to the manifest file.
In android studio I get log file as follows:
Thus, no errors, nothing. But the app doesn't work.
The stuck of code where those photos are rendered is as follows:
<ScrollView removeClippedSubviews={true}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
<View style={styles.container}>
{cards}
</View>
</ScrollView>
And one card is as follows, and I have a stuck of 10:
<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
<View style={styles.innerCard}>
<View style={styles.innerImageContainer}>
<Image contain='contain' style={styles.innerImage} source={this.props.image}/>
</View>
<View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
<Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
</View>
</View>
</TouchableHighlight>);
I found somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.
On IOS it works just fine.
I would be infinitely grateful if someone has an idea?
I’m writing a React Native app and I want to detect tap/clicks anywhere on the screen so I put an onClick handler on my <View> element but it doesn’t seem to be working. Here is my render function:
<View style={styles.container} onClick={this.onClick}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</View>
What do I need to do?
For making any element to handle touch/click events in a React-Native UI, you need to put the element inside a TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback or TouchableHighlight element:
<TouchableHighlight onPress = { this.onClick }>
<View style={styles.container}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</View>
</TouchableHighlight>
Hope that helps.
In React Native version > 55.3 you make check onPress events into your View if use onStartShouldSetResponder props.
Like example:
<View
style={{ flex: 1 }}
onStartShouldSetResponder={() => console.log('You click by View')}
>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh} />
}
>
<Text>Awesome</Text>
</ScrollView>
</View>
In example I showed how you can get onPress event on View and not blocking other event behind them. Refresh control still work correct.
In my case the following works fine. You can use onTouchStart and onTouchEnd handlers on any View via props, for example:
<View onTouchStart={() => this.doSomething()} />
More information
This worked for me...
onTouchEnd={() => alert('TAPPED')}
The easiest way to do that:
<TouchableOpacity style={styles.container} onPress={()=> whateverFunc(parameter)}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</TouchableOpacity>
So, you need to replace the 'View' component to a 'TouchableOpacity' or any other Touchable component and you also need to replace the 'onClick' prop to 'onPress'. That's all. The wrapping of a view with a TouchableWhatever component is not necessary at all.
Simple question, I'm trying to get a link to open whenever the user presses a button, the relevant bits of code are:
_linkPressed: function(url){
LinkingIOS.openURL(url);
},
<View style={styles.contactBox}>
<TouchableHighlight
onPress = {()=> this._linkPressed('www.google.com')}
>
<View style={styles.contactRow}>
<Image
source={{uri: 'email.png'}}
resizeMode='contain'
style={styles.contactIcon} />
<Text style={styles.contactText}> Write with your questions </Text>
</View>
</TouchableHighlight>
</View>
But for some reason the link won't open in the simulator I tried changing the _linkPressed function to just log "google.com" to the console and that worked. But I can't seem to grok the LinkingIOS procedure.
Thanks!
You need to add http:// before the link url.
<TouchableHighlight onPress={()=> this._linkPressed('http://www.google.com')} >
Check out this example.