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.
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.
I am trying to make a social app using react native, I am working on home screen, I want to display user stories on top( horizontal scroll) and post below ( verticallt) similar like instagram, I am using different array for both, I tried to use flatlist for both the arrays, one for stories and one for post, But I want to scroll u p stories flatlist, when post flat is scrolled, I tried to put them in scrollview so both stories and post scroll up it worked somehow, but giving me warning, virtualized list cannot be render inside scrollview, Then I tried to use section list but problem is section list uses same data array, but I want yo use two Data array, How to Solve this problem? So i can make home Screen similar like instargam
create a Function called RenderStories
inside RenderStories
const RenderStories = () => (
<>
// Write your Story Flatlist Render Code...
</>
)
In your Posts flatlist write like this
<FlatList
data={Posts} //This will be your Post array
ListHeaderComponent={RenderStories()} // Render Stories is being called here...
renderItem={({ item }) => (
<>
// Write your Post Render Code...
</>
)}
/>
This will make sure your Posts and Stories scroll up together.
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 am using the Ant Design Steps component. I want to append additional components such as a button next to each step's description (make it more actionable).
I also want to make a border around each step's description.
Does anyone know how to use it?
Method
If you check their document, you would find that there are 4 APIs with type string|ReactNode
title
subTitle
icon
description
This means you can pass a child component to those props, which can be used for customizing.
Refer:
API of Steps.Step
Demo
<Step
title="Step 1"
subTitle={<button>XXX</button>}
status="finish"
icon={<AcUnit />}
description="This is a description."
/>
I have a list of poem titles and images within article HTML tags. Whenever a user clicks on an article, I want a modal to show the poem verses. As of now whenever an article is clicked, the modals for every poem opens. How do I open the modals one at a time? This is my first time using React.
Link to my codesandbox:
https://codesandbox.io/s/and-air-52dpo?fontsize=14
You need to separate each Poem card to a component, and put the state inside them.
By using state on parent component as you did, it cause all poem card depend on same state.
I've forked your codesandbox, and fixed them. You can check it.
https://codesandbox.io/embed/and-air-543tl
You're using a single show variable in your Poems component.
This doesn't allow to show a single one of your modals, as all of them are referenced to this same variable.
I would use an integer in the Poems's state - rather than the boolean show - to store the currently presented modal.
The best option for this integer is probably the poem's index, as you should anyway add to your map function:
const listItems = data.map((poem, index) => (
<React.Fragment key={index}>
// The rest of your code is the same
<Modal
show={this.state.currentModal === index} // only this property was updated
onClose={this.showModal}
title={poem.title}
>
// modal code
</Modal>
</React.Fragment>
))