Is there someone that understands this package that could help me?

[thegirlyoucallryan]

I am new to developing altogether but i've coded about 75% of an app and I just need to be able to drag and drop a flatlist but I am getting errors.. from my state I assume which is because its an array of objects

const favorites = useSelector(state => state.favorites.favoritedExercises);
  const [newFavorites, setNewFavorites] = useState(favorites);

//favorites model: class Exercise { constructor(id, name, gifUrl, equipment, sets=4){ this.id = id; this.name = name; this.gifUrl = gifUrl; this.equipment = equipment; this.sets = sets;

}

}

export default Exercise;

/// reducer state

const initialState = { favoritedExercises: [],

}

I see it now on the dom but it doesn't react or move...

I passed in the alpabet string as the initial state to see if it works and I see it on the dom but nothing moves. I am using android similator. Is this still not workable with android?

import { DraxProvider, DraxList, DraxView, DraxViewDragStatus } from 'react-native-drax'; import { Animated, Easing, Dimensions, Platform, } from 'react-native'; import { useState, useRef, FlatList} from 'react';

const FavoritesScreen = props => {

const favorites = useSelector(state => state.favorites.favoritedExercises);

let fav = favorites.map(item => (item.name))

const [newFavorites, setNewFavorites] = useState(fav);
const listRef = useRef();

return (   
       <DraxProvider>
           <SafeAreaView
         >
           <DraxList
                ref={listRef.current}
                data={newFavorites}
                renderItemContent={({ item }, { viewState, hover }) => (
                    <View
                        style={
                            [(viewState?.dragStatus === DraxViewDragStatus.Dragging && hover)
                                ? styles.hover
                                : undefined,
                        ]}
                    >
                        <View style={styles.workoutItem}><Text style={styles.name} >{item}</Text></View>

                        </View>
                        )}
                        onItemDragStart={({ index, item }) => {
                            console.log(`Item #${index} (${item}) drag start`);
                        }}
                        onItemDragPositionChange={({
                            index,
                            item,
                            toIndex,
                            previousIndex,
                        }) => {
                            console.log(`Item #${index} (${item}) dragged to index ${toIndex} (previous: ${previousIndex})`);
                        }}  onItemDragEnd={({
                            index,
                            item,
                            toIndex,
                            toItem,
                        }) => {
                            console.log(`Item #${index} (${item}) drag ended at index ${toIndex} (${toItem})`);
                        }}
                        onItemReorder={({
                            fromIndex,
                            fromItem,
                            toIndex,
                            toItem,
                        }) => {
                            console.log(`Item dragged from index ${fromIndex} (${fromItem}) to index ${toIndex} (${toItem})`);
                            const newData = newFavorites.slice();
                            newData.splice(toIndex, 0, newData.splice(fromIndex, 1)[0]);
                            setNewFavorites(newData);
                        }}
                        keyExtractor={(item) => item}
                        ListHeaderComponent={() => (
                            <View style={styles.header}>
                                <Text style={styles.headerText}>
                                    Long-press any list item to drag it to a new position.
                                    Dragging an item over the top or bottom edge of the container
                                    will automatically scroll the list. Swiping up or down
                                    without the initial long-press will scroll the list normally.
                                </Text>
                            </View>
                        )}
                    />
           </SafeAreaView>
</DraxProvider>

)

};

package.json

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.3.0", "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3", "@fortawesome/free-solid-svg-icons": "^6.0.0", "@fortawesome/react-fontawesome": "^0.1.17", "@fortawesome/react-native-fontawesome": "^0.2.7", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.2.0", "axios": "^0.26.0", "expo": "~44.0.0", "expo-app-loading": "~1.3.0", "expo-linear-gradient": "~11.0.3", "expo-status-bar": "~1.2.0", "firebase": "^9.6.7", "firebase-functions": "^3.18.1", "react": "17.0.1", "react-dom": "17.0.1", "react-icons": "^4.3.1", "react-native": "0.64.3", "react-native-draggable-flatlist": "^3.0.5", "react-native-drax": "^0.9.3", "react-native-elements": "^3.4.2", "react-native-gesture-handler": "~2.1.0", "react-native-linear-gradient": "^2.5.6", "react-native-reanimated": "~2.3.1", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "~3.10.1", "react-native-sortable-list": "^0.0.24", "react-native-svg": "^12.1.1", "react-native-web": "0.17.1", "react-navigation": "^4.4.4", "react-navigation-header-buttons": "^6.3.1", "react-navigation-material-bottom-tabs": "^2.3.5", "react-navigation-stack": "^2.10.4", "react-redux": "^7.2.6", "redux": "^4.1.2", "redux-thunk": "^2.4.1" }, "devDependencies": { "@babel/core": "^7.12.9", "typescript": "^4.5.5" }, "private": true }

[lafiosca]

I apologize that I do not have time to look into this right now in more detail, but if you're having trouble with Android I would suggest trying to get react-native-drax-example running locally and see if that works. If that works but your app does not, it is possible that this library is not compatible with the current version of react-native-gesture-handler on Android, as discussed in #130

[thegirlyoucallryan]

ok thanks. Can I just ask...i installed drax and then what I posted is what I added to the project. Is there anything I need to pull from other files?

Does anything jump out at you?

Sorry to bother I'm just so close to being done and so stuck... and banned from stack overflow, apparently from asking my noob questions.

[lafiosca]

Nothing jumps out at me from the code above, but have you correctly set up react-native-gesture-handler in your app and verified that it works on its own (without using Drax)?

[thegirlyoucallryan]

I am just going to build it from scratch... hopefully. I got pretty far just working out some bugs. thanks though

[lafiosca]

Ok, best of luck to you. I will close out this issue.