We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Describe the bug When using the main snack example with small adjustments I see an element moving down and then stopping.
I think it would be expected that the element does not move if the conditions to active the scroll are not matched.
To Reproduce Going to write the code here because is very similar to the main snack:
import React, {useState} from 'react'; import {Text, StyleSheet, TouchableOpacity} from 'react-native'; import DraggableFlatList from 'react-native-draggable-flatlist'; const NUM_ITEMS = 30; function getColor(i: number) { const multiplier = 255 / (NUM_ITEMS - 1); const colorVal = i * multiplier; return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`; } type Item = { key: string; label: string; height: number; width: number; backgroundColor: string; }; const initialData: Item[] = [...Array(NUM_ITEMS)].map((d, index) => { const backgroundColor = getColor(index); return { key: `item-${index}`, label: String(index) + '', height: 100, width: 60 + Math.random() * 40, backgroundColor, }; }); export const MyRankings = () => { const [data, setData] = useState(initialData); const renderItem = ({item, drag, isActive}: RenderItemParams<Item>) => { return ( <TouchableOpacity onLongPress={drag} disabled={isActive} style={[ styles.rowItem, {backgroundColor: isActive ? 'red' : item.backgroundColor}, ]}> <Text style={styles.text}>{item.label}</Text> </TouchableOpacity> ); }; return ( <DraggableFlatList data={data} onDragEnd={({data}) => setData(data)} keyExtractor={item => item.key} renderItem={renderItem} /> ); }; const styles = StyleSheet.create({ rowItem: { height: 50, width: 50, alignItems: 'center', justifyContent: 'center', }, text: { color: 'white', fontSize: 24, fontWeight: 'bold', textAlign: 'center', }, });
Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).
Additional context My app looks like this:
const App = () => { return ( <React.StrictMode> <GestureHandlerRootView style={{flex: 1}}> <MyRankings /> </GestureHandlerRootView> </React.StrictMode> ); };
I think this could be related to #509
The text was updated successfully, but these errors were encountered:
Quick update here, if you create 200 instead of 30 you can get this behavior, which is another bug where the dragged row doesn't show the content:
Sorry, something went wrong.
Same problem. Did you manage to fix this?
Is there a better drag and drop list for React Native? I wanted to like this one but seems to be unstable and semi-abandoned. Not production ready.
No branches or pull requests
Describe the bug
When using the main snack example with small adjustments I see an element moving down and then stopping.
I think it would be expected that the element does not move if the conditions to active the scroll are not matched.
To Reproduce
Going to write the code here because is very similar to the main snack:
Screen.Recording.2023-12-19.at.00.50.47.mov
Platform & Dependencies
Please list any applicable dependencies in addition to those below (react-navigation etc).
Additional context
My app looks like this:
I think this could be related to #509
The text was updated successfully, but these errors were encountered: