Vishal Pawar
Vishal Pawar
  • 60
  • 502 146
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
th-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html
RECOMMENDED VIDEOS 📹
🔴 Custom Drawer Navigation - 1
th-cam.com/video/5SIViXTlFaM/w-d-xo.html
🔴 Custom Drawer Navigation - 2 th-cam.com/video/FATLP5SkGxE/w-d-xo.html
🔴 Google Sign in with Firebase - th-cam.com/video/WAkv6oPUUxA/w-d-xo.html
🔴 Custom Bottom tab Navigation - th-cam.com/play/PLhRhTJaArVFugDgTSvXTUaqJWY9Kpp-gV.html
🔴 Hangman Game - th-cam.com/video/UqQJKOZBHQY/w-d-xo.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 845

วีดีโอ

How to create Header Animation using Reanimated | Parallax Animation | Sticky Header
มุมมอง 4.1K9 หลายเดือนก่อน
In this video you will learn how to create Header Animation using react native reanimated on scroll. ✅ SUBSCRIBE TO MY CHANNEL th-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html RECOMMENDED VIDEOS 📹 🔴 Custom Drawer Navigation - 1 th-cam.com/video/5SIViXTlFaM/w-d-xo.html 🔴 Custom Drawer Navigation - 2 th-cam.com/video/FATLP5SkGxE/w-d-xo.html 🔴 Google Sign in with Firebase - th-cam.com/video/WAkv6oP...
How to change App Language in react native | Multiple Language Support | i18next | React-Native
มุมมอง 8Kปีที่แล้ว
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 th-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html RECOMMENDED VIDEOS 📹 🔴 Custom Drawer Navigation - 1 th-cam.com/video/5SIViXTlFaM/w-d-xo.html 🔴 Custom Drawer Navigation - 2 th-cam.com/video/FA...
How to create a Drawer with Dropdown and with Animation | React-Navigation v6-5
มุมมอง 8Kปีที่แล้ว
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 th-cam.com/channels/C6L3eilEVJhhqiAdepWcng.html RECOMMENDED VIDEOS 📹 🔴 Custom Drawer Navigation - 1 th-cam.com/video/5SIViXTlFaM/w-d-xo.html 🔴 Custom Drawer Navigation - 2 th-cam.com/video/FATLP5SkGxE/w-d-xo...
How to create Splash Screen and App icon in IOS using xCode | React Native
มุมมอง 12Kปีที่แล้ว
How to create Splash Screen and App icon in IOS using xCode | React Native
Weather App | Drawer Navigation | React Native | Part-2
มุมมอง 2K2 ปีที่แล้ว
Weather App | Drawer Navigation | React Native | Part-2
How to create Custom Drawer Navigation with animation | React-Native | React-Navigation v6/5 | Part2
มุมมอง 9K2 ปีที่แล้ว
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
มุมมอง 10K2 ปีที่แล้ว
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.7K2 ปีที่แล้ว
How to create Hangman Game in React-Native | Puzzle Game
Phone OTP Verification with Firebase | React-Native | Firebase
มุมมอง 1.1K2 ปีที่แล้ว
Phone OTP Verification with Firebase | React-Native | Firebase
Email/Password Signin with Firebase in React Native | Firebase
มุมมอง 3752 ปีที่แล้ว
Email/Password Signin with Firebase in React Native | Firebase
Animated Floating Action Button (FAB) | Reanimated-2 | React-Native
มุมมอง 3.8K2 ปีที่แล้ว
Animated Floating Action Button (FAB) | Reanimated-2 | React-Native
Google SignIn Using React Native with Firebase | Google Login | React-Native
มุมมอง 12K2 ปีที่แล้ว
Google SignIn Using React Native with Firebase | Google Login | React-Native
How to Create Dynamic table in PDF using HTML | React-Native | Expo
มุมมอง 5K2 ปีที่แล้ว
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.5K2 ปีที่แล้ว
How to create Shopping App UI in react native | Shared Element | React-Native
How to make image Zoom like Instagram in React-Native
มุมมอง 6K3 ปีที่แล้ว
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
มุมมอง 16K3 ปีที่แล้ว
How to create Bottom Tab Navigation with Animation in react native | React-Navigation v6/5 | Part-6
#Demo | Simple Animations in React-Native
มุมมอง 4.9K3 ปีที่แล้ว
#Demo | Simple Animations in React-Native
How to create Animated FlatList in react native | Simple animation with Animatable | React-Native
มุมมอง 12K3 ปีที่แล้ว
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
มุมมอง 20K3 ปีที่แล้ว
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
มุมมอง 8K3 ปีที่แล้ว
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.
มุมมอง 8K3 ปีที่แล้ว
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)
มุมมอง 44K3 ปีที่แล้ว
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
มุมมอง 15K3 ปีที่แล้ว
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
มุมมอง 27K3 ปีที่แล้ว
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
มุมมอง 81K3 ปีที่แล้ว
Bottom Tab Navigation with Animation | React-Navigation v6/5 | Part-1
🔴 React Navigation Shared Element Transition | React-Native | React-Navigation v5 | Part-2
มุมมอง 7K3 ปีที่แล้ว
🔴 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
มุมมอง 14K3 ปีที่แล้ว
🔴 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
มุมมอง 24K3 ปีที่แล้ว
🔴 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
มุมมอง 15K3 ปีที่แล้ว
🔵 How to create Splash Screen and App icon in react native using Android Studio | React-Native

ความคิดเห็น

  • @govindchoudhary7311
    @govindchoudhary7311 12 วันที่ผ่านมา

    you saved my hours thanks a lot buddy

    • @vishalpwr
      @vishalpwr 10 วันที่ผ่านมา

      Cheers 🥂

  • @awesomecreatorsaz8359
    @awesomecreatorsaz8359 28 วันที่ผ่านมา

    i have install pod but not generating the splash folders in ios folder?

    • @vishalpwr
      @vishalpwr 26 วันที่ผ่านมา

      It does not have any folder, you can find LanuchScreen on the xCode.

  • @ganeshemanth
    @ganeshemanth หลายเดือนก่อน

    Plz give the full code link

    • @vishalpwr
      @vishalpwr 26 วันที่ผ่านมา

      It is already there checkout the full video and in that video’s description you can find it.

  • @whoiswestcoast
    @whoiswestcoast หลายเดือนก่อน

    Running Android Studio on a Mac is crazy

    • @vishalpwr
      @vishalpwr หลายเดือนก่อน

      Yep😜

  • @PankajSingh-v7c3k
    @PankajSingh-v7c3k หลายเดือนก่อน

    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

    • @vishalpwr
      @vishalpwr หลายเดือนก่อน

      Make sure your top header height and the y translate offset value should be same. And don’t forget to add Extrapolation.CLAMP

  • @vignesh-l3i
    @vignesh-l3i 2 หลายเดือนก่อน

    bro why did u took async function ? intsed of normal function ??

  • @hmaina0
    @hmaina0 2 หลายเดือนก่อน

    Straight to the point, great 👍

  • @fata__morgana
    @fata__morgana 3 หลายเดือนก่อน

    This was so easy, thanks a bunch !

    • @vishalpwr
      @vishalpwr 3 หลายเดือนก่อน

      Cheers 🥂

  • @adegboyegawisdomubani6921
    @adegboyegawisdomubani6921 3 หลายเดือนก่อน

    How did you do this ?

    • @vishalpwr
      @vishalpwr 3 หลายเดือนก่อน

      Check out the full video 😉

  • @beatbox1759
    @beatbox1759 3 หลายเดือนก่อน

    Thank you bro it is beneficial

  • @enesmurat2115
    @enesmurat2115 3 หลายเดือนก่อน

    bro close this song please

  • @radiowaves1823
    @radiowaves1823 4 หลายเดือนก่อน

    U r amazing bro❤

  • @ziyashaheen8065
    @ziyashaheen8065 4 หลายเดือนก่อน

    sceneContainerStyle is not working .please provide me solution

    • @vishalpwr
      @vishalpwr 4 หลายเดือนก่อน

      Please check it once again, have you passed styles to it’s parent component or anywhere which blocked it to apply styles on sceneComtainer!

  • @charbelmansour8925
    @charbelmansour8925 4 หลายเดือนก่อน

    your code on github doesnt even work

  • @PixelGaming123
    @PixelGaming123 4 หลายเดือนก่อน

    Bro I am getting Google Sign-In failed: [Error: DEVELOPER_ERROR]

    • @vishalpwr
      @vishalpwr 4 หลายเดือนก่อน

      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.

  • @gauthamvijayan
    @gauthamvijayan 4 หลายเดือนก่อน

    Also try to mix react-native-localise with this video as part 2

  • @gauthamvijayan
    @gauthamvijayan 4 หลายเดือนก่อน

    Perfect!

  • @AnandKumarSingh-r3o
    @AnandKumarSingh-r3o 5 หลายเดือนก่อน

    iOS how to show header and footer on all the pages

  • @NashrinFathima-oh7ji
    @NashrinFathima-oh7ji 5 หลายเดือนก่อน

    Very Helpful

  • @Roqeebcoder
    @Roqeebcoder 5 หลายเดือนก่อน

    Thanks brother

  • @PiyushSagar-ps
    @PiyushSagar-ps 5 หลายเดือนก่อน

    Thanks broo from 2024 June

  • @ammar1989ben
    @ammar1989ben 6 หลายเดือนก่อน

    Beautiful... thx!

    • @vishalpwr
      @vishalpwr 6 หลายเดือนก่อน

      Our pleasure!

  • @riahiyassine7703
    @riahiyassine7703 6 หลายเดือนก่อน

    It has been a long time waiting for this tutorial... great thanks 🎉

    • @vishalpwr
      @vishalpwr 6 หลายเดือนก่อน

      Cheers…😊

  • @luizfelipejesusfalcao4579
    @luizfelipejesusfalcao4579 6 หลายเดือนก่อน

    Good job man

  • @ayman7062
    @ayman7062 6 หลายเดือนก่อน

    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

  • @manishrajpurohit4354
    @manishrajpurohit4354 6 หลายเดือนก่อน

    Thanks Man, you're a savior

  • @vrto3287
    @vrto3287 7 หลายเดือนก่อน

    How can I show last selected language when reopening the app ?

    • @vishalpwr
      @vishalpwr 6 หลายเดือนก่อน

      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.

  • @asj9469
    @asj9469 7 หลายเดือนก่อน

    would there be a github link?

    • @vishalpwr
      @vishalpwr 7 หลายเดือนก่อน

      Yes, checkout the description.

  • @arktutorials9866
    @arktutorials9866 7 หลายเดือนก่อน

    is their any automation available?

  • @mariapaoladigrigoli9506
    @mariapaoladigrigoli9506 7 หลายเดือนก่อน

    Thank u!!

    • @vishalpwr
      @vishalpwr 7 หลายเดือนก่อน

      Welcome 😊

  • @rotleaf
    @rotleaf 7 หลายเดือนก่อน

    the image, completely click bait

  • @ibrahimcelen1896
    @ibrahimcelen1896 7 หลายเดือนก่อน

    Danke Schön bruddah!

  • @marcelraszewski
    @marcelraszewski 7 หลายเดือนก่อน

    What extension do you have that sugest you evreything when you are writting code ??

    • @vishalpwr
      @vishalpwr 7 หลายเดือนก่อน

      I have installed many extensions but you can try these... Auto import "React Native Tools" Auto complete Tag

  • @WallterestApp
    @WallterestApp 7 หลายเดือนก่อน

    source?

    • @vishalpwr
      @vishalpwr 7 หลายเดือนก่อน

      Checkout related video description.

  • @stilljunior1764
    @stilljunior1764 7 หลายเดือนก่อน

    ERROR TypeError: Cannot read property 'language' of undefined, js engine: hermes when I am trying to change language

    • @vishalpwr
      @vishalpwr 7 หลายเดือนก่อน

      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')

  • @kouradev
    @kouradev 8 หลายเดือนก่อน

    Great man! ** MUSIC IN THE BACKGROUND IS annoying **

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      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?

    • @kouradev
      @kouradev 8 หลายเดือนก่อน

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

  • @GaneshguruA
    @GaneshguruA 8 หลายเดือนก่อน

    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 ?

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      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.

  • @jasim17
    @jasim17 8 หลายเดือนก่อน

    how many years experience do you have in react native??

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      Why are you asking?😀 Not less not more!

    • @jasim17
      @jasim17 8 หลายเดือนก่อน

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

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

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

  • @firasyazid439
    @firasyazid439 8 หลายเดือนก่อน

    it works on expo?

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      Yes

  • @sarkhanrahimli8740
    @sarkhanrahimli8740 8 หลายเดือนก่อน

    Thanks bro

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      Welcome, Cheers!

  • @sathishsaminathan1347
    @sathishsaminathan1347 8 หลายเดือนก่อน

    hi bro which package have you used for displaying graph?

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      This has been made with custom styling!😜

  • @Man-lp6zg
    @Man-lp6zg 8 หลายเดือนก่อน

    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?

  • @imasunflowerlilfunny3353
    @imasunflowerlilfunny3353 8 หลายเดือนก่อน

    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?

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      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.

    • @firasyazid439
      @firasyazid439 8 หลายเดือนก่อน

      @@vishalpwr it works with expo ?

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      Yes, definitely!

  • @simrajcreator6828
    @simrajcreator6828 8 หลายเดือนก่อน

    bro ye add krne k baad mai apk ni bna paa rha build ni ho rha hai

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      What issues/error you are getting see in the console and try to fix it or google the error, you may get solution.

  • @BukkyOdunsi
    @BukkyOdunsi 8 หลายเดือนก่อน

    Does it mean you'd have to input the translations manually?

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      Yes, for static texts! For dynamic or api based data/text it requires translation from api or need to add some extra efforts.

  • @BarakerZeonlist
    @BarakerZeonlist 8 หลายเดือนก่อน

    is this react native

    • @vishalpwr
      @vishalpwr 8 หลายเดือนก่อน

      Yes, it is react native project.

  • @pradeepbb1729
    @pradeepbb1729 9 หลายเดือนก่อน

    Great content bro, really helpful for me, Thank you so much for the valuable content!

  • @rutujjainvlogs1432
    @rutujjainvlogs1432 9 หลายเดือนก่อน

    Don't used background music

  • @imasunflowerlilfunny3353
    @imasunflowerlilfunny3353 9 หลายเดือนก่อน

    i am unable to change icons , i see only question marks

    • @vishalpwr
      @vishalpwr 9 หลายเดือนก่อน

      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.

  • @gokulkrishnan-up6pp
    @gokulkrishnan-up6pp 9 หลายเดือนก่อน

    how to open vlc player bro

    • @vishalpwr
      @vishalpwr 9 หลายเดือนก่อน

      You can try this const url = ‘vlc://‘; const supported = await Linking.canOpenUrl(url) if (supported) { await Linking.openUrl(url); }