#3 Animated Login Screen - Professional Animations in React Native | Reanimated | Gesture Handler
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2019
- #3. In part three of this series, we'll add the closing animation and add the curve to our background image using react-native-svg.
We'll be using React Native Reanimated and React Native Gesture handler and React Native svg in this series.
New To React Native?
React Native Foundation + Firebase + Redux :
www.udemy.com/course/react-na...
Twitter / nathvarun
Instagram / nathvarun25
Facebook / nathvarun
I can’t believe we’re getting this for free. this is really incredible! thank you sir!😀
I can’t thank you enough for sharing this, it’s exactly what I was looking for
This is one more fantastic tutorial!! Thank you!!
Amazing man! You are doing an amazing work in animation in react-native. 👏🏻
BIG thanks man! That is amazing video.
thank you!! was incredible!
Man this guy is a beast, I was following the tree videos and thinking, man wtf so wise. Kudos to you.
You are genius! Great. Really enjoyed this.
Oh my god Varun! this is pure genius!
Thanks for all your great tutorials , i like it :)
this is gold, thank you
really superb tutorial!!! thank you so much!!!! like x1000
Nice one! Super
Great series
and thank you for great series
great work.
Very cool!
Thank you. was very helpful.
like the title, it's professional !!
u r the guy!!!! thanks a lot!!!
thanks man.. really great... though i observe that the textInputs jump into the svg image when you try to enter text
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.
dima said good idea for the animation thank you
I can't believe this is freeeeeee, ow sem !
perfect
Very Thanks!
This was a great series!! I got it working but react-native svg doesnt work with my version of react. THANK YOU
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,
You fixed it, good
Thanks, you saved this tut ^_^
You are awesome dude!!!
Don't forget to add zIndex: -1 for not cut X into half
Awesome dude!! for the behavior do this to work on ios and android
behavior={Platform.OS == "ios" ? "padding" : "height"}
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.
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
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!
Great video! Are you planning to upload code for Part 3? thanks!
Add to your gradle: android:windowSoftInputMode="adjustPan"
Will pan the view while keyboard is open.
awesome tutorial, how can I add an icon to the sign in button?
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.
I am facing this too. Have you resolve it?
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?
nice
nice,. please make tutorial for sidebar with navigation in react native
Great series, thanks!
Can you please tell me is there a benefit using TapGestureHandler instead of TouchableWithoutFeedback in this case?
My question exactly
Great!!! , Please, share full source code part 3.Thank !
Great series 💯
However, when typing in the textinput, the keyboard hides the form 🤷🏽♂️
please can u tell me how to resolve this
There is an issue with shadow in current version,
We need to add-
elevation: 3,
after shadowOpacity for the shadow to appear.
Nice tutorial.
Is code of this tutorial is available on github ?
Nothing to say👌
can you tell how to set the wallpaper as my background image using react native ???
Please make a video on adding payment gateway with expo
Very nice, the only problem is the keyboard. How do we properly use KeyboardAvoidingView ?
hey i have the same problem did u know how to fix it
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
Can we add fade animation when loading a react native screen from a native iOS screen?
SVG clipping does not work when I run the same code on expo start --web. Any Suggestion?
how do we make it when we click singin it take us to a home screen ?
Invariant Violation: requireNativeComponent: 'RNSVGCIRCLE' was not found in the UIManager
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.
@unsureprogrammer please help?
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?
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
Is this the best way to do animations in React?
How to add TapGestureHandler to SING IN WITH FACEBOOK button open new input field to sing in to face book
🙏 🙏 🙏
Everything was going well but i cannot use the keyboard , can you help us ....
Could You show this example without expo ? , please
please make tutorials on react navigation 4
its work in expo ?
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 ?
@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
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.
vc liberou o cod no github?
[
can't find the final github for part 3
Where can we get the source code for this?
I love your setup of vs code. Can you share it? Regards from Chile
Daniel Toro thanks! th-cam.com/video/hdroCjAuTzg/w-d-xo.html
Let me know if anything is missing
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?
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
- 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)
Could I get that part 3 source code?
I can't enter text in input fields!! Need Help
kindly also add part 3 code to git
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
Part3, git? show video, error here
How keyboard is handled??
Any idea On this?
@@vvssangeeth I'm facing the same problem...
can anyone provide me the code of the this module
What happen if keyboard is up 😃🤔
Nice question
yah what happen
Crops from top area and works normally
Please, add part 3 to github
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.
Não funcionou para mim
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?
th-cam.com/video/Vl3CPNN788Q/w-d-xo.html. let me know if this helps.
@@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?
Cirlce animation looks ugly, animate also radius x2 will looks much better