#3 Animated Login Screen - Professional Animations in React Native | Reanimated | Gesture Handler

[@incognitoYSL]

I can’t believe we’re getting this for free. this is really incredible! thank you sir!😀

[@MrBarralex]

Man this guy is a beast, I was following the tree videos and thinking, man wtf so wise. Kudos to you.

[@tziortziskyprianou2725]

Very nice, the only problem is the keyboard. How do we properly use KeyboardAvoidingView ?

[@joshuawachira3742]

hey i have the same problem did u know how to fix it

[@Emperorkovic]

thanks man.. really great... though i observe that the textInputs jump into the svg image when you try to enter text

[@manvindersingh8957]

You are genius! Great. Really enjoyed this.

[@elchinobedregal]

A temporary fix I've made for the problem with the keyboard is to change the first container view with this: and also add to the animated container of the inputs this styles: backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30,

[@phonenai5935]

You fixed it, good

[@-ab3ad926]

Thanks, you saved this tut ^_^

[@pixelgruen]

You are awesome dude!!!

[@johntony4987]

Don't forget to add zIndex: -1 for not cut X into half

[@zaidjamil2945]

Awesome dude!! for the behavior do this to work on ios and android behavior={Platform.OS == "ios" ? "padding" : "height"}

[@aleks6331]

Great series, thanks! Can you please tell me is there a benefit using TapGestureHandler instead of TouchableWithoutFeedback in this case?

[@mulwelimushiana8388]

My question exactly

[@nikhil-saxena]

Amazing man! You are doing an amazing work in animation in react-native. 👏🏻

[@jarceantonio]

Very nice tutorial. I found an issue with this example, when you test in a real device or press cmd+k in order to show the keyboard of the simulator, the keyboard covers all de sign in form. I hope you solve this issue. Anyway this is a really good content. Thanks man.

[@ErHarinderSingh]

I am facing this too. Have you resolve it?

[@htomontenegro]

You are awesome!! How can I move the background when Keyboard appears? I'm trying with a keyboard listener but still can't fix it

[@michaelgrunewalder9879]

Great and easy to follow tutorial, Thanks! Only issue I have at the moment is that on iOS (13.5) the image totally disappears when I use the SVG wrapper. On Android all is ok.

[@HK-wp9qw]

I can’t thank you enough for sharing this, it’s exactly what I was looking for

[@aRookieProgrammer]

Oh my god Varun! this is pure genius!

[@khumozin]

Great series 💯 However, when typing in the textinput, the keyboard hides the form 🤷🏽‍♂️

[@shubamdadhwal3497]

please can u tell me how to resolve this

[@markjones6894]

After changing the image to an svg, even after putting “href” instead of “source”, the image does not get displayed. It is correctly installed, correctly imported and the code is exactly the same but I can’t find the error. I have restarted the simulator and cleared the cache but nothing worked. What seems to be the problem ?

[@saurabhjain2161]

@Mark Jones Code is available here. try replacing your code to confirm if there is some code mistake. github.com/nathvarun/professional-animations-in-react-native/blob/master/01-animated-login-screen/Part%202/app/index.js

[@zaidjamil2945]

if you have this error couldn't find RNSVG module, do cd ios then install pods, he is using expo in this tut so he didn't have to do that.

[@mauriciogarcia1725]

Excelent Video Unsure Programmer! Could you tell me how do i use setState with TapGestureHandler? I need to setState by onPress event before the animation starts. Thanks in advance!

[@pratibhan3629]

Can we add fade animation when loading a react native screen from a native iOS screen?

[@nicathidayetzade1482]

BIG thanks man! That is amazing video.

[@shikher.]

This is one more fantastic tutorial!! Thank you!!

[@TheGeorgeBandMusic]

Great series

[@vvssangeeth]

How keyboard is handled??

[@vvssangeeth]

Any idea On this?

[@MrSlips96]

@@vvssangeeth I'm facing the same problem...

[@BeulahKl1z2x]

Wonderful tutorial Mr. Varun, I have signed up for your tutorial on udemy. I have followed all three videos through and through but I'm still facing up an issue with the x (closing) it auto closes a soon as the sign-up button is pressed. I know I have missed a line somewhere in the final animation setup cause everything was working perfectly just as you showed. I brushed through your videos again can't seem to find which line I have made a mistake at. If you could load your final SVG animation code on GitHub that would be so helpful. Please do so. Thank you again.

[@shantanu277]

There is an issue with shadow in current version, We need to add- elevation: 3, after shadowOpacity for the shadow to appear.

[@JeanPierreCasanovaFuentes]

really superb tutorial!!! thank you so much!!!! like x1000

[@TLGnoor]

dima said good idea for the animation thank you

[@pman-codes]

Nice one! Super

[@newforcesyella8052]

thank you!! was incredible!

[@exalandconcept]

Thanks for all your great tutorials , i like it :)

[@Unmaleable]

This was a great series!! I got it working but react-native svg doesnt work with my version of react. THANK YOU

[@ricardoquirino3515]

u r the guy!!!! thanks a lot!!!

[@rabiekhlifi3492]

how do we make it when we click singin it take us to a home screen ?

[@ankurgupta2936]

SVG clipping does not work when I run the same code on expo start --web. Any Suggestion?

[@subhajitroy3775]

this.onStateChange a reanimated event is called, can one be able to call a javascript event along with native event on END state. This video tutorial is awesome. Thank You

[@mishusikka8368]

hey there!, this has really been of great help since I have been working on my final year project, could you please help me out how to navigate to another screen after I press SIGN IN button (post all the animations and screen goes height/3), I looked at your react-navigation tutorial but couldn't really figure out for this particular example. please help thanks a lot for this tutorial.

[@mishusikka8368]

@unsureprogrammer please help?

[@alihussnain6618]

and thank you for great series

[@tuandattran4227]

like the title, it's professional !!

[@paragvt]

Great video! Are you planning to upload code for Part 3? thanks!

[@taimoorhassan7767]

great work.

[@l.e.nichols9382]

Very cool!

[@vignesh462]

What happen if keyboard is up 😃🤔

[@vvssangeeth]

Nice question

[@mohamdalmhde1322]

yah what happen

[@beytr62]

Crops from top area and works normally

[@anakkolamikan414]

awesome tutorial, how can I add an icon to the sign in button?

[@kirtimaanlodha1467]

Nice tutorial. Is code of this tutorial is available on github ?

[@gauravbagul4730]

Thank you. was very helpful.

[@leolima8585]

Invariant Violation: requireNativeComponent: 'RNSVGCIRCLE' was not found in the UIManager

[@Drewmssu]

this is gold, thank you

[@kaylanwalker5022]

Add to your gradle: android:windowSoftInputMode="adjustPan" Will pan the view while keyboard is open.

[@saurabhjain2161]

I am new to react and react-native, can somebody please explain me followings? - Instead of meshing code, can we create components for button and other things?? - Why we have used Text instead of Buttons? - Input text Email and Password doesnot become empty after we close the input container. When i click on Sign in again to see the animated input text, i got old data exist in Email and Password text

[@codingwithlaraveller]

- Yes you can write reusable component for input or buttons according to your need - instead of button we used Text because button does not give much of styling, with Text we can use TouchableOpacity around the Text to make it touchable and apply other styles - for clearing out the input fields, reference those fields to some variables and when that cross is pressed, clear those variables and when you press the Singin button again, your input fields would be empty (this is just wild shot, can't say for sure that it will work)

[@FarhanKhan-tx1eo]

Everything was going well but i installed yarn add react-native-svg it messed up errors occurded that image already been declared although i had already removed it from top?

[@sandeepsingh-rl1zg]

Video is fine But we can't send args when we touch the button I guess that's why you didn't go for Facebook implementation

[@asadsalehumar1011]

I can't believe this is freeeeeee, ow sem !

[@farzadshami]

Everything was going well but i cannot use the keyboard , can you help us ....

[@leolima8585]

I couldn't execute the project, why? I downloaded git, followed the class, gives several errors in emulation. Does anyone have this project's Git already working for me to compare my attempt to what works?

[@rohittheozzy]

Is this the best way to do animations in React?

[@ezel1291]

nice,. please make tutorial for sidebar with navigation in react native

[@riteshsinha216]

Please make a video on adding payment gateway with expo

[@richard92105]

can't find the final github for part 3

[@zameer-haider]

its work in expo ?

[@tsxdaniel]

I love your setup of vs code. Can you share it? Regards from Chile

[@UnsureProgrammer]

Daniel Toro thanks! kzbin.info/www/bejne/npXVoHagdtqHsMk Let me know if anything is missing

[@kirtimaanlodha1467]

Unsure Programmer I couldn’t get javascripreact snippet to work. I had to duplicate that into javascript snippet file instead. What could be possible reason?

[@soumitacharjee4056]

can you tell how to set the wallpaper as my background image using react native ???

[@vodanh2873]

Great!!! , Please, share full source code part 3.Thank !

[@simocan1594]

Very Thanks!

[@AbdulRehman-by1or]

I can't enter text in input fields!! Need Help

[@aykut1]

perfect

[@Danilo1993456]

Could You show this example without expo ? , please

[@lglf77]

Part3, git? show video, error here

[@codegame2815]

nice

[@Nivethaguru]

Where can we get the source code for this?

[@damithedirisinghe8193]

How to add TapGestureHandler to SING IN WITH FACEBOOK button open new input field to sing in to face book

[@farazahmad7928]

Please Please sir kindly make tutorial on Chat clone which support multiple features like in Facebook (Messanger). I have seen many tutorials regarding chat system but all are worthless . I'm following you since 1st day . Please make chat clone series with database (firebase) Please reply on my comment sir

[@shaheenirivetty7740]

Nothing to say👌

[@vlogiotcomti]

vc liberou o cod no github? [

[@unreleasedclips9398]

can anyone provide me the code of the this module

[@punjab4udotcom]

Could I get that part 3 source code?

[@AvinashKumar-wg9dr]

please make tutorials on react navigation 4

[@nikhil-saxena]

let { width, height } = Dimensions.get('window'); const statusBarHeight = StatusBar.currentHeight; height = Platform.OS === "android" ? height + statusBarHeight : height; Do this to support android screen correctly. Else on android image won't take full screen.

[@alihussnain6618]

kindly also add part 3 code to git

[@viricel01]

🙏 🙏 🙏

[@leolima8585]

Não funcionou para mim

[@GoeHybrid]

Please, add part 3 to github

[@allisnetwork]

Excellent series. If you had wanted to add a custom font to this project what steps would you take? docs.expo.io/guides/using-custom-fonts/#using-the-usefonts-hook , breaks the code for me. Also, do you do any freelance work?

[@UnsureProgrammer]

kzbin.info/www/bejne/jJ2WdIOEg5xrbrM. let me know if this helps.

[@allisnetwork]

@@UnsureProgrammer Thanks for the reply. After installing the library/adding the raleway.ttf file to the assets/font folder and using the same code from your linked video still running into issues. Getting the following error message when trying to compile imgur.com/a/Cz6uIwG . Any ideas what the issue could be?

[@artem-fs]

Cirlce animation looks ugly, animate also radius x2 will looks much better