v0.11.0

[LunatiqueCoder]

Introduction

When developing anything, there are usually 3 parts of the process:

1. Make it work
2. Make it right
3. Make it fast

• This PR is a Proof of concept of Major improvements #165 where we're almost finalising step 1.

The code is a total mess, lots of TypeScript errors, bad constant namings, experiments, etc. But it's something that's working!

▶️ Video: https://x.com/LunatiqueCoder/status/1721982083902394694?s=20

How to test

1. Git clone this branch.
2. Run yarn link in the terminal where you cloned the branch.
3. Run yarn && yarn tsc -w in the terminal where you cloned the branch.
4. Run yarn link react-native-drax in the terminal where your project is (to link to the cloned branch).

If you don't have an existing drax project, you can git clone LunatiqueCoder/expo-drax-example

5. Run rm -rf node_modules && yarn to install the linked branch.

6. Your metro.config.js should look like this:

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);


config.resolver.disableHierarchicalLookup = true;
// 2. Let Metro know where to resolve packages and in what order
config.resolver.nodeModulesPaths = [
  // Other packages, like redux-toolkit, might require the following as well
  path.resolve(__dirname, 'node_modules/@reduxjs/toolkit/node_modules'),

  // Because we're disabling hierarchical lookup, we have to tell what node_modules to use
  path.resolve(__dirname, 'node_modules'),
];

config.resolver.enableGlobalPackages = true;
config.watchFolders = ['/Users/myuser/OpenSource/react-native-drax'];


module.exports = config;

7. Run yarn start in your project.

8. Run the app

[LunatiqueCoder]

Ok, so I tested this on the expo-drax-example and also on our project both mobile+web. It works pretty well. Now it's time to cleanup the code and improve it as much as possible.

Also, Drax should benefit from the new Architecture features by using for example useLayoutEffect instead of onLayout, etc, etc.

@lafiosca When it gets in a better shape, can you help me release a beta version? I'd love to get the feedback from the community as well.

[LunatiqueCoder]

❤️❤️ I just love this

Screen.Recording.2024-10-31.at.09.03.23.mov

[lafiosca]

Awesome work, I can try to help when ready!

[agonselimi]

Awesome work @LunatiqueCoder 🙌 . When is this expected to be ready?

[agonselimi]

Writing again here since I am using this great library into one of my projects, and it is a life saver. Can we expect a deadline approx. when this new version would be released? Would really appreciate your answer, and also your great work making this library work like it should again.

[simonarcher]

Also just commenting here to keep an eye on progress and if we can help test or assist with anything :)

[trantuandatvietnam]

@LunatiqueCoder, Did you remove DraxList from this version?

[LunatiqueCoder]

@trantuandatvietnam The DraxList is still in progress unfortunately, and I commented it completely for now. :(

[trantuandatvietnam]

@LunatiqueCoder, Thanks for the response. You're so hardworking, hope you have a happy holiday. I'm a programmer without many years of experience, so I can't help much. Hope you come back soon and contribute to this wonderful library!

[ifeoluwak]

@LunatiqueCoder Would love to assist. Please let me know how I can be of help to get this update released

[LunatiqueCoder]

@trantuandatvietnam Added new arch support + DraxList PARTIALLY working. Still have to make the shift animations to use reanimated. Hopefully will finish today.

[simonarcher]

@LunatiqueCoder you're doing some amazing work here man! 😊

[LunatiqueCoder]

DraxList is now working with reanimated + I also fixed some TS errors.

Time to cleanup code, investigate performance optimisations, write docs, etc.

[lafiosca]

When @LunatiqueCoder is all ready and I am back home we will coordinate a pairing session to review and figure out the best way to get all the new work packaged and shipped.

[LunatiqueCoder]

🚧 🚧 Still a Work in Progress

Added some cool animations:

• Snapping to target on successful drop, not just back into its place
• DraxList can be aware of external drags and shift item layouts accordingly to make room for the new item
• DraxList also animates items if they are removed/added, not if you just drag items inside it.
• Everything on iOS, Android and web!

Screen.Recording.2025-02-16.at.15.53.57.mov

[athusrv]

Hey @LunatiqueCoder thank you for your effort in reviving this amazing package!
Would love to try this in a production app but using the git url schema in the package.json doesn't seem to work.

Any ideas how I could do that?
Also, is there any ETA for when this will be shipped?

[athusrv]

This is the error I got:

Error: While trying to resolve module `react-native-drax` from file `/Users/athusvieira/workspace/asaph/asaph/src/features/ServiceOrder/ServiceOrder.tsx`, the package `/Users/athusvieira/workspace/asaph/asaph/node_modules/react-native-drax/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/athusvieira/workspace/asaph/asaph/node_modules/react-native-drax/build/index.js`. Indeed, none of these files exist:

  * /Users/athusvieira/workspace/asaph/asaph/node_modules/react-native-drax/build/index.js(.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg)
  * /Users/athusvieira/workspace/asaph/asaph/node_modules/react-native-drax/build/index.js/index(.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg)
    at DependencyGraph.resolveDependency (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/node-haste/DependencyGraph.js:260:17)
    at /Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/lib/transformHelpers.js:165:21
    at resolveDependencies (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 6929)
    at async buildSubgraph (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)
    at async Graph._buildDelta (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/Graph.js:157:22)
    at async Graph.traverseDependencies (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/Graph.js:49:19)
    at async DeltaCalculator._getChangedDependencies (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:187:42)
    at async DeltaCalculator.getDelta (/Users/athusvieira/workspace/asaph/asaph/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:68:16)

This is the package.json fragment:

"react-native-drax": "https://github.com/LunatiqueCoder/react-native-drax.git#drax-v11"

Using RN 0.77

[LunatiqueCoder]

Hello @athusrv . Using the branch URL will not be enough. Add me on discord @LunatiqueCoder and i'll give you a patch to use with patch-package, the same one we use in production currently.

Before we release a beta to the public, we want to be sure everything is good on our side since we have lots of drag an drop activities to test and receive feedback for.

[LunatiqueCoder]

Just pushed a commit with HUGE breaking changes in the DraxList component. Some examples:

• Added parentDraxViewProps
• style prop has moved to parentDraxViewProps. If you use style, it will be applied directly on the FlatList component now, not on the DraxView wrapper of the Flatlist.
• <DraxListItem /> is now exported to have even more control over the FlatList items.
• renderItem will be now used with <DraxListItem /> instead of renderItemContent
• Web support works good

Still have to do:

• Huge refactoring and cleanup
• Performance optimisations. - on development looks kind of bad. However, production builds seem reasonable for now. (check videos below in development)

🏎️ We use this branch in production at English Discoveries app

✅ Supports FlatList's numOfColumns very well. Dynamic positioning is supported, you're not stuck with just a grid layout

Screen.Recording.Feb.25.2025.mov

✅ Drag items from a DraxList to another DraxList

Screen.Recording.2025-03-23.at.10.08.34.mov

[SamyMP]

Hi @LunatiqueCoder, thank you very much for your hard work ! This library's update seems promising !

I would like to know if there is a way I could use this in my application and if yes, how to proceed ?

[norellanac]

Here is my patch-package file:
react-native-drax+0.10.3.patch

---

I was able to build this patch file with the following steps:

• Update your package.json with:

"react-native-drax": "LunatiqueCoder/react-native-drax#drax-v11"

• Install dependencies.

• Navigate to the package directory:

cd node_modules/react-native-drax

• Run TypeScript compilation:

npx tsc

Make a copy of the build folder files—you'll need them later to replace the node module package build folder.

Revert the change in package.json.

Install dependencies again. yarn install || npm install

Replace the build folder in node_modules/react-native-drax with the copied files.

Once the files have been replaced, run:

npm install patch-package postinstall-postinstall --save-dev
yarn install patch-package postinstall-postinstall -D

Finally, generate the patch file:

npx patch-package react-native-drax