The 10-min React Native Swipe

In this video, we build a swiper with React Native 🍿
Source code: github.com/wca...
Wanna learn the fundamentals of declarative Gestures and Animations? Check out start-react-nat....
Do you like the series? You can support the channel by buying me a coffee at react-native.s... ☕️.
Are you sometimes asking yourself, "Can it be done in React Native"? Send me your suggestions at [e-mail]

[@majrohi1]

Such a priceless knowledge being shared for free. The world is still full of so many great people. Thank you for all this William!

[@toel_]

Every time I am overwhelmed by a feature, I find comfort in William Candilion's videos

[@wcandillon]

Thank You Apiut. I also often feel overwhelmed with this topic sometimes. And I like to get a step back and try to tackle the problem in small and digestible pieces.

[@youssefali6014]

this channel is like pure gold i cant stop watching your videos even in the holidays XD i just wanna thank you for sharing your knowledge and everything you (the redash library as well)

[@JoshBromberg]

Looking forward to the follow up to this! Would love to see it fully integrated with the pinch to zoom and everything similar to how Instagram functions.

[@wcandillon]

Josh you're gonna love next's week video 😅I'm so excited to share the next recipe of using this with the pinch gesture handler.

[@ВсадникАпокалипсиса-я9е]

@@wcandillon god how i hate your french accent, some words sound totally unintelligible

[@robertshawnmitchell]

Just did this and integrated the pinch gesture too! And used index to add a pagination UI overlay.

[@wcandillon]

That's fantastic 🙌🏻I'm currently attempting to have it pan within the zoomed image and seamlessly swiped when reaching the end of the zoomed image.

[@rajatgoyal8162]

Hey William thanks for this great video, but I am a beginner with animations, so can you start a series from scratch like basics to advance animation concepts in react native. We really want this kind of series.
❤️ from India.

[@mohammedsulthana9305]

❤️From Kerala, India

[@wcandillon]

🙌🏻 from beautiful Zürich Switzerland

[@mohammedsulthana9305]

@@wcandillon ❤️

[@42xzero]

Same 🤯❤️

[@mohammedsulthana9305]

@@42xzero Bro😍

[@joshuatal97]

This is great. Lol, also what font do you use in your dev environment?

[@Alejolas]

Hi William! You rock! Thanks for your videos! One question tho... in this one I had this problem: TypeError: (0, _reactNativeRedash.usePanGestureHandler) is not a function. (In '(0, _reactNativeRedash.usePanGestureHandler)()', '(0, _reactNativeRedash.usePanGestureHandler)' is undefined) What could it be?

[@vishalsinghsisodia]

Best channel for React Native Tutorial :) & what's about flutter for new project, it safe?

[@firedevelop]

thanks William, for shares so many codes!

[@wcandillon]

You are more than welcome, I'm having a blast doing it!

[@shubhamdogra6118]

Can you post a video on how to use a scrollview inside a pangesturehandler?

[@lostlost8164]

Thanks man, Its seems very easy when you do it.

[@usmansbk]

Finally learned what snapToInterval means

[@emclab5579]

Well done and solid code. Thank you. Do you have video of making both panGestHandler and pinchGestureHandler working together?

[@farzam-ng6hi]

that's grate william. make playlist for panresponder ,it will be awesome

[@tiborsaas]

Sorry, have to ask, why he uses cond(eq(... instead of:
if(state === State.ACTIVE) {
translateX = offsetX + translation.x
}
are these the same?

[@wcandillon]

This is because it's a declaration to be run on the UI thread not JavaScript code executed imperatively. I go deeper in this topic in this video: start-react-native.dev/lessons/the-heart-of-the-matter

[@crycetruly]

Thanks,Excited;

[@wcandillon]

Hope you like it!

[@willyrosahuanca696]

I love it, How can I get the index value out of the cycle, I want to use it on the UI to render an active dot.

[@michakaczanowicz331]

Could the same approach (horizontal ScrollView) be used to make a swipeable calendar, which is pretty much an "inifnite" collection of months?

[@smoilztv]

Can you do the same with screens instead of images?

[@dixeeta_varsani_official]

Hi, I'm stuck in clock hand animation using Panresponder. What I should do? In the scenario, people can freely rotate the clock hand of the clock and set time by their own of clock

[@stevet9103]

I tried to understand what you did there, but always when i swipe to fast it skips one or more images. How can i set a max width "for every scroll"?

[@apostolisgaros9666]

I'm new to Animations in React native and I find your content very usefull. One simple question tho: I tried to implement your swiper in my own project and I realised if i swipe fast it scrolls past a few image. What do i have to tweak to make it so it only snaps to the next or previous image?

[@AshwinMothilal]

I was trying to do this for a week and you did it in 10mins 🤣 I have one more doubt, shouldn't we use spring function instead of timing function as we have velocity.

[@wcandillon]

spring would be great too, make sure to not have too big oscillations. I used timing for simplicity here.

[@westfield90]

What plugin are you using to format your visual studio so that it formats the code when you pasted in closing tags

[@wcandillon]

It's the eslint autofix option

[@excalibur885]

What if i put this into a material top tab navigator? which has also 3 screens side by side swipeable, and lets say i put this in the middle screen.. will it prevent to swipe to side screens ?

[@mrousavy]

Is it possible to execute a JS function on handler state changed using react native redash? For example to navigate back by dragging down. (e.g. call navigate.goBack() if the translateY is greater than 0.8 * screen height)

[@mrousavy]

my bad, I forgot `call(..)` from reanimated exists.. awesome videos william!

[@leolynn89]

What cam do you use ?

[@masoudgolmohammadi7387]

your so awesome man. Tanks.

[@khaleddd]

Please do more small video format

[@wcandillon]

You got it :) I have some exciting stuff in the pipeline.

[@hfskillfair36]

How to set 3rd slide as active?

[@joseph.aowigo7553]

this guy is the monk

[@casusjoie]

Up down swipe is possible?

[@philheathslegalteam]

How would you make this an infinite swiper?

[@wcandillon]

I show the infinite swiper technique at th-cam.com/video/zF9rmPH00AA/w-d-xo.html if you send me a beautiful example of an infinite swiper, I would love to do it on the channel

[@badalah8272]

Thanks man.. btw please teach on udemy... can't wait for it..

[@wcandillon]

It will always be on start-react-native.dev/. To anyone who reads this: can I hook you up with a discount? My email is [e-mail]

[@teknologene]

I wish to see this being implemented in react-native-reanimated v3

[@wcandillon]

you should find this version useful: th-cam.com/video/yBuhnVDXekQ/w-d-xo.html
Also this one relates nicely to the topic: th-cam.com/video/PzKWpwmmRqM/w-d-xo.html

[@teknologene]

@@wcandillon oh God thank you for responding! I’ll look into it

[@teknologene]

@@wcandillon thanks I got it implemented!

[@asadraza4522]

Very Good 👍

[@gururajmoger8649]

Pls do more fancy ui that is not available and it's available in flutter 👌

[@wcandillon]

Please send me suggestions if you have some.

[@gururajmoger8649]

@@wcandillon
There r lots of pretty ui in youtube which has built by flutter and I didn't find something like in react..

[@fofahahahaha]

whats sean evans doing?

[@arnolddevmode9603]

your the best!

[@ОльгаДерябина-х3и]

I love your accent😍

[@drone_aja]

I like your accent

[@wcandillon]

Thank You Nyoba! I should really make an effort to speak clearer sometimes 😅

[@drone_aja]

@@wcandillon it's okay . I hope you made a lot of video tutorials again👍

[@markopavlovic6066]

NISI ЧИТАВ