how do TouchableHighlight handles the color of the text when tap. I already did it on the backgroundColor using underLayColor. Here's my code:
<TouchableHighlight
style={{ borderRadius: 5}}
underlayColor="#ffffff"
onPress={this.onLoadPress}>
<View style={[styles.buttonBox, styles.btnEditProfile]}>
<Text style={styles.btnEditProfileText}>
Edit Profile
</Text>
</View>
</TouchableHighlight>
I've been struggling with this myself. And using onPressIn and onPressOut props of TouchableWithoutFeedback causes a little delay that becomes glitchy if you use that on a component that receives frequent taps. However, that delay doesn't occur when you use onShowUnderlay and onHideUnderlay props of TouchableHighlight itself.
P.S. your TouchableHighlight component should have an onPress property for this to work.
The TouchableHighlight has all the props of TouchableWithoutFeedback. TouchableWithoutFeedback has the onPressIn and onPressOut props which can receive a function (basically like onMouseDown and onMouseUp). You can use those methods to change a state which will change the style of the text. Here is a working example.
Related
For a react native tv application using react-native-template-typescript-tv / react-native-tvos
The first focus is on Text and on press down it is focusing on the TouchableHighlight
How do I prevent the focus on a Text element?
I tried adding the prop focusable={false} and fiddled with the hasTVPreferredFocus
<View>
<Text>Title</Text>
<TouchableHighlight>Click Me</TouchableHighlight>
</View>
I'm using react native and have parent component with modal. When modal opens, my child component with list rerenders one time, but interface freezing for ~1 or 2 seconds depends on elements in the list. Average size of list is 50 elements. What can be a problem?
<View style={styles.screenWrapper}>
<View style={styles.container}>
<List
onChoose={onChoose}
flightOffers={paginatedFlightOffers}
isRequesting={isLoadingOffers}
isLoadingMore={isLoadMore}
isLoadingResults={!paginatedFlightOffers.length}
currency={{ value: searchId?.searchId.currencyRates[body.currency], name: body.currency }}
showMoreFlightOffers={showMoreFlightOffers}
/>
</View>
<NativeModal
visible={isDetails}
onClose={onDetailsClose}
animationType="fade"
>
<View>
<Text>asdf</Text>
</View>
</NativeModal>
</View>
Insinde the List component there is FlatList and sometimes it writes attention message with advice that I used. Maybe it is possible to avoid rerendering because props in List component remains the same. I have tried to use React.memo, but still rerendering exists
You should try using flat list as it virtualize list it renders only small batches of elements and more efficient
Got answer to this question from my friend and fixed rerendering. The reason List was rerendering everytime when modal was opened is that isDetails state was changing in the parent component. So everytime state changed my parent component was also fully rerendered.
To fix it I created isDetail state in recoil(you can to it throw redux, mobx, context etc.), created new component with modal and in this new component called isDetail from recoil.
I am using TouchableHighlight for my component. <TouchableHighlight onLongPress={onLongPressButton} underlayColor="purple"> After I press out the component (I dont know if this is the right name of the action) the underlay color disappear. I want to preserve it and to make it stay. I tried using background color for the underlying <div> but it is not the same boundaries as underlayColor
EDIT - there is no initial collor of the component, so it is white (or whatever the default color is). No, I dont want the color to be changed on onPress event. Just to stay "highlighted" when I remove my finger away from the onLongPress event
you can use onPressOut prop function of TouchableHighlight and set state to change the color of the button.
It is called as soon as the touch is released even before onPress. The first function argument is an event in form of PressEvent.
Reference Link : https://reactnative.dev/docs/touchablewithoutfeedback#onpressout
I just updated a react native project from rn 0.61.5 to rn 0.62.2. Things are mostly fine except that the onPress on my <TouchableOpacity> doesn't respond if I have delayPressIn, delayPressOut, or delayLongPress in that same touchable opacity.
Getting rid of them is not ideal because I was using them to avoid triggering onPress for touchable opacities in a flatlist on scroll.
Looking in the most recent documentation for react native delayPressIn, delayPressOut, and delayLongPress are no longer listed on the documentation for touchable opacity or touchable hightlight. They are listed in the documentation for TouchableWithoutFeedback, but this doesn't fit my needs.
This is an issue regardless of whether I'm using just one, or more than one in combination.
For example:
<TouchableOpacity
// delayPressIn={5}
// delayPressOut={5}
// delayLongPress={5}
accessible={!this.state.menuOpen}
onPress={() => {
this.props.navigation.navigate('OneAlertScreen', {userId: userId})
}}
title="Alert Details"
key={item.alertNumber}
style={styles.myCardStyle}
>
..........stuff inside my touchable opacity
</TouchableOpacity>
works, but if I uncomment any of those it won't. It doesn't throw an error - just fails silently.
Has anyone found a way around this? Thanks
I have an app where users can see a list of events, the events are split up into different categories i.e music, art etc.
What Im trying to do is that if a user clicks on a category where there are no events in that category yet, the user will be able to click a button that will bring them, to the "All Events" category list.
Im using a component called EventListScreen, which is im using as template for all the category lists, so instead of having a screen for each category, I just use the EventListScreen as the main Screen to list the events.
My problem is that if Im on the Art category and there are no events there I want the user to click a button that will bring them straight to the All Events Category, but when I try do
this.props.navigation.navigate("EventListScreen",{category: "All Events"})
nothing happens as Im already on the EventListScreen.
I have read in places that some people say to just remount the component, but Im not sure how to do that as well as change the category to All Events
I have added the all events button code below:
<Text style={{paddingTop: 40, fontSize: 20}}>
Sorry no events in here yet.
</Text>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate("EventListScreen", {
category: "All Events"
});
}}>
<Text style={{paddingTop: 20, fontSize: 15}}>
Click here to see All Events
</Text>
</TouchableOpacity>