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>
Related
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.
Im new to this Material-Table table. Im trying to set its options based upon what the user selects to do.
For example, I want to turn on/off filtering based upon if the user want to filter or not.
I have a button that sets a state variable true or false depending on when its selected.
this.state = {
filterStatus:false,
}
But my options property doesnt allow me to use the state variable.
options={{
filtering: {this.state.filterStatus}
}}
Is there a way to do this?
I want the user to be able to simplily have the option to turn off filtering with a push button.
To go from this,
enter image description here
to this
enter image description here
You can use filtering under options in MaterialTable as below:
<MaterialTable
title="Basic Filtering Preview"
columns={state.columns}
data={state.data}
options={{
filtering: state.filtering
}}
icons={tableIcons}
/>
In this example, I used a toggle button to trun off/on filtering.
Here is the Code Sandbox
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 want to register three gestures in one container of the view:
When user touches the Card -> Load Detail about the Card
When user swipes down the Card -> "Like" it and display next card
When user swipes up the Card -> "Skip" it and display next card
My current implementation uses PanHandler to register the gesture and uses TouchableOpacity to reduce the Opacity when card is being swiped.
But I'm not sure how to implement those three above gestures for the same exact card.
You can just use a <TouchableHighlight /> (or any other 'Touchable' component) nested inside of a <Swipeable /> component (typically implemented using the react-native-swipeable library).
So something like the following:
{/* Props are not set in this example for simplicity */}
<Swipeable>
{/* You should of course nest some components in the next element if you want to */}
<TouchableHighlight />
</Swipeable>
I fixed it like this myself.
By the way: Nesting the elements the other way around (like so <TouchableHighlight><Swipeable /></TouchableHighlight>) gave me a lot of issues, so I don't recommend doing that.
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.