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
Related
I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll
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>
I have spent hours trying to fix this issue, but can't seem to get around it. I am using react-native-cube-navigation library to incorporate cube navigation into my app. Inside the cube navigation, I have videos that are pulled from a database that play when inserted. I have created a working pause function, but when the videos are places inside of CubeNavigation, the pause function stops working, as well as all buttons on screen. CubeNavigation uses a Animated.ScrollView, so I need to figure out how to allow touchable to work inside of this.
This is the code from the home Screen.
CubeNavigation>
{posts.map(
({url, owner, description, encores, comments, shares}) => (
<View style={[styles.container, { backgroundColor: "#ddd" }]}>
<Videos url={url} owner={owner} description={description} encores={encores} comments={comments} shares={shares}/>
</View>
)
)}
</CubeNavigation>
This is the code from Videos.js
<TouchableWithoutFeedback onPress={() => setPlaying(!playing)} >
<View style={{flex:1}}>
<Video
paused={playing}
style={[styles.backgroundVideo, {width: w, height: h}]}
source={{uri: url}}
repeat
ref={videoRef}
resizeMode="cover"
retainOnceInViewPort={false}
/>
</View>
</TouchableWithoutFeedback>
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.