Animated Swipe Button - Reanimated v2 | React Native Tutorial ⚛️

[@김건희-z2s]

hi. youre code doesn't work anymore... please update your code??

[@FuncsIO]

Thanks for highlighting this. Taking a deeper look at it and will try to fix it if required

[@lorran-xo]

For those who Swipe Button is not working, import GestureHandlerRootView from react-native-gesture-handler and wrap SwipeButton on it, worked for me.
import {GestureHandlerRootView} from 'react-native-gesture-handler';

[@joseestradadev]

Thanks, this has worked for me!

[@anandthakur4620]

My slider is not working can you please give me solutions

[@lorran-xo]

Import GestureHandlerRootView from react-native-gesture-handler and wrap SwipeButton with it, worked for me.
import {GestureHandlerRootView} from 'react-native-gesture-handler';

[@mad-mak]

@@lorran-xo dude!!!! i can't thank you enough

[@dineshm2757]

dude - you should do more videos, your style of teaching is actually far better than the good guys. restart uploading videos. will be worth your time and help others too.

[@gokulmano7024]

need video for swipe button for react pwa

[@FuncsIO]

Noted 👐

[@gokulmano7024]

@@FuncsIO thank you

[@SalahDev-wz8ob]

bro, u nailed it well done, just i'm having an issue where I'm using expo, the problem is the code works perfectly with ios, but it doesn't with Android

[@RenalTutor]

cannot gesture

[@feritejakusuma8450]

Thanks for the video ,👍👍👍

[@mohdsajidshaikh4291]

Pls make a video how to make floating overlay component in other apps using RN

[@JimitShah-ec9ph]

Bro great stuff, this really help me build similar component, but i want this button to be responsive as per the parent component, and from what i understand is we need to provide a number as width for this to render accordingly, any idea how can we make it responsive, thanks.
I tried using Screenwidth but than will need to pass Screenwidth - somevalue from parent to this component

[@FuncsIO]

Hey Jimit 👋
Glad to hear that. If you want to make this responsive you can put all the values in React State and use this hook to update the computed value reactnative.dev/docs/usewindowdimensions

[@surajtopal9940]

amazing sir , thanks a lot

[@oderflaj]

Thank you !!! I had to make some changes to implement in Snack: I had to add GestureHandlerRootView to wrap the main part of the PanGestureHandler and also I had to use import {LinearGradient} from 'expo-linear-gradient' instead of import LinearGradient from 'react-native-linear-gradient'

[@FuncsIO]

Thanks for highlighting this, will make the same changes if required. Happy Hacking 🙌

[@surajmohanty528]

Getting error [Error: TransformError src\components\SwipeButton.js: D:\ReactNativeprojects\ezpoz\src\components\SwipeButton.js: Cannot find module '@babel/preset-typescript'. Please help me bro.Even i'm not using typeScript

[@sagarramaswamy8368]

Thanks a lot 👍

[@ehsankhorasani_]

Awesome man

[@AungMyintThein]

So cool!

[@ShubhamSingh-gw9kq]

Bro, my android phone flickers on runOnJS setToggle when used withTiming in place of withSpring, any soln for that?

[@FuncsIO]

Oh, looks like you need to change some parameters here and there as withTiming takes different set of parameters to interpolate as compared to withSpring

[@emclab5579]

Well done & thank you!

[@vinhandev]

tks for sharing

[@FuncsIO]

Thanks for watching

[@z4ckfytc777]

Hi, great tutorial. I had an issue... my swipeable doesn't move :( anyone can help?

[@oderflaj]

try wrapping the View of the component with GestureHandlerRootView

[@sovannborithyun5205]

I got this issue when implementing your Swipe Button.
TypeError: (0, _reactNativeReanimated.useSharedValue) is not a function. (In '(0, _reactNativeReanimated.useSharedValue)(0)', '(0, _reactNativeReanimated.useSharedValue)' is undefined)

[@FuncsIO]

Seems like reanimated is not installed properly. Pls refer the docs for the changes required in the native side for the successful installation.

[@oxygame9385]

@@FuncsIO same as me. im using expo and follow step for instalation. after that i cant run my project anymore. when i run the project the expo will force close. The Error said (TypeError: Object.values requires that input parameter not be null or undefined) whats the problem?

[@jaysonhahn5881]

Thank you!

[@FuncsIO]

Anytime

[@raziel0l]

Maybe I am out of a topic, but does anyone know how is there any way to run the measure (reanimated 2) function in useEffect hook? That is bothering me for a few days. I already tried runOnJS function.

[@FuncsIO]

Can you try useLayoutEffect instead of useEffect

[@raziel0l]

@@FuncsIO Tried, still getting error (measure) method cannot be used on RN side! :(

[@samyakjain8264]

thanks a lot

[@chrislopes9403]

totaly awesome!! loved it! I added a navigation on handleComplete() function but now I am not understanding how can I reset it to initial position once I come back to this screen. Can you please help me?

[@meetsorathia2937]

Did you figured out?

[@meetsorathia2937]

I found the way:
// Fires when animation ends
const handleComplete = (isToggled: any) => {
if (isToggled !== toggled) {
setToggled(isToggled);
props?.onToggle();
setTimeout(() => {
X.value = withSpring(0);
runOnJS(handleComplete)(false);
setToggled(false);
}, 1000);
}
};

[@quaidbergo]

Great video, thanks a lot 👍

[@all-in-all7862]

Good 👍. Can u create video like drag and short list and grid view using animation.

[@all-in-all7862]

@@FuncsIO In Flatlist, list of images are there like list view and grid view I won't drag and short all images using Pangature animation.

[@Jimmy-nh1cd]

Muy buen trabajo! :D

[@ranaarslan5237]

Great work 👍

[@FuncsIO]

Thanks for the positive feedback