Duolingo example

[corscheid]

The Duolingo drag and drop example in Season 4 is really awesome! I have been playing around with this to learn more about how it works.

I have one question that is really bugging me badly, after trying for 2 days to do it:

How does one make the CHECK button work?

I cannot figure out how to get or use the offset.order.value in SortableWord from any other component / function above it in the tree, or how to get any other helpful information generated by or within the animation side in order to check the answer when the button is clicked in the Footer. Surely there must be a way to enable this functionality...

[joseoct]

@corscheid Any progress? I'm trying too.

[corscheid]

@corscheid Any progress? I'm trying too.

Unfortunately not. I put this on hold for now, but I am still very interested in knowing how to do this. I just got very frustrated with attempting to do this and so started working on some of the other things on my to-do list.

[AyushBorage28]

Hi @corscheid ,
I'm having trouble running the duolingo project. can u please help me out?

[corscheid]

Hi @corscheid , I'm having trouble running the duolingo project. can u please help me out?

git clone [email protected]:wcandillon/can-it-be-done-in-react-native.git
cd can-it-be-done-in-react-native/season4
yarn
yarn start --clear

Expo Go:

This project uses SDK 41.0.0, but this version of Expo Go only supports the following SDKs: 49.0.0, 48.0.0, 47.0.0. To load the project, it must be updated to a supported SDK version or an older version of Expo Go must be used.

Yeah it's as I thought, it's a 2-3 year old Expo app that has not been updating with the SDK and tooling. Expo changes a lot and moves pretty fast, probably in part because the mobile platforms it supports do.

Way too much has changed from Expo 41 to Expo 49 (latest stable at time of this writing). Nearly every single thing about this Duolingo project is deprecated and left in the dust by now.

I had this issue with another project I created with Expo. Its Expo and tooling were so behind and there were so many deprecations, that a complete rewrite ended up being faster than trying to migrate from each single major version from then til now. if that makes sense.

Needless to say, I have given up on this venture as of not too long after my previous comment. It was cool looking, at the time, but I could not get it to do anything useful anyway.

Maybe someone can go through and update the app so that it will run on supported versions of Expo and React Native etc. then submit it as a PR?

[AyushBorage28]

Hey @corscheid,

Thanks for your reply.

Actually I am making a quiz app on react native wherein-

• Questions will be displayed with some masked words.(blanks)
• The user will be provided with those masked words, which he needs to drag and drop in the correct order to pass the quiz.

Can u suggest the most efficient and easy-to-apply way or any library through which I can accomplish this?

I have tried react-native-draggable. But it's too basic. I manually have to create the drag zone and drop zone which is very tedious and I am not able to do so.

It's a quiz app for children so I needed the UI to be clean and beautiful, I thought what better than the Duolingo app.

I tried converting the TS code into JS and running in my project.(As I have built the project in JS). But it keeps getting version errors of either reanimated or something else.

I would be very glad if you could guide me or provide me an example code snippet for the same.

Thanks.

[corscheid]

That sounds awesome!

Sadly, I have no idea how to accomplish this. I have not looked at it for at least a year. I would think surely there must be a way. When I was last looking into these drag/drop/animations things, it seemed like Animation was handled in an entirely separate untouchable thread than app logic, so it was damn impossible to get anything to happen due to an animation having happened, or due to an item moving from point A to B on the screen. It's like, animations can interact with each other, non-animation can influence each other, but there is no way between these two realms? I hope I'm mistaken but this was the conclusion I came to when trying my ass off with this repo getting the button to check the answer

[AyushBorage28]

That sounds awesome!

Sadly, I have no idea how to accomplish this. I have not looked at it for at least a year. I would think surely there must be a way. When I was last looking into these drag/drop/animations things, it seemed like Animation was handled in an entirely separate untouchable thread than app logic, so it was damn impossible to get anything to happen due to an animation having happened, or due to an item moving from point A to B on the screen. It's like, animations can interact with each other, non-animation can influence each other, but there is no way between these two realms? I hope I'm mistaken but this was the conclusion I came to when trying my ass off with this repo getting the button to check the answer

Hi,

I am having issues finding the perfect library for implementing drag and drop feature.

I need help finding the right library. Not making the check button work.

Thanks

[corscheid]

Right, sorry for the confusion. When I said,

Sadly, I have no idea how to accomplish this. I have not looked at it for at least a year. I would think surely there must be a way.

I was referencing what you are requesting, a working library for drag and drop on RN/Expo (particularly, one where the drag/drop actually has an effect other than a purely visual one)

I'm in the same boat as you, ultimately. I would also love to have this functionality or know how to achieve it.
This repo isn't it (it was a cool proof of concept of the visual part though). And I don't know unfortunately what is..

Sorry I couldn't be of more help

[AyushBorage28]

Right, sorry for the confusion. When I said,

Sadly, I have no idea how to accomplish this. I have not looked at it for at least a year. I would think surely there must be a way.

I was referencing what you are requesting, a working library for drag and drop on RN/Expo (particularly, one where the drag/drop actually has an effect other than a purely visual one)

I'm in the same boat as you, ultimately. I would also love to have this functionality or know how to achieve it.
This repo isn't it (it was a cool proof of concept of the visual part though). And I don't know unfortunately what is..

Sorry I couldn't be of more help

Yeah, I understand.
Thanks for your time.