Pradip Debnath
Pradip Debnath
  • 178
  • 5 324 258
Custom Animated Bottom TabBar in Expo Router | React Native for Beginners
This tutorial teaches you how to create a custom animated bottom tabbar navigation in expo router. I've used react native reanimated library to implement the custom animation to the tabbar items. This is a beginners friendly tutorial, so if you've some basic knowledge of react native then you can easily follow this tutorial.
Learn TypeScript for ReactJS for Beginner's Tutorial ua-cam.com/video/WApd-GNOWJM/v-deo.html
Expo Router Tutorial Playlist ua-cam.com/play/PLQWFhX-gwJbluCKdCPVYnfwVJlBDVf9E-.html
→ Finance App UI Tutorial in React Native with Expo Router ua-cam.com/video/MLVxvof54KA/v-deo.html
→ Travel App UI in React Native with Expo Router Tutorial ua-cam.com/video/lIQIeIdUXFI/v-deo.html
→ Social App with Firebase in React Native Playlist ua-cam.com/play/PLQWFhX-gwJbmrCwksjn77tdl36dIWPFAt.html
→ React navigation v6 tutorial playlist ua-cam.com/play/PLQWFhX-gwJbmtZY4mcRE-k7hL9DigcGS-.html
→ Food Finder App in React Native Playlist ua-cam.com/play/PLQWFhX-gwJbkETb0lfml7W8VvZb-Hc8oK.html
► Timestamps
0:00 Introduction
1:27 Basic Setup of the Project
3:23 Design Custom Bottom TabBar
14:00 Create Custom Animations for the TabBar Items
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/PDNTechnology
Follow me on Twitter itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/
Переглядів: 706

Відео

Finance App UI in React Native with Expo Router Tutorial for Beginners | 2024
Переглядів 3,1 тис.16 годин тому
In this tutorial, you'll learn how to create a finance app UI in react native. I've used expo router v3 to create a custom bottom tab navigator and react native gifted charts package to implement the pie chart graph to display expenses interactively. Also, I've used a custom header component to create the app's header. Learn TypeScript for ReactJS for Beginner's Tutorial ua-cam.com/video/WApd-G...
Simple Animated Tabs in React Native with React Native Reanimated
Переглядів 4 тис.2 місяці тому
In this tutorial, you'll learn how to create basic tabs in React Native and provide animation by using react native reanimated. This is a beginner's friendly tutorial, if you have basic knowledge of react native then also you can follow this tutorial. Learn TypeScript for ReactJS for Beginner's Tutorial ua-cam.com/video/WApd-GNOWJM/v-deo.html → Expo Router Tutorial Playlist ua-cam.com/play/PLQW...
Travel App UI in React Native with Expo Router | 2024 Beginners Tutorial
Переглядів 16 тис.3 місяці тому
In this tutorial, you'll learn how to create a Travel App UI in React Native with Expo Router for navigating between different screens of the app. Along with the UI, also here I've shown you how to customize the tabbar navigator in expo router and how to implement a parallax scrolling effect and animation using react native reanimated package in your expo app. The best part of this tutorial is ...
Learn ReactJS with TypeScript for Beginners in 2024 | To-Do App Tutorial in ReactJS + TypeScript
Переглядів 5074 місяці тому
In this tutorial, you'll learn how to use ReactJS with TypeScript and we'll learn it by creating a basic to-do app in reactjs typescript. This tutorial is beginners friendly, so if you don't have any prior knowledge of typescript then also you can learn typescript from this tutorial, you just need some basic understanding of reactjs. → Expo Router Tutorial Playlist ua-cam.com/play/PLQWFhX-gwJbl...
Drawer Navigation in Expo Router Nested with Tab Navigator
Переглядів 10 тис.7 місяців тому
In this tutorial, you'll learn how to create drawer navigation in expo router and how to create custom drawer navigator items. Also, in this tutorial, I've shown you how to create nested navigator with drawer navigator, tab navigator, and stack navigator. So this is the one-stop solution for all your expo router navigation related queries. Introduction to Expo Router Tutorial ua-cam.com/video/Z...
Introduction To Expo Router with Stack & Tab Navigator
Переглядів 8 тис.8 місяців тому
In this tutorial, you'll learn how to create an expo project with expo router and how to implement expo router file-based navigation to the expo app. Here I've discussed stack and tab navigation of the expo router and along with it, I've shown how to create a dynamic route, pass multiple parameters from one screen to another, and many more features. Drawer Navigator Tutorial in Expo Router ua-c...
How to Add TailWind CSS in React Native | Dark Theme using TailWind in React Native
Переглядів 9 тис.Рік тому
In this tutorial, you'll learn how to add TailWind CSS in react native. I've used a package called NativeWind to add tailwind in a React native project. Also, I've implemented dark theme in this react native app and we can switch between dark and light theme. → Social App with Firebase in React Native Playlist ua-cam.com/play/PLQWFhX-gwJbmrCwksjn77tdl36dIWPFAt.html → React navigation v5 tutoria...
How to Create Search Filter in React Native | Search in FlatList
Переглядів 23 тис.Рік тому
In this tutorial, you'll learn how to create search filter in react native. Here I've generated a user list from an API and then implemented search functionality in that list. So you'll learn how to fetch API data in react native and display those in FlatList and search using loadash.filter package. → Social App with Firebase in React Native Playlist ua-cam.com/play/PLQWFhX-gwJbmrCwksjn77tdl36d...
Animated Circle Progressbar in React Native | React Native Reanimated Tutorial | Custom Animation
Переглядів 6 тис.Рік тому
In this tutorial, you'll learn how to create a basic custom animation in react native. Here I've created an animated circular progress bar with a bounce animation in a circle with a checkmark. So with this tutorial, you'll also learn how to handle multiple animations in react native with react native reanimated. → Social App with Firebase in React Native Playlist ua-cam.com/play/PLQWFhX-gwJbmrC...
Introduction To NextJS 13 - Basics and Navigation
Переглядів 2,8 тис.Рік тому
In this tutorial, you'll learn fundamentals of nextjs 13, what are the core features of it which is getting changed from its previous versions. This is an introduction to nextjs 13 tutorial. Also I've discussed the navigation in nextjs 13 in details in this tutorial. ⦿ eCommerce Website Design with Tailwind CSS Tutorial ua-cam.com/video/iNDvh7O2WZM/v-deo.html ⦿ Login Page in Next JS with Tailwi...
Build Tic Tac Toe Game in Flutter in 30 minutes from Scratch
Переглядів 22 тис.Рік тому
In this tutorial, you'll learn how to create Tic-Tac-Toe game from scratch in Flutter. This tutorial is a beginner friendly tutorial so if you don't have much knowledge about flutter then you don't need to worry, here you'll get the step by step guidance to build the game in flutter. → To-Do App in Flutter ua-cam.com/video/K4P5DZ9TRns/v-deo.html → Onboarding Screen UI Tutorial with PageView ua-...
Form Validation in React Native with Formik
Переглядів 16 тис.Рік тому
In this tutorial, you'll learn how to implement form validation in react native with Formik and Yup. Here I have shown you how to create validation schema in Yup and how to validate a password for a strong password and match it with confirm password field. Also how to validate fixed digits number input in a field. RegEx for Strong Password ^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]...
Create Custom Modal in React with Tailwind CSS | Modal in NextJS with Tailwind
Переглядів 42 тис.Рік тому
Create Custom Modal in React with Tailwind CSS | Modal in NextJS with Tailwind
How To Implement Environment Variables in React Native
Переглядів 22 тис.Рік тому
How To Implement Environment Variables in React Native
Dynamic Dependent Dropdown List in React Native | Create Cascading Dropdowns
Переглядів 49 тис.Рік тому
Dynamic Dependent Dropdown List in React Native | Create Cascading Dropdowns
Simple Responsive Navigation Menu with Tailwind CSS in ReactJS
Переглядів 8 тис.Рік тому
Simple Responsive Navigation Menu with Tailwind CSS in ReactJS
Flutter ToDo App Tutorial for Beginners
Переглядів 207 тис.2 роки тому
Flutter ToDo App Tutorial for Beginners
TextField in Flutter, | Flutter Widget Explained
Переглядів 3,1 тис.2 роки тому
TextField in Flutter, | Flutter Widget Explained
Flutter ListTile Widget Tutorial | Flutter Widget Explained
Переглядів 18 тис.2 роки тому
Flutter ListTile Widget Tutorial | Flutter Widget Explained
Introduction to PWA | Replacement of React Native/Flutter? | Beginners Guide to PWA
Переглядів 3,2 тис.2 роки тому
Introduction to PWA | Replacement of React Native/Flutter? | Beginners Guide to PWA
Login Authentication Tutorial in React Native | JWT Authentication | AsyncStorage
Переглядів 142 тис.2 роки тому
Login Authentication Tutorial in React Native | JWT Authentication | AsyncStorage
React Native vs Flutter in 2022
Переглядів 8 тис.2 роки тому
React Native vs Flutter in 2022
Top 5 Free UI Libraries for React Native in 2022
Переглядів 8 тис.2 роки тому
Top 5 Free UI Libraries for React Native in 2022
Sidebar Navigation Menu using Tailwind CSS | Beginners Guide to Tailwind CSS
Переглядів 121 тис.2 роки тому
Sidebar Navigation Menu using Tailwind CSS | Beginners Guide to Tailwind CSS
Login & Register UI Tutorial in React Native for Beginners
Переглядів 70 тис.2 роки тому
Login & Register UI Tutorial in React Native for Beginners
Image Picker Tutorial in Flutter | Flutter Tutorial for Beginners
Переглядів 32 тис.2 роки тому
Image Picker Tutorial in Flutter | Flutter Tutorial for Beginners
Dynamic Tab Navigator | Combining Multiple Navigators | React Navigation 6
Переглядів 57 тис.2 роки тому
Dynamic Tab Navigator | Combining Multiple Navigators | React Navigation 6
Build Quote Generator App in React Native | Beginners Tutorial for React Native
Переглядів 8 тис.2 роки тому
Build Quote Generator App in React Native | Beginners Tutorial for React Native
Create Login Page in Next JS with Tailwind CSS | Login Page UI in React JS
Переглядів 49 тис.2 роки тому
Create Login Page in Next JS with Tailwind CSS | Login Page UI in React JS

КОМЕНТАРІ

  • @quamzgraphix9826
    @quamzgraphix9826 5 годин тому

    great tutorial

  • @sullyzafar83
    @sullyzafar83 7 годин тому

    Hi It only displaying 2 images and i have 4 images is their a bug in the code

  • @collinsk8754
    @collinsk8754 8 годин тому

    Excellent and comprehensive tutorial! 🥳🥳

    • @itzpradip
      @itzpradip 37 хвилин тому

      Glad you enjoyed it!

  • @jcxpjau
    @jcxpjau 8 годин тому

    Perfect...thanks man!

  • @AbrarAhmed-d1r
    @AbrarAhmed-d1r 11 годин тому

    Bro make a same tutorial in flutter❤

  • @lunedamkingsway2276
    @lunedamkingsway2276 14 годин тому

    Really good. Thankyou.

    • @itzpradip
      @itzpradip 14 годин тому

      Glad you liked it!

    • @SACKO0731
      @SACKO0731 12 годин тому

      @@itzpradip Sorry man , how do you select a longer and better quality video to upload in firebase, I get stuck when trying so, it keeps on waiting for media to be ready. Can you make a tutorial of how to achieve this?

    • @lunedamkingsway2276
      @lunedamkingsway2276 9 годин тому

      @@itzpradip Is there any chance of sharing your code? Maybe a link to Github? That'd be great.

  • @millennia
    @millennia 14 годин тому

    Amazing amazing amazing.

    • @itzpradip
      @itzpradip 14 годин тому

      You're amazing!!

  • @user-wf4mo3mx2k
    @user-wf4mo3mx2k 16 годин тому

    nice bro keep up the good work !! we are looking forward to see more videos

    • @itzpradip
      @itzpradip 15 годин тому

      Thanks! Will do!

  • @Mr_Dimension
    @Mr_Dimension 21 годину тому

    Thank you so much, First time I have made completed app . Video length to to good. wonderfull video, 10/10. waiting for next upcoming video like ecommerce, hotel booking, health tracking.. etc (video max length 2 -2.5 hr). Now i have Subscribe your channel for upcomming video. Plz upload ASAP. Waiting... On thing ( <Animated.ScrollView>, <Aninated.Image>, <Animated.View> ) not working in my case. Also on web it is not working in my case. I am using Android VDM. plz solve it...?

    • @itzpradip
      @itzpradip 15 годин тому

      Thanks for your suggestion & appreciation.

  • @ChippalaLaxmi
    @ChippalaLaxmi День тому

    Bro I have done all the things in the video but when I run the project my animations are not visible on screen. Please help me fix this.

  • @ERCAAP
    @ERCAAP 2 дні тому

    bro pls add Expo-react native iap

  • @Shubuu7
    @Shubuu7 2 дні тому

    next video pls

  • @nestormosquera33
    @nestormosquera33 2 дні тому

    You have the complete design in figma or behance?

  • @davidmuturi2078
    @davidmuturi2078 5 днів тому

    New subscriber, bro how do you take that screenshot

  • @SandeepSingh-ye5fh
    @SandeepSingh-ye5fh 5 днів тому

  • @hendoitechnologies
    @hendoitechnologies 6 днів тому

    Waiting for React Native CLI full course video

  • @hendoitechnologies
    @hendoitechnologies 6 днів тому

    Your video is very easy to understand slow and steady..... As a beginner can learn and understand easily.. Thanks.. Can you post full course video for developers in "React Native CLI" end to end all concepts... Waiting.

  • @hendoitechnologies
    @hendoitechnologies 6 днів тому

    Post full course video about React Native CLI

  • @IntelliDeveloper
    @IntelliDeveloper 7 днів тому

    Please can I get the source code please 🙏

    • @itzpradip
      @itzpradip 6 днів тому

      Yes, please check the description for the GitHub repo url.

  • @arupde6320
    @arupde6320 7 днів тому

    github link ??

    • @itzpradip
      @itzpradip 6 днів тому

      Added in the description now.

  • @chukwudinweze191
    @chukwudinweze191 7 днів тому

    Great video. This is what I needed. Thanks so much. Please can you assist with the GitHub link for this project?🙏

    • @itzpradip
      @itzpradip 6 днів тому

      Thanks for your comment and support. Please check the description for the repo url.

  • @pascalnouma1962
    @pascalnouma1962 7 днів тому

    The king is back

    • @itzpradip
      @itzpradip 7 днів тому

      Thanks mate! Keep supporting.

  • @hendoitechnologies
    @hendoitechnologies 7 днів тому

    Can you post React Native CLI course

    • @itzpradip
      @itzpradip 7 днів тому

      Yes, I'll create that soon! Thanks for your comment & support.

  • @amazingsly
    @amazingsly 7 днів тому

    First to view, first to comment🚀😂😂

    • @itzpradip
      @itzpradip 7 днів тому

      Yes you are! Thanks buddy.

  • @Shahbaz-751
    @Shahbaz-751 7 днів тому

    very good, sharing all these properties very well, thanks

  • @naveedsolangi2280
    @naveedsolangi2280 8 днів тому

    using leading and action in the AppBar worth it ?

  • @hendoitechnologies
    @hendoitechnologies 10 днів тому

    can you post "React Native CLI" full course video for developers

  • @panosjapan7
    @panosjapan7 11 днів тому

    Hello! Nice tutorial. I have a question: How do I show the Tab navigator in the `app/index.js` screen (the home page) and not needing to navigate to another screen one level deeper to show it? So, when you load the app and it shows the "Welcome to our app" screen, it also shows the Tabs. So, a combination of Tab and Stack navigation.

  • @meme-ku1vs
    @meme-ku1vs 12 днів тому

    very helpful ❤

  • @ranjithmuthu
    @ranjithmuthu 13 днів тому

    "Unchaught Error' cannot read property 'CAPABILITY_PLAY' of null can you help me please

  • @UmairKhan-hc2ql
    @UmairKhan-hc2ql 14 днів тому

    Hello community, I'm facing a problem implementing React Navigation. Here is my scenario: I am implementing two navigations simultaneously: Drawer as the main navigation. Stack navigation. There are some screens that are present in both of my navigations, and this is where my code starts to trouble me. I am not able to access screens from both navigations. Can anyone assist me with this?

  • @andrejkling3886
    @andrejkling3886 14 днів тому

    Thank you 🎉🔥💯

  • @andrejkling3886
    @andrejkling3886 14 днів тому

    Excellent… 🎉 thank you 💯

  • @BirMilyonTL
    @BirMilyonTL 15 днів тому

    thanks

  • @pavel6355
    @pavel6355 17 днів тому

    Good tutorial. I have a question, in the video when you add some lines to info.plist on ios it somehow ask for permissions automatically, but android didn't ask for any permission. Why is that and how to add permissions for android? I would be really gratefull if someone could help me, thank you in advence

  • @gulshanChoudhary-cl9rw
    @gulshanChoudhary-cl9rw 19 днів тому

    Api rendered nahi ho raha hai.

  • @b0b0_
    @b0b0_ 20 днів тому

    Abolute Legend my gut. Thanks soo much

  • @suryapratap3622
    @suryapratap3622 22 дні тому

    great work

  • @SandipJadhav-ic8fc
    @SandipJadhav-ic8fc 23 дні тому

    Все отлично и просто показано, у меня пошагово получилось

  • @bashar9743
    @bashar9743 24 дні тому

    The link component not working for me

  • @JadeWays
    @JadeWays 24 дні тому

    Good content but you were a bit too fast

  • @user-mc6ei6je5q
    @user-mc6ei6je5q 25 днів тому

    22:32 property "primary" to set the background color is deprecated now. Use "backgroundColor" instead. Change to: background color: tdBlue, foregroundColor: Colors.white, // because the color of the default icon has become gray I would also like to thank the author for providing good and detailed teaching

  • @nathandai7510
    @nathandai7510 27 днів тому

    22:54 The property "primary" to set the background color is deprecated now. Use "backgroundColor" instead to fix error in line 95

  • @fatimamaqsood26
    @fatimamaqsood26 29 днів тому

    Prototype is undefined error

  • @HoschelGraphics
    @HoschelGraphics 29 днів тому

    First of all, thank you for your video. I encountered an error, my buttons do not appear, can you help me how to fix this?

  • @dey-nohden4314
    @dey-nohden4314 Місяць тому

    Nice

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

    where's the mobile layout

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

    Very helpful man. Learnt a lot from here

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

    an app FOR A SPORT SELECTUIB APP PLEASE

  • @SIT-IbiAfridi
    @SIT-IbiAfridi Місяць тому

    firebase?