I've got two Touchables that overlap. Clicking the overlapping area makes them both fire. I want only the child onPress event to trigger (i.e. only the onUpVote/onDownVote function).
<TouchableHighlight onPress={onPress} underlayColor={colors.focus}>
<View style={styles.container}>
<AppText>{question.content}</AppText>
<View style={styles.voteContainer}>
<UpVoteButton
voted={voted}
voteCount={question.upVotes}
onPress={onUpVote}
/>
<DownVoteButton
voted={false}
voteCount={question.downVotes}
onPress={onDownVote}
/>
</View>
</View>
</TouchableHighlight>
and that's the VoteButton element
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.voteContainer}>
<AppText style={styles.voteCount}>{voteCount}</AppText>
<AntDesign
name={voted ? "like1" : "like2"}
style={{
fontSize: 18,
color: defaultStyles.colors.focus,
paddingBottom: 3,
}}
/>
</View>
</TouchableWithoutFeedback>
The idea is that if the user presses the thumbs up/down icon area then the onDownVote gets handled. Pressing anywhere else within the list item is supposed to take you to a different screen.
App layout
I'd suggest to import TouchableOpacity from here:
https://github.com/software-mansion/react-native-gesture-handler
Both overlapping touchables should fire onPress prop
Related
I want to move text and images around in react native to custom positions on the webpage. I don't want to use bottom, left, and top etc. because it doesn't land in the same place for different devices.
My code is:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageBackground
style={{width: '100%', height: '100%',}}
source={require('./assets/pexels.jpg')}
>
</ImageBackground>
<Text style={{fontWeight:'600', fontSize: 30}}>
Connect With All Websites On The Internet
</Text>
<Text style={{fontSize: 18}}>Reach 800M Daily Active Users To Whatever Business You Own!</Text>
<TouchableOpacity>
<Text>Log In</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text>Create An Ad</Text>
</TouchableOpacity>
<Button
onPress={() => navigation.navigate('login')}
title="Next Screen"
/>
<StatusBar style="auto" />
</View>
);
};
I haven't moved any of these components around yet they are just sitting in the automatic positions on the webpage. I want to add other images and move it under the image background I already set.
return(
<View style={styles.container}>
<View style={styles.searchbarContainer}>
<TouchableOpacity style={styles.ThreeLineButton} onPress={returnHome}>
<Text style={{color: 'white', fontSize: 20,}}>Done</Text>
</TouchableOpacity>
{/* <Text style={{color: 'white', fontSize: 50, marginLeft: 50}}>UStudy</Text> */}
{/* <TextInput style={styles.searchbarStyle} placeholder="Search Ustudy" placeholderTextColor='#FFF' onChangeText={setSearchText} value={searchText} onChange={refreshSearch} /> */}
</View>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
>
<FlatList
ref={(ref) => { this.commentListRef = ref; }}
data={allComments}
renderItem={({item}) => <CommentCard item={item} />}
keyExtractor={item=>item.docID}
showsVerticalScrollIndicator={false}
style={{
width: '110%',
}}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
/>
</ScrollView>
</View>
);
};
export default DynamicPostScreen
here is the code of my UI and how the TextInput is embeded. Whenever I type a character in my TextInput it refreshes the whole page and unfocuses from the TextInput. How do I stop this from happening?
Unfortunately, you didn't provide the full code of the component. I recommend you refactor the component and give it proper formatting, especially the indentation.
Also, you usually don't want a FlatList inside a ScrollView, there is probably an issue there.
About the question itself, I can't be 100% sure without the full code.
But it's possible that your setSearchText is triggering a useState change and therefore rerendering the component (that's what a state does).
This is a state management problem and you could move the TextInput to a separate component and manage the state from there so the parent component won't rerender.
Another possibility is that by using onChangeText and onChange you are triggering the render, probably with the refreshSearch function.
If this didn't help, please follow my instructions at the beginning and I'm happy to look at it again.
touchable opacity inside the caaout not working.Actually, i need to hide the custom callout view once the close button inside the same callout is clicked.Unfortunately, my function is not fire whicle clicking on the close button
`
const closeinforwindow=(e)=>{
console.log("close button is clicked");
}
<SafeAreaView style={{flex: 1}}>
<View style={Interfacestyle.container}>
<MapView mapType="satellite" style={Interfacestyle.map} region={getInitialState()}>
{markers.map((marker, key) => {
return(
<Marker
key={key}
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
calloutOffset={{ x: -8, y: 10 }}
calloutAnchor={{ x: 0.5, y: 0.2 }}
>
<Image source={{uri: marker.image}} style={{width: 42, height: 42,transform: [{ rotate : `${marker.heading} deg`}]}}/>
<Callout tooltip >
<View style={[Interfacestyle.info_windowwrapper]}>
<View style={[Interfacestyle.info_windowcontainer]}>
<View style={[Interfacestyle.inforwwindowheader]} >
<View style={{width:"92%",alignItems:'center'}}><Text style={[Interfacestyle.inforwwindowheadertext]}>{marker.name}</Text></View>
<View style={[Interfacestyle.menuicon]}>
<TouchableHighlight onPress={(e)=>{closeinforwindow(e)}}>
<Icon name="close" color="#fff" size={16} />
</TouchableHighlight>
</View>
</View>
</View>
</Callout>
</Marker>
)
})}
</MapView>
<View>
</SafeAreaView
`
Kindly help me.
This is an old thread, but it still seems relevant: https://github.com/react-native-maps/react-native-maps/issues/226#issuecomment-220356079
Android map callouts don't support buttons inside of them, only an onPress event for the entire callout. This is a limitation of the Google Maps library on Android and react-native-maps can't do anything about it.
Sounds like you'll either need to ditch the functionality or refactor your approach to use the onPress event for Callout.
I have 2 View component rendered over each other using absolute positioning. Both view have onPress events binded using TouchableOpacity. Now when I press top view actually below view onPress event is triggered and top one remains as it is. What am I doing wrong here?
Top Layer Code
<TouchableOpacity style={cell} onPress={this.handleMessangerPress}>
<Image style={[filterImage, {marginLeft: 20}]} source={{ uri: imagePath + 'messanger.png' }} />
</TouchableOpacity>
Bottom Layer Code
<TouchableOpacity style={styles.subTotal} onPress={this.handleSubTotalPress}>
<View>
<Text style={styles.text}>{'Subtotal Rs.' + total}</Text>
</View>
</TouchableOpacity>
In above case handleSubTotalPress is getting called in place of handleMessangerPress
Use this way
<TouchableOpacity style={styles.subTotal} onPress={()=> this.handleSubTotalPress() }>
or
<TouchableOpacity style={styles.subTotal} onPress={this.handleSubTotalPress.bind(this) }>
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.