<Animatable.View animation={'fadeIn'} duration={1000} >
<TouchableOpacity key={index} activeOpacity={0.5} onPress={() => this.onPress()}>
<Text>Submit</Text>
</TouchableOpacity>
</Animatable.View>
Animated View is preventing the onPress action. If I remove the Animated View then onPress action works fine.
IF i wrap the content of the TouchableOpacity with a view, Then onPress action works fine.
<Animatable.View animation={'fadeIn'} duration={1000} >
<TouchableOpacity key={index} activeOpacity={0.5} onPress={() => this.onPress()}>
<View>
<Text>Submit</Text>
<View>
</TouchableOpacity>
</Animatable.View>
Can anybody let me know why AnimatedView is preventing the onPress and how come View make onPress works?
Related
I currently have a code architecture as follows:
<Animated.View onTouchStart={()=> console.log("ontouchstart")}>
<View></View>
<TouchableOpacity onPress={()=> console.log("hi pressed}> //should only trigger this when this is pressed.
<Text>hi</Text>
</TouchableOpacity>
</Animated.View>
where the touchableopacity is the child component of the animated view. I was wondering if it is possible if i press the touchableopacity, it will only trigger the touchable opacity instead of both touchableopacity and the aniamted view.
any help would be appreciated
Pass the prop disabled
<Animated.View onTouchStart = {() => console.log("ontouchstart")}>
<View></View>
<TouchableOpacity disabled={true} onPress = {() => console.log("hi pressed}> //should only trigger this when this is pressed.
<Text>hi</Text>
</TouchableOpacity>
</Animated.View>
i'm using TabView and in every tab i use flatList. every list item has phone and email button. But TouchableOpacity onpress not working so i use onPressOut. onPressOut working but it works when i touched in not when touched out. you guys have any ideas why this is happennig
<View style={styles.ButtonGroup}>
<TouchableOpacity
style={[styles.ButtonCont, {backgroundColor: '#BEF7D1'}]}
onPressOut={() => {
Linking.openURL(`tel:+90${data.item.kiraci_gsm1}`);
}}>
<Icon
name={'phone'}
type="font-awesome-5"
size={24}
color="#036122"
/>
</TouchableOpacity>
<TouchableOpacity
style={[styles.ButtonCont, {backgroundColor: '#C6E1FF'}]}
onPressOut={() => {
Linking.openURL(`mailto:${data.item.kiraci_eposta1}`);
}}>
<Icon
name={'envelope'}
type="font-awesome"
size={24}
color="#0050AC"
/>
</TouchableOpacity>
</View>
Pay attention from where import your "TouchableOpacity". When I changed "TouchableOpacity" from "react-native-gesture-handler" to "react-native" for Android platform.
Normally the height of a FlatList is set by wrapping a around it.
This doesn't appear to work if I put it inside a modal component of react native.
Is there any other way to set the height for a FlatList?
<Modal
visible={visible}
transparent={true}
animationType='slide'
>
<View style={middleInnerContainer}>
<FlatList
data={this.props.vegetablesBenefit}
renderItem={modalBenefitItem}
keyExtractor={(item) => item.key}
scrollEnabled
/>
</View>
</Modal>
I've simplified this code to the basic structure I am using.
It works perfectly fine outside of a modal.
Can you be more specific? If you want a list inside a popup you can simply use the following code I wrote for creating a generic dialog popup!
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<Modal
visible={this.state.showDialog}
transparent={true}
onRequestClose={() => this.closeDialog()}
animationType='slide'>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<View style={styles.parentContainer}>
<View style={styles.childContainer}>
<View style={styles.viewContainer}>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => { }}>
<View>
<Text style={styles.headerStyle}>{this.props.headerTitle}
</Text>
</View>
</TouchableWithoutFeedback>
{this.renderListComponent()}
</View>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
Handles the touch outside as well. Let me know if this completes your requirement.
All i need is to trigger onPress method of the ActionButton Without tapping on it.
Here is my code:
render () {
// act = this.refs.abc;
// alert(this.state.activeState)
// this.handleAutoPress();
return (
// <View style={styles.container}>
<View style={{flex:1, backgroundColor: '#f3f3f3'}} >
<Text>Component10 Component</Text>
{/*Rest of App come ABOVE the action button component!*/}
<ActionButton ref="abc" buttonColor="rgba(231,76,60,1)" >
{/*<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() =>
console.log("notes tapped!")}>
<Icon name="android-create" style={styles.actionButtonIcon} />
</ActionButton.Item>*/}
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="md-done-all" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
<Icon name="md-done-all" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
// </View>
)
}
You probably want to follow the instructions in this answer: How can I trigger a tabItem onPress within a component using React Native?
Instead of trying to invoke the onPress itself, just set onPress prop to a function and invoke that function wherever needed. No need to mess with refs or anything like that.
I'm trying to make both onPress to happened TouchableOpacity, but the second one is the only one that fires:
<TouchableOpacity onPress={() => console.warn('first button')}>
<TouchableOpacity onPress={() => console.warn('second button')}>
<Text>
PRESS ME
</Text>
</TouchableOpacity>
</TouchableOpacity>
How can I make both of them fire?
Thanks in advance!
You can fire both of them simply using the 'ref' concept and calling the props onPress.
<TouchableOpacity onPress={() =>
AlertIOS.alert('firstbutton')
}
ref={component => this.myFirstTouchable = component}
>
<TouchableOpacity onPress={() =>
{
AlertIOS.alert('second')
this.myFirstTouchable.props.onPress()
}
}>
<Text>
PRESS ME
</Text>
</TouchableOpacity>
</TouchableOpacity>