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

Подписаться 943

Просмотров 17 тыс.

50% 1

A beginner friendly approach of creating an animated swipe button in React Native using the new React Native Reanimated v2
GitHub : github.com/funcsio/react-nati...
PC Specs
Ryzen 5 5600x - amzn.to/2PYi69p
Aorus B550 Pro AC - amzn.to/3cqLGf3
Cooler Master Hyper 410R RGB - amzn.to/2PZMLmH
Corasir Vengeance RGB PRO 16GB - amzn.to/3vhASZw
Antec NX800 - amzn.to/2Oj3CR4
GT710 - amzn.to/2OPKY2N
Music - • FREE Old School Dark R...

Опубликовано:

24 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@emclab5579 3 года назад

Well done & thank you!

@lorran-xo 2 года назад

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!

@AungMyintThein 2 года назад

So cool!

@ehsankhorasani_ 2 года назад

Awesome man

@quaidbergo 2 года назад

Great video, thanks a lot 👍

@feritejakusuma8450 3 года назад

Thanks for the video ,👍👍👍

@surajtopal9940 Год назад

amazing sir , thanks a lot

@sagarramaswamy8368 10 месяцев назад

Thanks a lot 👍

@oderflaj 2 года назад

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 🙌

@Jimmy-nh1cd 3 года назад

Muy buen trabajo! :D

@ranaarslan5237 3 года назад

Great work 👍

@FuncsIO 3 года назад

Thanks for the positive feedback

@jaysonhahn5881 Год назад

Thank you!

@FuncsIO Год назад

Anytime

@samyakjain8264 2 года назад

thanks a lot

@vinhandev 6 месяцев назад

tks for sharing

@FuncsIO 6 месяцев назад

Thanks for watching

@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?

@mohdsajidshaikh4291 3 года назад

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

@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

@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

@all-in-all7862 3 года назад

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

@all-in-all7862 3 года назад

@@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.

@raziel0l 2 года назад

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 2 года назад

Can you try useLayoutEffect instead of useEffect

@raziel0l 2 года назад

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

@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

@surajmohanty528 2 года назад

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

@z4ckfytc777 2 года назад

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

@oderflaj 2 года назад

try wrapping the View of the component with GestureHandlerRootView

@dineshm2757 2 года назад

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.

@sovannborithyun5205 3 года назад

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 3 года назад

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

@oxygame9385 2 года назад

@@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?

@gokulmano7024 Год назад

need video for swipe button for react pwa

@FuncsIO Год назад

Noted 👐

@gokulmano7024 Год назад

@@FuncsIO thank you

@anandthakur4620 2 года назад

My slider is not working can you please give me solutions

@lorran-xo 2 года назад

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