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.
Related
I got an app with flatlist ,I added to the app TouchableOpacity that covers the whole screen,
works great when I click on item area but doesn't work when I click the area that got no items
this is the code of the TouchableOpacity:
<View style={{position: "absolute",width:'100%',height:HEIGHT,backgroundColor: 'rgba(0,0,0,0.8)',zIndex:6}}>
<TouchableOpacity onPress={()=>setEditing(false)} style={{flex:1,zIndex:6}}>
</TouchableOpacity>
Its looks like the flatlist block any clicks below it also in ios its works without any problems
Try change it to:
<View style={{position: "absolute",width:'100%',height:HEIGHT,backgroundColor: 'rgba(0,0,0,0.8)',zIndex:6}}>
<TouchableOpacity onPress={()=>setEditing(false)} style={{flex:1,zIndex:7}}>
</TouchableOpacity>
</View>
and run it
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>
As the title suggests, <Image src={require('...')} /> does not appear when attempting to view while offline and disconnected from react native packager.
It turns out that either because of the <TouchableOpacity> or the lack thereof <View> wrapping the <Image/>, it causes the image to not appear.
So the first example doesn't work:
<TouchableOpacity>
<Image src={require('...')} />
</TouchableOpacity>
whereas this does:
<TouchableOpacity>
<View>
<Image src={require('...')} />
</View>
</TouchableOpacity>
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.
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.