I have some text with onPress wrapped in a TouchableOpacity.
<TouchableOpacity onPress={doNavigateToComment}>
<View>
<Text>
<Text onPress={doNavigateToUser}>
#{user.username}
</Text>{" "}
liked your comment.
</Text>
</View>
... more stuff ...
</TouchableOpacity>
Tapping anywhere on that text will trigger doNavigateToComment. When the user taps the username it should call doNavigateToUser Is there a way to give the underlying Text onPress priority? It seems to only recognize the outer touchable wrapper.
I modified your code a little bit, but I am getting exactly your intended behavior.
doNavigateToComment() {
console.log('doNavigateComment');
}
doNavigateToUser() {
console.log('doNavigateToUser');
}
<View style={styles.container}>
<TouchableOpacity
onPress={() => this.doNavigateToComment()}>
<View style={{ backgroundColor: 'red', height: 40, justifyContent: 'center', alignItems: 'center' }} >
<Text>
<Text
style={{ backgroundColor: 'blue' }}
onPress={() => this.doNavigateToUser()}>
Username
</Text>{' '}
liked your comment.
</Text>
</View>
</TouchableOpacity>
</View>
Pressing on Username (blue area) will print doNavigateToUser and pressing the red area will print doNavigateComment.
You probably just need to adapt your styling.
Screenshot:
Working expo:
https://snack.expo.io/SkOzaxdiV
I figured it out. I was importing TouchableOpacity from react-native-gesture-handler instead of react-native. Once I fixed that import the taps started working correctly.
Related
<View style={styles.bottomContainer} >
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} onPress = {loginHandler} >
<Text style={styles.buttontext} >LOG IN</Text>
</Pressable>
</Animated.View>
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} >
<Text style={styles.buttontext} onPress = {registerHandler} >REGISTER</Text>
</Pressable>
</Animated.View>
<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
<TextInput placeholder="Email"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Full Name"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Password"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<View style = {styles.formButton}>
<Text style={styles.buttontext}> LOG IN </Text>
</View>
</Animated.View>
</View>
Here is the Styling of above views:
bottomContainer: {
justifyContent: 'center',
height: height / 3,
},
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
...StyleSheet.absoluteFill,
justifyContent : "center",
},
DETAILS OF THE CODE
so basically I am trying to create an aninated view where the "forminput" container should pop up when user taps on log in or register button. But the problem is that my buttons dont work when because the forminput container lands on top of them somehow (eventho it is invisible). The person I am following used
zIndex: -1
to place it underneath the view but it does not work in android.
PS: I have also tried "elevation" Prop but that doest seem to work either.
I made a scrollable header for an app I am building for a company. When I try to use a TouchableHighlight to trigger an onPress() event it does not register because the position key is set to 'absolute':
Ive tried the following after scouring the internet for hours:
-raising the zIndex/elevation
-making sure TouchableHighlight is imported from 'react-native'
-Animated library from 'react-native-reanimated'
When I comment out the position:absolute in the main header it works perfectly, but the header leaves a view behind it when it scrolls up that I cant lay a view on top of.
I'm running out of options here...any help would be GREATLY appreciated!
<Animated.View style={globalStyles.tabNavbar}>
<TouchableHighlight
style={{backgroundColor: 'white', height: 50, width: 100, zIndex: 99999, elevation: 99999}}
underlayColor="#eee"
onPress={() => {
console.log('PLZ WORK');
this.updateTabs('projectsTab');
}} >
<Animated.View style={{ alignItems: 'center'}}>
<Text onPress={() => { this.updateTabs('projectsTab');}} style={{fontWeight: 'bold'}}>Close</Text>
</Animated.View>
</TouchableHighlight>
<TouchableHighlight
style={{color: 'white'}}
underlayColor="#eee"
onPress={() => {
console.log('PLZ WORK');
this.updateTabs('notificationTab');
}} >
<View style={{alignItems: 'center'}}>
<Text style={{fontWeight: 'bold'}}>Close</Text>
</View>
</TouchableHighlight>
</Animated.View>
For those wondering, If you alter the View order of the Components to where the component with position: absolute is last, the buttons will work. In this situation I had to put my header last in the order even though it appears at the top of my screen.
How can i display animation on Button when screen is loading in react-native ?
I want to apply animation on Button and display it's effect when it is loading in screen.so please help me.How i can achieve this functionality in react-native.
Use this spinner button library and change your flag according to the api response.
Using react-native-animatable and react-native-button you can achieve the animation on a button , One of the simple expression is as below
<View style={styles.container}>
<Button onPress={this.onPress}>
<Animatable.Text
animation="pulse"
easing="ease-out"
iterationCount="infinite"
style={{ textAlign: 'center', fontSize: 100 }}>
OK
</Animatable.Text>
</Button>
</View>
You can set state of isLoading and set iterationCount to 0 when the loading completes
<View style={styles.container}>
<Button onPress={this.onPress}>
{this.state.isLoading ?
<React.Fragment>
<Text style={{ textAlign: 'center', fontSize: 100 }}>
Loading ...
</Text>
<ActivityIndicator/>
</React.Fragment> : <Text>Press me <Text>
</Button>
</View>
I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.
You guys can see the issue:
Code for the Dropdown is:
<View style={[styles.container]}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Image style={styles.image}
source={require('../../assets/icons/dropdown.png')}
/>
</TouchableOpacity>
<View >
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:1, elevation:1}]}>
<ScrollView style={{height:60}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{}}
disabled={false}
key={i}
onPress={()=>this.selectItem(i)}>
<Text style={styles.item_text}>{item} </Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
I have applied absolute positioning on the animated view which displays the dropdown items.
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%', height: 70
}
I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.
try to use touchable opacity from gesture handler not react native
I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.
In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
I have included the render event markup of the Dropdown element. Its code is given below:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Styles for Dropdown are:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.