- 57
- 489 766
Vishal Pawar
India
Приєднався 13 бер 2021
Hello guys,
Thank you for visiting my channel....😊
Subscribe for learning React-Native, Javascript, tips & tricks, simple animation and lot more project in the line.
Thank you for visiting my channel....😊
Subscribe for learning React-Native, Javascript, tips & tricks, simple animation and lot more project in the line.
WhatsApp Profile Header Animation using Reanimated | React Native
In this video you will learn how to create WhatsApp Profile Header Animation using react native reanimated on scroll.
✅ SUBSCRIBE TO MY CHANNEL
ua-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html
RECOMMENDED VIDEOS 📹
🔴 Custom Drawer Navigation - 1
ua-cam.com/video/5SIViXTlFaM/v-deo.html
🔴 Custom Drawer Navigation - 2 ua-cam.com/video/FATLP5SkGxE/v-deo.html
🔴 Google Sign in with Firebase - ua-cam.com/video/WAkv6oPUUxA/v-deo.html
🔴 Custom Bottom tab Navigation - ua-cam.com/play/PLhRhTJaArVFugDgTSvXTUaqJWY9Kpp-gV.html
🔴 Hangman Game - ua-cam.com/video/UqQJKOZBHQY/v-deo.html
Chapters ⏩:
00:00 - Demo
24:35 - What are we trying to build
57:59 - What I have build
02:10 - Store scroll event value
02:40 - Profile Image Animation
04:57 - Header Animation
06:45 - Test on light mode
06:58 - Name Animation
08:46 - Test on Android
Source code:
👉 github.com/vishalpwr/react-native-ui/tree/master/src/screens/animHeaders
Like 👍 Share 📢 and Subscribe 🚀
@vishalpwr
#reactnative #application #ui #apps #header #navigation #animation #reanimated #parallax
✅ SUBSCRIBE TO MY CHANNEL
ua-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html
RECOMMENDED VIDEOS 📹
🔴 Custom Drawer Navigation - 1
ua-cam.com/video/5SIViXTlFaM/v-deo.html
🔴 Custom Drawer Navigation - 2 ua-cam.com/video/FATLP5SkGxE/v-deo.html
🔴 Google Sign in with Firebase - ua-cam.com/video/WAkv6oPUUxA/v-deo.html
🔴 Custom Bottom tab Navigation - ua-cam.com/play/PLhRhTJaArVFugDgTSvXTUaqJWY9Kpp-gV.html
🔴 Hangman Game - ua-cam.com/video/UqQJKOZBHQY/v-deo.html
Chapters ⏩:
00:00 - Demo
24:35 - What are we trying to build
57:59 - What I have build
02:10 - Store scroll event value
02:40 - Profile Image Animation
04:57 - Header Animation
06:45 - Test on light mode
06:58 - Name Animation
08:46 - Test on Android
Source code:
👉 github.com/vishalpwr/react-native-ui/tree/master/src/screens/animHeaders
Like 👍 Share 📢 and Subscribe 🚀
@vishalpwr
#reactnative #application #ui #apps #header #navigation #animation #reanimated #parallax
Переглядів: 1 512
Відео
How to create Header Animation using Reanimated | Parallax Animation | Sticky Header
Переглядів 3,4 тис.8 місяців тому
In this video you will learn how to create Header Animation using react native reanimated on scroll. ✅ SUBSCRIBE TO MY CHANNEL ua-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html RECOMMENDED VIDEOS 📹 🔴 Custom Drawer Navigation - 1 ua-cam.com/video/5SIViXTlFaM/v-deo.html 🔴 Custom Drawer Navigation - 2 ua-cam.com/video/FATLP5SkGxE/v-deo.html 🔴 Google Sign in with Firebase - ua-cam.com/video/WAkv6oPUU...
How to change App Language in react native | Multiple Language Support | i18next | React-Native
Переглядів 7 тис.11 місяців тому
In this tutorial you will learn: ✅ Configure i18next ✅ Usage of react-i18next hooks ✅ Add multiple language translation ✅ Get multiple language translations effortlessly ✅ More... ✅ SUBSCRIBE TO MY CHANNEL ua-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html RECOMMENDED VIDEOS 📹 🔴 Custom Drawer Navigation - 1 ua-cam.com/video/5SIViXTlFaM/v-deo.html 🔴 Custom Drawer Navigation - 2 ua-cam.com/video/FAT...
How to create a Drawer with Dropdown and with Animation | React-Navigation v6-5
Переглядів 7 тис.Рік тому
In this tutorial you will learn: ✅ How to create custom drawer ✅ Show menu lists in the drawer ✅ Apply Animation on dropdown-menu ✅ React-Navigation v6/5 ✅ More... ✅ SUBSCRIBE TO MY CHANNEL ua-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html RECOMMENDED VIDEOS 📹 🔴 Custom Drawer Navigation - 1 ua-cam.com/video/5SIViXTlFaM/v-deo.html 🔴 Custom Drawer Navigation - 2 ua-cam.com/video/FATLP5SkGxE/v-deo.h...
How to create Splash Screen and App icon in IOS using xCode | React Native
Переглядів 11 тис.Рік тому
How to create Splash Screen and App icon in IOS using xCode | React Native
Weather App | Drawer Navigation | React Native | Part-2
Переглядів 1,9 тис.Рік тому
Weather App | Drawer Navigation | React Native | Part-2
How to create Custom Drawer Navigation with animation | React-Native | React-Navigation v6/5 | Part2
Переглядів 9 тис.Рік тому
How to create Custom Drawer Navigation with animation | React-Native | React-Navigation v6/5 | Part2
How to create Custom Drawer Navigation with animation in React-Native | React-Navigation v6 | Part-1
Переглядів 10 тис.2 роки тому
How to create Custom Drawer Navigation with animation in React-Native | React-Navigation v6 | Part-1
How to create Hangman Game in React-Native | Puzzle Game
Переглядів 2,6 тис.2 роки тому
How to create Hangman Game in React-Native | Puzzle Game
Phone OTP Verification with Firebase | React-Native | Firebase
Переглядів 1,1 тис.2 роки тому
Phone OTP Verification with Firebase | React-Native | Firebase
Email/Password Signin with Firebase in React Native | Firebase
Переглядів 3712 роки тому
Email/Password Signin with Firebase in React Native | Firebase
Animated Floating Action Button (FAB) | Reanimated-2 | React-Native
Переглядів 3,7 тис.2 роки тому
Animated Floating Action Button (FAB) | Reanimated-2 | React-Native
Google SignIn Using React Native with Firebase | Google Login | React-Native
Переглядів 12 тис.2 роки тому
Google SignIn Using React Native with Firebase | Google Login | React-Native
How to Create Dynamic table in PDF using HTML | React-Native | Expo
Переглядів 5 тис.2 роки тому
How to Create Dynamic table in PDF using HTML | React-Native | Expo
How to create Shopping App UI in react native | Shared Element | React-Native
Переглядів 1,5 тис.2 роки тому
How to create Shopping App UI in react native | Shared Element | React-Native
How to make image Zoom like Instagram in React-Native
Переглядів 6 тис.2 роки тому
How to make image Zoom like Instagram in React-Native
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-6
Переглядів 16 тис.2 роки тому
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-6
#Demo | Simple Animations in React-Native
Переглядів 4,7 тис.2 роки тому
#Demo | Simple Animations in React-Native
How to create Animated FlatList in react native | Simple animation with Animatable | React-Native
Переглядів 12 тис.2 роки тому
How to create Animated FlatList in react native | Simple animation with Animatable | React-Native
How to create Login Authentication flow with Redux | React-Navigation v6/5 | Part-3
Переглядів 20 тис.3 роки тому
How to create Login Authentication flow with Redux | React-Navigation v6/5 | Part-3
How to make Material Top to Bottom tab navigator (Trick) | React-Navigation v6/5 | Part-5
Переглядів 7 тис.3 роки тому
How to make Material Top to Bottom tab navigator (Trick) | React-Navigation v6/5 | Part-5
Material Bottom Tab Navigation | React-Navigation v6 | Create in 5 min.
Переглядів 8 тис.3 роки тому
Material Bottom Tab Navigation | React-Navigation v6 | Create in 5 min.
How to install React-Native and Android Studio in Ubuntu 21.04(Full Setup)
Переглядів 44 тис.3 роки тому
How to install React-Native and Android Studio in Ubuntu 21.04(Full Setup)
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-3
Переглядів 15 тис.3 роки тому
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-3
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-2
Переглядів 26 тис.3 роки тому
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-2
Bottom Tab Navigation with Animation | React-Navigation v6/5 | Part-1
Переглядів 79 тис.3 роки тому
Bottom Tab Navigation with Animation | React-Navigation v6/5 | Part-1
🔴 React Navigation Shared Element Transition | React-Native | React-Navigation v5 | Part-2
Переглядів 7 тис.3 роки тому
🔴 React Navigation Shared Element Transition | React-Native | React-Navigation v5 | Part-2
🔴 How to Create PDF from HTML in React-Native | Export PDF from HTML | React-Native
Переглядів 14 тис.3 роки тому
🔴 How to Create PDF from HTML in React-Native | Export PDF from HTML | React-Native
🔴 Collapsing Header and bottom tab Animation | React-Native | Part-1
Переглядів 24 тис.3 роки тому
🔴 Collapsing Header and bottom tab Animation | React-Native | Part-1
🔵 How to create Splash Screen and App icon in react native using Android Studio | React-Native
Переглядів 14 тис.3 роки тому
🔵 How to create Splash Screen and App icon in react native using Android Studio | React-Native
Running Android Studio on a Mac is crazy
Yep😜
bro ima getting one issue when i have more content and i scroll then the image and text moves away from the screen above from the header
Make sure your top header height and the y translate offset value should be same. And don’t forget to add Extrapolation.CLAMP
bro why did u took async function ? intsed of normal function ??
Straight to the point, great 👍
This was so easy, thanks a bunch !
Cheers 🥂
How did you do this ?
Check out the full video 😉
Thank you bro it is beneficial
bro close this song please
U r amazing bro❤
sceneContainerStyle is not working .please provide me solution
Please check it once again, have you passed styles to it’s parent component or anywhere which blocked it to apply styles on sceneComtainer!
your code on github doesnt even work
Bro I am getting Google Sign-In failed: [Error: DEVELOPER_ERROR]
This error generally comes when you didn’t configure firebase account correctly! Please verify again at both end, on firebase dashboard and in react native project.
Also try to mix react-native-localise with this video as part 2
Perfect!
iOS how to show header and footer on all the pages
Very Helpful
Thanks brother
Thanks broo from 2024 June
Beautiful... thx!
Our pleasure!
It has been a long time waiting for this tutorial... great thanks 🎉
Cheers…😊
Good job man
Great video I have a problem when i try to to save the pdf using printAsync. He became an empty pdf How can i fix that
Thanks Man, you're a savior
How can I show last selected language when reopening the app ?
For that you need to persist your selected language in any local storage like AsyncStorge or you can find any other solution to persist user prefs.
would there be a github link?
Yes, checkout the description.
is their any automation available?
Thank u!!
Welcome 😊
the image, completely click bait
Danke Schön bruddah!
What extension do you have that sugest you evreything when you are writting code ??
I have installed many extensions but you can try these... Auto import "React Native Tools" Auto complete Tag
source?
Checkout related video description.
ERROR TypeError: Cannot read property 'language' of undefined, js engine: hermes when I am trying to change language
Please check, have you installed/configured library correctly? And to change language you can use import { useTranslation } from 'react-i18next' const { t, i18n } = useTranslation(); i18n.changeLanguage('fr')
Great man! ** MUSIC IN THE BACKGROUND IS annoying **
Thanks, And sorry for background music😐, will improve next time! Also you can suggest. Should I use music in the background or would it be better without background music?
@vishalpwr I believe that without background music is better without thinking. You're doing great work, it is attractive without any addition things. Best luck and exited to watch more advanced content for you.
Is there any way to change whole app languate in single click. instead of writting a alternate word for each word. I dont know, but just a thought. like by using google translate or any other api ?
One way is you can send this file with your selected language to your server and the server will give you the response of the translated file. For dynamic data it works well. And another way you can use any third party API to translate your text.
how many years experience do you have in react native??
Why are you asking?😀 Not less not more!
@@vishalpwr coz your writing code speed is very fast i am not able to understand your whole code that's why i asked to know how many times i need to be like you....
That’s all depends on practice you can be more faster, but I’m not writing this past I just doing fast-forward ⏩ at some points.😉
it works on expo?
Yes
Thanks bro
Welcome, Cheers!
hi bro which package have you used for displaying graph?
This has been made with custom styling!😜
Hello. Thank you for this awesome tutorial. I’m trying to achieve this but with the Tabs layout component from expo-router. What is the idea and approach you’d take?
my icons are not visible like yours , they were visible when I run your project but not when I added this in my other project , i see random emojis , i donno why?
Because you haven’t configured it. Open react-native-vector-icons npm or GitHub page and checkout its installation process. You have to configure it in android’s app/gradle file and for ios need to add in info.plist or in resources.
@@vishalpwr it works with expo ?
Yes, definitely!
bro ye add krne k baad mai apk ni bna paa rha build ni ho rha hai
What issues/error you are getting see in the console and try to fix it or google the error, you may get solution.
Does it mean you'd have to input the translations manually?
Yes, for static texts! For dynamic or api based data/text it requires translation from api or need to add some extra efforts.
is this react native
Yes, it is react native project.
Great content bro, really helpful for me, Thank you so much for the valuable content!
Don't used background music
i am unable to change icons , i see only question marks
For that you need to add icon config in your app/build.gradle file in case of android and for ios need to add them in info.plist file or in resources/bundle resources. Checkout the vector icons configuration doc you will find the solution.
how to open vlc player bro
You can try this const url = ‘vlc://‘; const supported = await Linking.canOpenUrl(url) if (supported) { await Linking.openUrl(url); }
does it work with expo
Yes, i18next and react-i18next absolutely works with Expo.
Thank you for such valuable content.
Amazing please add more videos on react native animation
Sure, On the way😊