v11 alpha

[xdarkleonx]

I need some help to migrate to v11 alpha. DraxListItem is not positioned correctly after dragging. Since there is no API description and fresh examples, maybe I missed something.

Reproduction: https://github.com/xdarkleonx/expo-drax-example

Using:

• "react": "19.0.0"
• "react-native": "0.79.2"
• "react-native-drax": "^0.11.0-alpha.2"

<DraxProvider>
        <DraxList
          ListEmptyComponent={renderEmpty}
          ListHeaderComponent={renderHeader}
          directionalLockEnabled={!isDragMode}
          overScrollMode='never'
          longPressDelay={100}
          showsVerticalScrollIndicator={false}
          data={deferredMeals}
          // viewPropsExtractor={() => mainLayout.draxlistView}
          keyExtractor={(_, index) => index.toString()}
          renderItem={renderMeals}
          onItemReorder={({ fromIndex, toIndex }) => onMealReorder(fromIndex, toIndex, flatListMeals)}
        />
</DraxProvider>

const renderMeals = (info, itemProps) => {
    return (
      <DraxListItem
        itemProps={itemProps}
        draggable={isDragMode}
      >
        <Meal
            isDraggable={isDragMode}
            mealIndex={info.index}
            time={info.item.time}
            nutrients={info.item.nutrients}
            accepted={info.item.accepted}
          />
      </DraxListItem>
    )
  }

const onMealReorder = async (fromIndex, toIndex, meals) => {
    const newData = [...meals];
    const item = newData.splice(fromIndex, 1)[0];
    newData.splice(toIndex, 0, item);
    await dispatch(reorderMeals(meals));
  }

https://drive.google.com/file/d/137nKEHk3rxlu-uTjmQF5MugJaNopDHam/view?usp=sharing

[LunatiqueCoder]

Hello @xdarkleonx , unfortunately DraxList comes with lots of breaking changes. Expect other breaking changes in upcoming versions too.

Unfortunately, I might need a reproduction repository if you can set it up by any chance for me? It will be much easier to help you out. I couldn't figure out what would be wrong with your current implementation. Perhaps a video could also help? Before and after?

[LunatiqueCoder]

Perhaps renderContent prop of DraxListItem would be better:

    <DraxListItem
      draggable
      itemProps={itemProps}
      longPressDelay={200}
      renderContent={({ viewState, hover }) => {
        const { dragStatus } = viewState;

        const dragged = dragStatus !== DraxViewDragStatus.Inactive;

        const style = [
          styles.drax,
          styles.answer,
          styles.shadow,
          hover && styles.answerPressed,
          dragged && !hover && styles.dragging,
        ];

        return (
        <Meal
            isDraggable={isDragMode}
            mealIndex={info.index}
            time={info.item.time}
            nutrients={info.item.nutrients}
            accepted={info.item.accepted}
          />
        );
      }}
    />

[xdarkleonx]

Doesn't work. The same mess when dragging. I tried replacing the component with a simple . In the itself, I deleted all the unnecessary ones and left only with and it didn't help. I think this is a problem with DraxList.

[xdarkleonx]

DraxView inside Meal component works fine, but DraxList has some problems.

[LunatiqueCoder]

@xdarkleonx Add me on Discord and let's see what I can help you with. I'm with the same username as on Github: lunatiquecoder

[maihuy243]

Have you solved the problem yet? @xdarkleonx

[LunatiqueCoder]

@maihuy243 maybe this example repo will help: https://github.com/LunatiqueCoder/expo-drax-example

[maihuy243]

I am trying to drag and drop between 2 lists sir @LunatiqueCoder