Vishal Pawar
Vishal Pawar
  • 57
  • 489 766
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
Переглядів: 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

КОМЕНТАРІ

  • @whoiswestcoast
    @whoiswestcoast 16 днів тому

    Running Android Studio on a Mac is crazy

  • @PankajSingh-v7c3k
    @PankajSingh-v7c3k 18 днів тому

    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 16 днів тому

      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 Місяць тому

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

  • @hmaina0
    @hmaina0 Місяць тому

    Straight to the point, great 👍

  • @fata__morgana
    @fata__morgana Місяць тому

    This was so easy, thanks a bunch !

  • @adegboyegawisdomubani6921
    @adegboyegawisdomubani6921 2 місяці тому

    How did you do this ?

    • @vishalpwr
      @vishalpwr 2 місяці тому

      Check out the full video 😉

  • @beatbox1759
    @beatbox1759 2 місяці тому

    Thank you bro it is beneficial

  • @enesmurat2115
    @enesmurat2115 2 місяці тому

    bro close this song please

  • @radiowaves1823
    @radiowaves1823 2 місяці тому

    U r amazing bro❤

  • @ziyashaheen8065
    @ziyashaheen8065 2 місяці тому

    sceneContainerStyle is not working .please provide me solution

    • @vishalpwr
      @vishalpwr 2 місяці тому

      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 3 місяці тому

    your code on github doesnt even work

  • @PixelGaming123
    @PixelGaming123 3 місяці тому

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

    • @vishalpwr
      @vishalpwr 3 місяці тому

      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 3 місяці тому

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

  • @gauthamvijayan
    @gauthamvijayan 3 місяці тому

    Perfect!

  • @AnandKumarSingh-r3o
    @AnandKumarSingh-r3o 3 місяці тому

    iOS how to show header and footer on all the pages

  • @NashrinFathima-oh7ji
    @NashrinFathima-oh7ji 4 місяці тому

    Very Helpful

  • @Roqeebakindele
    @Roqeebakindele 4 місяці тому

    Thanks brother

  • @PiyushSagar-ps
    @PiyushSagar-ps 4 місяці тому

    Thanks broo from 2024 June

  • @ammar1989ben
    @ammar1989ben 5 місяців тому

    Beautiful... thx!

    • @vishalpwr
      @vishalpwr 5 місяців тому

      Our pleasure!

  • @riahiyassine7703
    @riahiyassine7703 5 місяців тому

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

    • @vishalpwr
      @vishalpwr 5 місяців тому

      Cheers…😊

  • @luizfelipejesusfalcao4579
    @luizfelipejesusfalcao4579 5 місяців тому

    Good job man

  • @ayman7062
    @ayman7062 5 місяців тому

    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 5 місяців тому

    Thanks Man, you're a savior

  • @vrto3287
    @vrto3287 5 місяців тому

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

    • @vishalpwr
      @vishalpwr 5 місяців тому

      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 5 місяців тому

    would there be a github link?

    • @vishalpwr
      @vishalpwr 5 місяців тому

      Yes, checkout the description.

  • @arktutorials9866
    @arktutorials9866 6 місяців тому

    is their any automation available?

  • @mariapaoladigrigoli9506
    @mariapaoladigrigoli9506 6 місяців тому

    Thank u!!

  • @mbithi_ke
    @mbithi_ke 6 місяців тому

    the image, completely click bait

  • @ibrahimcelen1896
    @ibrahimcelen1896 6 місяців тому

    Danke Schön bruddah!

  • @marcelraszewski
    @marcelraszewski 6 місяців тому

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

    • @vishalpwr
      @vishalpwr 6 місяців тому

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

  • @LydrixGames
    @LydrixGames 6 місяців тому

    source?

    • @vishalpwr
      @vishalpwr 6 місяців тому

      Checkout related video description.

  • @stilljunior1764
    @stilljunior1764 6 місяців тому

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

    • @vishalpwr
      @vishalpwr 6 місяців тому

      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 7 місяців тому

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

    • @vishalpwr
      @vishalpwr 6 місяців тому

      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 6 місяців тому

      ​ @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 7 місяців тому

    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 6 місяців тому

      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 7 місяців тому

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

    • @vishalpwr
      @vishalpwr 7 місяців тому

      Why are you asking?😀 Not less not more!

    • @jasim17
      @jasim17 7 місяців тому

      @@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 6 місяців тому

      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 7 місяців тому

    it works on expo?

  • @sarkhanrahimli8740
    @sarkhanrahimli8740 7 місяців тому

    Thanks bro

    • @vishalpwr
      @vishalpwr 7 місяців тому

      Welcome, Cheers!

  • @sathishsaminathan1347
    @sathishsaminathan1347 7 місяців тому

    hi bro which package have you used for displaying graph?

    • @vishalpwr
      @vishalpwr 7 місяців тому

      This has been made with custom styling!😜

  • @Man-lp6zg
    @Man-lp6zg 7 місяців тому

    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 7 місяців тому

    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 7 місяців тому

      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 7 місяців тому

      @@vishalpwr it works with expo ?

    • @vishalpwr
      @vishalpwr 7 місяців тому

      Yes, definitely!

  • @simrajcreator6828
    @simrajcreator6828 7 місяців тому

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

    • @vishalpwr
      @vishalpwr 7 місяців тому

      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 7 місяців тому

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

    • @vishalpwr
      @vishalpwr 7 місяців тому

      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 7 місяців тому

    is this react native

    • @vishalpwr
      @vishalpwr 7 місяців тому

      Yes, it is react native project.

  • @pradeepbb1729
    @pradeepbb1729 7 місяців тому

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

  • @rutujjainvlogs1432
    @rutujjainvlogs1432 7 місяців тому

    Don't used background music

  • @imasunflowerlilfunny3353
    @imasunflowerlilfunny3353 7 місяців тому

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

    • @vishalpwr
      @vishalpwr 7 місяців тому

      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 7 місяців тому

    how to open vlc player bro

    • @vishalpwr
      @vishalpwr 7 місяців тому

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

  • @yucelduz4897
    @yucelduz4897 8 місяців тому

    does it work with expo

    • @vishalpwr
      @vishalpwr 8 місяців тому

      Yes, i18next and react-i18next absolutely works with Expo.

  • @NikhilPawar151
    @NikhilPawar151 8 місяців тому

    Thank you for such valuable content.

  • @kamal9650-z1w
    @kamal9650-z1w 8 місяців тому

    Amazing please add more videos on react native animation

    • @vishalpwr
      @vishalpwr 8 місяців тому

      Sure, On the way😊