I have two flatlist consist of 5 and 10 items, i want to drag 1 item from first flatlist to second and vice verse , i have searched for many library but havent found any one yet.
Hope this blog helps
React native : Drag and drop between two lists
You can easily achieve this thing with react-native-draggable-flatlist
import DraggableFlatList, {
ScaleDecorator,
} from "react-native-draggable-flatlist";
<DraggableFlatList
data={data}
onDragEnd={({ data }) => setData(data)}
keyExtractor={(item) => item.key}
renderItem={renderItem}
/>
Hope it will you!
Related
I am developing an application for create event and that event should display on home screen according to City. We can choose city through dropdown. I am using Firebase for this application, how can we filter event list according to city??
use useState to select city from drop down and pass to it FlatList
<FlatList
data={itemList?.filter(data => data?.city=== city)}
keyExtractor={item => `${item.id}`}
renderItem={renderItem}
/>
I have a calendar section in my app where I want to be able to swipe right or left to go to the next or previous day.
I know that you can use createMaterialTopTabNavigator from React Navigation to do something similar, but I'm not sure if it would work in this specific scenario (where I would have an infinite number of screens and wouldn't be able to predefine them).
I also considered using react-native-gesture-handler's Swipeable component to navigate to the next/previous day screen on a left/right swipe but I'm not sure if this is the easiest/best way to approach this problem.
As you mentioned, you can use Tabs or Swipable. There are some other options like using <ifaram> or <WebView> and using a web URL instead of RN components but it's can be tricky and hard to manipulate.
As a simple solution, you can use carousels instead of using multi screen defining navigation. It's very simple. assume that your screens are an image in an image gallery and you can swipe left/right.
There are many libraries, one of the best ones is: react-native-snap-carousle
Take a look at it's example:
import Carousel from 'react-native-snap-carousel';
export class MyCarousel extends Component {
_renderItem = ({item, index}) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{ item.title }</Text>
</View>
);
}
render () {
return (
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
}
So you can pass a screen/page as _renderItem to the Carousel
I have a React Native page that contains the core component SectionList. The SectionList has sticky section headers (stickySectionHeadersEnabled) and a list footer (ListFooterComponent). As the user scrolls past the last section, the final section header remains stuck to the top of the page overwriting the footer. However I would prefer the sticky headers to be contained within the body of the section list area and not remain on screen beyond the end of the last section.
Is it possible to achieve this with SectionList or should I take another approach?
Expo snack demonstrating this behaviour (iOS & Android only)
https://snack.expo.io/#unstableair/rn-sectionlist-footer-overlay-example
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (<View style={styles.item}><Text style={styles.title}>{item}</Text></View>)}
renderSectionHeader={({ section: { title } }) => (<Text style={styles.header}>{title}</Text>)}
stickySectionHeadersEnabled={true}
ListFooterComponent={<View style={styles.footer}><Text>ListFooterComponent </Text></View>}
/>
To work around this problem, I added an empty section to the bottom of the SectionList data. The last SectionHeader still overwrites the ListFooter but because it's a View with 0 height you can't see it.
I have flat list horizontally set
with data of 11 items coming from an array, which is fixed and never changes
what I want is when user reaches at the end of flat list while scrolling, the data should remain the same but the first item should
show up in the last and then so on
here is what I have tried so far
<FlatList
{...this.props}
ref={ref => {
this.infListRef = ref;
}}
data={this.props.data}
onScrollEndDrag={this.handleScroll}
initialScrollIndex={0}
scrollEventThrottle={16}
renderItem={this.props.renderItem}
onScroll={({nativeEvent}) => this.checkScroll(nativeEvent)}
horizontal
showsHorizontalScrollIndicator={false}
keyExtractor={item => item.id}
/>
Any help will be highly appreciated.
Basically, implementing onScroll usage is when you want to be noticed when the actually scroll related to the scroll position (aminations for instance). When you would like to be notified when the user reaches, or about to reach, to the end of the FlatList.
You should implement onEndReached and onEndReachedThreshold to handle a better user experience when the user reaches the threshold.
The new data you're getting from the source (server or no matter wherefrom) should be concatenated to existing this.props.data
See good blog post - https://scotch.io/tutorials/implementing-an-infinite-scroll-list-in-react-native
And this SO answers - React Native Infinite Scroll
My solution refers to pagination because infinite scroll is a private case of pagination, it's the exact same approach.
If you want image or video list
One other approach which is kind a hack and an easy one is using react-native-snap-carousel
<Carousel
ref={ (c) => { this._carousel = c; } }
data={this.state.data}
renderItem={this._renderItem.bind(this)}
onSnapToItem={this.handleSnapToItem.bind(this)}
sliderWidth={360}
itemWidth={256}
layout={'default'}
firstItem={0}
itemHeight={20}
sliderHeight={20}
loop
vertical
loopClonesPerSide={100}
/>
Example:
https://snack.expo.io/#kurtesy/react-native-snap-carousel-example
You can achieve this using onEndReached method of Flatlist.
This is the idea behind answer.
state = {
data: [] //your initial data
}
<Flatlist
{…this.props}
extraData={this.state}
onEndReached = {() => {
this.setState((prevState) =>{
data: […prevState,this.state.data]
)}}
/>
I click on a button on one screen which loads another screen with a flat list which renders many rows. My conundrum is that I hang on the first screen while the flatlist processes.
My best effort so far is a loader, hidden this.props.children to process the flatlist, then hide the loader and show this.props.children again.
I'm sure there must be a more logical approach?
Ta,
Chris
first instead ho hiding flatlist and showing loader you can use
Refresh Control from React-native. which will we do the same same job
with ease.
second if your list is long you can lazy load your data by using onEndReached Callback this will decrease the loading time .
third make your renderComponent in flatlist a pure Component .which will stop unecessary refreshes and increase performance.
check the code below .....
<FlatList
data={this.props.questions}
renderItem={({ item, index }) => <QuestionCard //your pure component
item={item}
index={index}
onPress={this.openQuestionDetail}
/>
}
ref={'flatlist'}
refreshControl={
<RefreshControl //imported from react-native
refreshing={isFetching} //used to show loader while loading
onRefresh={this.fetchQuestions}
title="Pull to refresh"
tintColor="#fff"
titleColor="#fff"
colors={[Colors.secondary_button]}
/>
}
onEndReached={this.handleDynamicLoading} //callback for lazyloading
onEndReachedThreshold={0.5}
keyExtractor={(item, index) => item.qid}
/>
hope this helps... :)