react-native-draggable-flatlist
react-native-draggable-flatlist copied to clipboard
Unable to drag the list
I was using the old version (1.1.9). But couldn't make my flatlist fully draggable. Here was some issue in that version 1. unable to drag if list is long 2) can't move bottom to top. 3) sometime list item get stuck 4) scrolling stops after first time etc., So after looking for some solution with no result, i decided to upgrade the version of your library. But it is worsen the situation. Now the list is not moving at all. here is my dependencies:
"dependencies": {
"@react-native-community/async-storage": "^1.7.1",
"@react-native-community/datetimepicker": "^2.1.0",
"@react-native-community/netinfo": "^5.5.0",
"@sendgrid/mail": "^6.4.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "0.61.2",
"react-native-draggable-flatlist": "^2.3.1",
"react-native-gesture-handler": "^1.6.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-menu": "^1.0.0",
"react-native-reanimated": "^1.7.0",
"react-native-searchbar": "^1.16.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.4",
"realm": "^4.0.0-beta.0",
"uuid": "^3.4.0"
},
Here is my component structure:
<Root>
<ImageBackground>
.......
<View>
<DraggableFlatList
style={styles.listStyle}
data={this.state.customers}
renderItem={this.renderItem}
keyExtractor={item => item.borrower_id.toString()}
onMoveEnd={({ data }) => this.sortCustomerDetails(data)} />
</View>
........
</ImageBackground>
</Root>
...................
...................
renderItem = ({ item, index, move, moveEnd, isActive }) => {
return (
<TouchableHighlight
onLongPress={move}
onPressOut={moveEnd}
underlayColor="transparent"
onPress={ () => this.viewCustomerDetails(item)}>
<Customer customerDetails={item} />
</TouchableHighlight>
)
}
Customer.js
render() {
return (
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}
colors={['#4b2e80', '#583696', '#633da9', '#997cd0']}
style={styles.customerDetailsWrapper}>
<View style={ styles.customerDetails }>
<Text style={styles.borrower_name}>{this.props.customerDetails.name}</Text>
</View>
</LinearGradient>
);
}
Note: i only installed react-native-reanimated
and react-native-linear-gradient
but did not run react-native link as React-Native 0.6+ mention it will link every library automatically. I also wrapped the DraggableFlatList with SafeAreaView and ScrollView. But the result is same.
Please let me know if i missed something.
same on my end.. any updates on this?
same on my end.. any updates on this?
Ended up changing this library
same on my end.. any updates on this?
Ended up changing this library
can you share what you have successfully used?
same on my end.. any updates on this?
Ended up changing this library
can you share what you have successfully used?
https://github.com/benawad/drag-n-drop-flatlist
it is fully working in expo,, however you need to tweak a bit for RN CLI
Please let me know if i missed something.
move
in renderItem
has been replaced by drag
, onPressOut
is no longer needed, and the onMoveEnd
prop has been replaced by onDragEnd
.
Check out the sample code here.
Any solution for this.iOS works fine but drag functionality not working in android. Getting below warning in console.
attempt to call drag() on hovering component
broken on android
Very much broken on iOS for me. Here's a screencast.
The autoScroll doesn't really work for me. it's quite inconsistent. sometimes it does, sometimes it doesn't work.
I confirmed that it works with Expo 37, but it didn't work with apk. The version used is
"react-native-draggable-flatlist": "^2.3.1",
I had similar problem as dragging was not working. So I changed MainActivity.java with the following marked things now it works perfectly.
This did not work for me on Android. I'm using the drag and drop in a modal, but just does not move at all.
I had similar problem as dragging was not working. So I changed MainActivity.java with the following marked things now it works perfectly.
this worked for me
It worked for me to put my root inside a GestureHandlerRootView
. Hope it helps you too
It worked for me to put my root inside a
GestureHandlerRootView
. Hope it helps you too this worked for me, ths
I had similar problem as dragging was not working. So I changed MainActivity.java with the following marked things now it works perfectly.
That soloution worked for me a few month ago, but it seems like now (in another project) the MainActivityDelegate is managed in a new class in MainActivity.java like this:
public static class MainActivityDelegate extends ReactActivityDelegate {
public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
super(activity, mainComponentName);
}
@Override
protected ReactRootView createRootView() {
ReactRootView reactRootView = new ReactRootView(getContext());
// If you opted-in for the New Architecture, we enable the Fabric Renderer.
reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
return reactRootView;
}
}
If I override the ReactActivityDelegate method my app crashes after the build. Does anyone have a new soloution for this?
Okay, I found kind of a soloution myself: It seems like you shouldn't change the RootView in MainActivity.java and wrap your App inside a GesturehHandlerRootView (Some libaries like react-native-navigation already have a built-in GestureHandlerRootView).
But besides that my list is still not draggable
EDIT: Fixed it by wrapping my screen in a GestureHandlerRootView
Fixed it by wrapping DraggableFlatList component in GestureHandlerRootView
Package react-native-draggable-flatlist Issue unable to drag the list Solved you can Fix this by wrapping the component in GestureHandlerRootView (react-native-gesture-handler) and you should not change the MainActivity.java
import React, { useState, useCallback } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import {
RenderItemParams,
ScaleDecorator,
ShadowDecorator,
NestableScrollContainer,
NestableDraggableFlatList,
} from "react-native-draggable-flatlist";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { mapIndexToData, Item } from "./ListData";
const NUM_ITEMS = 6;
const initialData1 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
const initialData2 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
const initialData3 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
const App = () => {
const [data1, setData1] = useState(initialData1);
const [data2, setData2] = useState(initialData2);
const [data3, setData3] = useState(initialData3);
const renderItem = useCallback((params: RenderItemParams<Item>) => {
return (
<ShadowDecorator>
<ScaleDecorator activeScale={1.25}>
<RowItem {...params} />
</ScaleDecorator>
</ShadowDecorator>
);
}, []);
const keyExtractor = (item) => item.key;
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<NestableScrollContainer>
<Header text="List 1" />
<NestableDraggableFlatList
data={data1}
renderItem={renderItem}
keyExtractor={keyExtractor}
onDragEnd={({ data }) => setData1(data)}
/>
<Header text="List 2" />
<NestableDraggableFlatList
data={data2}
renderItem={renderItem}
keyExtractor={keyExtractor}
onDragEnd={({ data }) => setData2(data)}
/>
<Header text="List 3" />
<NestableDraggableFlatList
data={data3}
renderItem={renderItem}
keyExtractor={keyExtractor}
onDragEnd={({ data }) => setData3(data)}
/>
</NestableScrollContainer>
</View>
</GestureHandlerRootView>
);
}
function Header({ text }: { text: string }) {
return (
<View style={{ padding: 10, backgroundColor: "seashell" }}>
<Text style={{ fontSize: 24, fontWeight: "bold", color: "gray" }}>
{text}
</Text>
</View>
);
}
type RowItemProps = {
item: Item;
drag: () => void;
};
function RowItem({ item, drag }: RowItemProps) {
return (
<TouchableOpacity
activeOpacity={1}
onLongPress={drag}
style={[
styles.row,
{
backgroundColor: item.backgroundColor,
width: item.width,
height: item.height,
},
]}
>
<Text style={styles.text}>{item.text}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "seashell",
paddingTop: 44,
},
row: {
flexDirection: "row",
flex: 1,
alignItems: "center",
justifyContent: "center",
padding: 15,
},
text: {
fontWeight: "bold",
color: "white",
fontSize: 32,
},
});
export default App;