Code Aur Bilal
Code Aur Bilal
  • 170
  • 67 344
React Native FlatList Mastery | Build an eCommerce Landing Page with Expo 0.76
🔥 Master React Native FlatList in this comprehensive tutorial using Expo 0.76! 🔥
Learn how to build a dynamic eCommerce product landing page while diving deep into FlatList's powerful features.
What you'll learn:
📜 Vertical List
🔄 Horizontal List
📊 Column-Wise Layout
🔢 Pagination
🔄 Pull-to-Refresh
This tutorial is packed with practical knowledge and hands-on implementation to help you master FlatList in React Native for scalable and dynamic apps. 🚀
Github Code Link: github.com/bilalattari/expo-step-by-step
📹 Watch More React Native Expo Videos:
Part 4: React Native Expo Tutorial - Add Redux Toolkit | Change Theme App Example
Part 3: React Native Expo Tutorial - Common Reusable Button and Text Components
Part 2: Responsive Design with Flex & Dimensions | BYKEA Page Clone
Part 1: React Native Expo Introduction | Setting Up Expo Project
💬 Let us know in the comments what you’re building with FlatList!
Don’t forget to Like, Share, and Subscribe for more React Native content!
#reactnative #expo #flatlist #eCommerceApp #mobileappdevelopment #programmingTutorial #learnWithBilal #reduxtoolkit #reactnative #reactnativetutorial
มุมมอง: 159

วีดีโอ

How to Call REST API in Redux Toolkit | FlatList in React Native Expo (Vertical & Column)
มุมมอง 1327 ชั่วโมงที่ผ่านมา
🚀 Welcome to the next part of the React Native Expo Series! 🚀 In this tutorial, learn: ✅ How to call REST APIs using Redux Toolkit. ✅ Master the use of FlatList in React Native for both vertical and column layouts. ✅ Best practices for managing API data in Expo apps. 🔗 Code Repository: github.com/bilalattari/expo-step-by-step 🎥 Missed Previous Videos? 1️⃣ Part 1: Setting Up Expo Project th-cam....
React Native Expo Tutorial - Add Redux Toolkit | Change Theme App Example
มุมมอง 1137 ชั่วโมงที่ผ่านมา
🔥 Welcome to another exciting part of the React Native Expo Series! 🔥 In this tutorial, we demonstrate how to integrate Redux Toolkit into your Expo app and create a Change Theme Application. 🚀 🔗 Code Repository: github.com/bilalattari/expo-step-by-step 📌 What You'll Learn: Setting up Redux Toolkit in an Expo project. Managing global state for theme switching. How to dynamically update themes u...
React Native Expo Tutorial - Part 3 | Common reuable Button and Text Components
มุมมอง 25012 ชั่วโมงที่ผ่านมา
🚀 Welcome to Part 3 of the React Native Expo Series! In this video, we focus on creating common reusable components in React Native, specifically: ✅ Button Components ✅ Text Components 🔗 Code Repository: github.com/bilalattari/expo-step-by-step 📌 What You’ll Learn: How to make buttons dynamic and reusable. Styling techniques for buttons and text in React Native. Best practices for reusable comp...
React Native Expo | Responsive Design with Flex & Dimensions | BYKEA Page Clone
มุมมอง 65321 ชั่วโมงที่ผ่านมา
🌟 Welcome to the React Native Expo Series - Part 2! In this video, learn how to: ✔️ Use Flexbox and Dimensions for responsive design in React Native. ✔️ Create a BYKEA Page Clone for practice. ✔️ Build a mobile layout that adapts seamlessly to different devices. 🔗 Code Repository: github.com/bilalattari/expo-step-by-step 🛠 Technologies Covered: React Native for mobile app development. Expo 0.76...
React Native Expo Introduction | Setting Up Expo Project for Android & Web
มุมมอง 51921 ชั่วโมงที่ผ่านมา
🌟 Welcome to the React Native Expo Series! In this introductory video, we cover: ✔️ What is Expo 0.76? ✔️ How to set up an Expo project step by step. ✔️ Running your first React Native project on Android and Web platforms. 🔗 Code Repository: github.com/bilalattari/expo-step-by-step 🛠 Technologies Used: React Native for mobile app development. Expo 0.76 for quick and easy project setup. 🎯 This V...
Doctor Appointment System (Part 5) | Booking Appointments & Updating Status
มุมมอง 247วันที่ผ่านมา
In Part 5 of our Doctor Appointment System series, we explore how to implement the booking appointment feature and allow doctors to update appointment statuses dynamically. This tutorial is essential for developers building healthcare or booking platforms with Next.js and MongoDB. 📝 What You'll Learn in This Video: Setting up the appointment booking feature Creating dynamic APIs for updating st...
Complete Student Enrollment Journey | Learning Management System (Part 7)
มุมมอง 10814 วันที่ผ่านมา
We implement the complete student enrollment journey in Part 7 of our Learning Management System series. This includes streamlining the process for students to enroll in courses and manage their enrollment details effectively. 🚀 📝 What You'll Learn in This Video: Setting up the student enrollment process Managing course enrollment data in MongoDB Integration of the enrollment feature with the N...
Doctor Appointment System - Part 4 | Search Params in Next.js 14 | Add Filter (Frontend & Backend)
มุมมอง 17114 วันที่ผ่านมา
In Part 4 of our Doctor Appointment System series, we dive into the use of search parameters with the Next.js 15 App Router! 🚀 Learn how to efficiently manage search functionality in both the frontend and backend using Next.js. 🩺 What We’ll Cover: Using search parameters to filter and manage doctor listings Implementing search functionality in the Next.js 15 App Router Handling search parameter...
Complete Full Stack Location-Based Event App - Part 6 | Add Comments & Going Functionality
มุมมอง 10014 วันที่ผ่านมา
Welcome to Part 6 of our Location-Based Event Web and Mobile App series! In this video, we enhance the interactivity of our app by adding the comments and "going" functionality, allowing users to engage directly with each event. 🌟 What's Covered in This Video: Implementing the comments feature on event pages Adding "Going" functionality to track attendees Integrating these features with Next.js...
Complete Full Stack Location-Based Event App - Part 5 | Creating Events & Home Page Design with AI
มุมมอง 16314 วันที่ผ่านมา
In Part 5 of our Location-Based Event Web and Mobile App series, we dive into the process of creating and displaying events. We also design an engaging home page with the help of AI tools, enhancing the user experience of our application. 🚀 What's Covered in This Video: Creating and displaying events using Next.js and MongoDB Designing a dynamic home page with AI Integrating location-based func...
Doctor Appointment System - Part 3 | Doctor Application & Admin Management
มุมมอง 54121 วันที่ผ่านมา
In Part 3 of our Doctor Appointment System series, we implement a key feature that allows doctors to apply for registration, and we enable the admin to manage and approve these requests. This functionality is crucial for managing doctor profiles and ensuring a trusted healthcare platform. ✨ What’s Covered in Part 3: Setting up a Doctor Application Form Handling doctor requests in MongoDB Admin ...
Learning Management System - Part 6 | Creating Admissions & Opening It
มุมมอง 14021 วันที่ผ่านมา
Welcome to Part 6 of our Full Stack Learning Management System (LMS) series! In this part, we focus on setting up admissions functionality, allowing users to create and open new admissions seamlessly within the platform. 🚀 What’s Covered in Part 6: Creating admissions features in Next.js Setting up MongoDB to handle admissions data Opening and managing admissions efficiently Integrating Shadcn ...
Full Stack LMS - Part 5 | Courses, Batches, and MongoDB Integration in Next.js
มุมมอง 21521 วันที่ผ่านมา
Welcome to Part 5 of our Full Stack Learning Management System (LMS) series! In this part, we focus on creating Courses and Batches APIs, integrating them with MongoDB, and handling advanced queries. 🚀 What’s Covered in Part 5: Setting up Course and Batch APIs in Next.js MongoDB population for efficient data retrieval Implementing search parameters Establishing a strong connection with MongoDB ...
Doctor Appointment System in Next.js - Part 2 | Authentication with NextAuth
มุมมอง 62628 วันที่ผ่านมา
In Part 2 of our Doctor Appointment System series, we’re diving into setting up user authentication with NextAuth. This essential feature allows doctors and patients to securely access their accounts using email, Google, and other providers. 🚀 What’s Covered in Part 2: Setting up NextAuth for secure login Integrating authentication with MongoDB Email and Google sign-in configuration This projec...
NextAuth, Cloudinary Image Upload, & Category Management | PART 4
มุมมอง 43528 วันที่ผ่านมา
NextAuth, Cloudinary Image Upload, & Category Management | PART 4
NEXT AUTH CRASH COURSE || GITHUB and GOOGLE LOGIN || NEXT AUTH
มุมมอง 281หลายเดือนก่อน
NEXT AUTH CRASH COURSE || GITHUB and GOOGLE LOGIN || NEXT AUTH
Doctor Appointment System in Next.js - Part 1 | Complete Layout Setup
มุมมอง 1.1Kหลายเดือนก่อน
Doctor Appointment System in Next.js - Part 1 | Complete Layout Setup
Complete Authentication in Next.js LMS with NextAuth & MongoDB | Secure User Data
มุมมอง 330หลายเดือนก่อน
Complete Authentication in Next.js LMS with NextAuth & MongoDB | Secure User Data
Master Search Parameters in Next.js | Dynamic Search & Pagination for Posts App
มุมมอง 150หลายเดือนก่อน
Master Search Parameters in Next.js | Dynamic Search & Pagination for Posts App
Login & Signup APIs with JWT, Bcrypt, MongoDB | Secure Authentication in Next.js
มุมมอง 551หลายเดือนก่อน
Login & Signup APIs with JWT, Bcrypt, MongoDB | Secure Authentication in Next.js
Routes for Categories & Subcategories | MongoDB Populate, Query Params | Location Based Event App(3)
มุมมอง 279หลายเดือนก่อน
Routes for Categories & Subcategories | MongoDB Populate, Query Params | Location Based Event App(3)
Creating Data Tables & Adding Course and Batches Dialog | LMS Project Part 2
มุมมอง 432หลายเดือนก่อน
Creating Data Tables & Adding Course and Batches Dialog | LMS Project Part 2
MongoDB Integration, API Routes, & Vercel Deployment for Event Management App | PART 2
มุมมอง 706หลายเดือนก่อน
MongoDB Integration, API Routes, & Vercel Deployment for Event Management App | PART 2
Setting Up the LMS Project & Admin Pages in Next.js | Learning Management System
มุมมอง 539หลายเดือนก่อน
Setting Up the LMS Project & Admin Pages in Next.js | Learning Management System
Setting Up Project and Admin Pages , Location Based Event App (Part 1)
มุมมอง 838หลายเดือนก่อน
Setting Up Project and Admin Pages , Location Based Event App (Part 1)
Full CRUD Blog App in Next.js | MongoDB Integration with GET, POST, PUT, DELETE APIs
มุมมอง 513หลายเดือนก่อน
Full CRUD Blog App in Next.js | MongoDB Integration with GET, POST, PUT, DELETE APIs
Connect MongoDB Database with Next.js | Full Integration Tutorial
มุมมอง 635หลายเดือนก่อน
Connect MongoDB Database with Next.js | Full Integration Tutorial
Complete Next.js Todo App with GET, POST, PUT, DELETE API Integration
มุมมอง 350หลายเดือนก่อน
Complete Next.js Todo App with GET, POST, PUT, DELETE API Integration
Create GET & POST API in Next.js | Build a Small Todo App with API Integration
มุมมอง 632หลายเดือนก่อน
Create GET & POST API in Next.js | Build a Small Todo App with API Integration

ความคิดเห็น

  • @RonaldCollins-g4d
    @RonaldCollins-g4d 15 ชั่วโมงที่ผ่านมา

    Thanks for the forecast! A bit off-topic, but I wanted to ask: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?

  • @ahmed8254
    @ahmed8254 18 ชั่วโมงที่ผ่านมา

    Sir not able to understand this lec because of ts i known only js

    • @codeaurbilal
      @codeaurbilal 18 ชั่วโมงที่ผ่านมา

      @@ahmed8254 you can try in typescript it's very easy, if any question you can text me 03132933803

  • @bablukarachi3161
    @bablukarachi3161 วันที่ผ่านมา

    Mashallah mashallah mashallah please please full stack react native next JS ko outstanding level per aap sikhayen please and thank u so Mach

  • @Sanaullah-p2n7j
    @Sanaullah-p2n7j วันที่ผ่านมา

    Another amazing tutorial, Sir! 🙌 This video perfectly explains how to integrate Redux Toolkit into an Expo app, especially for managing global state and switching themes dynamically. The step-by-step approach makes it so easy to follow and implement. 🎉 Thank you for consistently providing such high-quality and practical React Native content. These tutorials are a goldmine for anyone looking to master app development! 🚀 Looking forward to more insightful videos. Keep up the fantastic work! 👏

    • @codeaurbilal
      @codeaurbilal 20 ชั่วโมงที่ผ่านมา

      Thanks for your kind words!

    • @Sanaullah-p2n7j
      @Sanaullah-p2n7j 18 ชั่วโมงที่ผ่านมา

      Sir, may Allah always keep His blessings upon you. It’s truly our honor to express gratitude for the immense value you provide us. Thank you so much for dedicating your precious time to making learning accessible and easy for us. We deeply appreciate your efforts!

  • @arsalanali8025
    @arsalanali8025 วันที่ผ่านมา

    ❤🧡❤

  • @Sanaullah-p2n7j
    @Sanaullah-p2n7j 2 วันที่ผ่านมา

    Absolutely amazing tutorial, Sir! 🔥 The way you’ve explained React Native's FlatList with such clarity and practical examples is unmatched. Covering all essential features like vertical/horizontal lists, column-wise layout, pagination, and pull-to-refresh in one video is a rare gem. The inclusion of sticky headers and such detailed guidance makes this tutorial a complete package. I’ve learned so much from this video, and I’m excited to implement these concepts in my own projects! Thank you for always delivering top-notch content. 👏 Keep up the incredible work, Sir! 🙏

  • @shahzaibali07
    @shahzaibali07 2 วันที่ผ่านมา

    Sir audio ka masla q hota hai apki videos main?

    • @codeaurbilal
      @codeaurbilal 2 วันที่ผ่านมา

      Will be resolved

  • @GlobalGreats
    @GlobalGreats 3 วันที่ผ่านมา

    salam sir my heading showing with %20 afteer every word also in URL path. how to handle this?

    • @codeaurbilal
      @codeaurbilal 3 วันที่ผ่านมา

      @@GlobalGreats you are adding space in url

    • @GlobalGreats
      @GlobalGreats 3 วันที่ผ่านมา

      @codeaurbilal thanks you so much sir

  • @faqeersaein8468
    @faqeersaein8468 3 วันที่ผ่านมา

    Sir please don't stop this series ❤

    • @codeaurbilal
      @codeaurbilal 3 วันที่ผ่านมา

      Salaam zarur

  • @MuhammadAhsan-11
    @MuhammadAhsan-11 3 วันที่ผ่านมา

    Sir one Next js authentication project be parha dn

    • @codeaurbilal
      @codeaurbilal 3 วันที่ผ่านมา

      it's already in my next js playlist th-cam.com/video/f70eWcCFqho/w-d-xo.html

  • @sandeshadhikari4785
    @sandeshadhikari4785 4 วันที่ผ่านมา

    love from Nepal

  • @arsalanali8025
    @arsalanali8025 4 วันที่ผ่านมา

    Kamaal Sir!

  • @sharjeelrelaxing3887
    @sharjeelrelaxing3887 4 วันที่ผ่านมา

    Mashaallah sir great 👍 video for react native component

  • @WaseemKhalil-kh6um
    @WaseemKhalil-kh6um 4 วันที่ผ่านมา

    great

  • @GlobalGreats
    @GlobalGreats 5 วันที่ผ่านมา

    sir waiting for next videos

    • @codeaurbilal
      @codeaurbilal 5 วันที่ผ่านมา

      InshaAllah, coming soon!

  • @GlobalGreats
    @GlobalGreats 5 วันที่ผ่านมา

    salam sir storage use krny ke liye firebase update krny ka khe rha hai, what should i do

  • @codewithdev7533
    @codewithdev7533 6 วันที่ผ่านมา

    Sir ap promise to use krain

  • @programmingholic
    @programmingholic 8 วันที่ผ่านมา

    Thnks for shaaaraingn this lecture. bro recordinng screen ki with plesae puri rkhain.

  • @programmingholic
    @programmingholic 8 วันที่ผ่านมา

    Thank you sir for staarting this series. .

  • @i_Drive_in_hell
    @i_Drive_in_hell 8 วันที่ผ่านมา

    Mashallah Sir keep posting like this.. Thank You.👍

  • @MuhammadFareed-l9y
    @MuhammadFareed-l9y 8 วันที่ผ่านมา

    Best React Native Tutorial. :)

  • @heyyahan7976
    @heyyahan7976 8 วันที่ผ่านมา

    Walaikumassalam,

  • @jawedahmed3318
    @jawedahmed3318 9 วันที่ผ่านมา

    Good 👍👍 sir

  • @ahmednawazgondal1064
    @ahmednawazgondal1064 9 วันที่ผ่านมา

    great

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

    Assalamualaikum sir expo ki aj ki video dal dein with GitHub repo❤

  • @ShahMuhammad-xp7ww
    @ShahMuhammad-xp7ww 10 วันที่ผ่านมา

    Assalam-u-alaikum Sir Apny bhot achy sy samjhaya but tora slow samjaty to ziyada acha hota or aik baat at least two time repeat Kiya kary apni BAAT ko beginners ko tab Samaj aati hy

  • @codewithdev7533
    @codewithdev7533 11 วันที่ผ่านมา

    But I get random data without passing no cache object how?

    • @codeaurbilal
      @codeaurbilal 11 วันที่ผ่านมา

      @@codewithdev7533you will be on next js 15

  • @arsalanali8025
    @arsalanali8025 11 วันที่ผ่านมา

    Best Tutorial ever!🥰

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

    Assalamualaikum! Videos ap thori zoom krky bnayn . Overall good lectures

  • @Knowledgeseeker7101
    @Knowledgeseeker7101 16 วันที่ผ่านมา

    Please improve the sound quality. Thanks for these videos.

  • @Knowledgeseeker7101
    @Knowledgeseeker7101 17 วันที่ผ่านมา

    Best explanation.🎉

  • @Knowledgeseeker7101
    @Knowledgeseeker7101 17 วันที่ผ่านมา

    JazakALLAH 💕

  • @MuhammadAhsan-11
    @MuhammadAhsan-11 18 วันที่ผ่านมา

    sir one role based authentication project using next js

    • @codeaurbilal
      @codeaurbilal 18 วันที่ผ่านมา

      See my lms series and doctor series , had done it there

  • @MuhammadAhsan-11
    @MuhammadAhsan-11 18 วันที่ผ่านมา

    sir i watch your videos your method of teaching is owesome

    • @codeaurbilal
      @codeaurbilal 17 วันที่ผ่านมา

      Thanks for your words

  • @Knowledgeseeker7101
    @Knowledgeseeker7101 20 วันที่ผ่านมา

    jazakALLAH ustad 💘

  • @ammardevtech
    @ammardevtech 23 วันที่ผ่านมา

    sir thanks your helpful vedio 🥰🥰

  • @vloggerbhaiya1071
    @vloggerbhaiya1071 23 วันที่ผ่านมา

    my Mentor

  • @story-book-magic
    @story-book-magic 23 วันที่ผ่านมา

    github link?

    • @codeaurbilal
      @codeaurbilal 23 วันที่ผ่านมา

      @@story-book-magic in description

  • @asadraza8173
    @asadraza8173 23 วันที่ผ่านมา

    Sir production pr login nhi horha aur na hi Api get horhi hen localhost pr sai chal rha he sab Kia issue he?

    • @codeaurbilal
      @codeaurbilal 23 วันที่ผ่านมา

      @@asadraza8173 did you added proper Base URL in the environment variable's in the vercel , and secrets in the environment

  • @Knowledgeseeker7101
    @Knowledgeseeker7101 27 วันที่ผ่านมา

    ❤❤❤

  • @JawadAhmed-up4oc
    @JawadAhmed-up4oc 28 วันที่ผ่านมา

    Sir 50 min k bad sy apki screen hang ho gyi or kch record nh hua :( only voice a rhi hy

  • @Knowledgeseeker7101
    @Knowledgeseeker7101 29 วันที่ผ่านมา

    The best explanation ever ❤

  • @raheem8309
    @raheem8309 29 วันที่ผ่านมา

  • @WajidLiaquat
    @WajidLiaquat 29 วันที่ผ่านมา

    sain thanks excellent explaination with easy method bhoht shuhkria mene dono google or github se aasani se login krna sikh lia

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

    Very good explanation sir, thanks a lot ❤ There Is Just One Issue That The voice is too low, please fix it in next video 😇

    • @codeaurbilal
      @codeaurbilal 29 วันที่ผ่านมา

      I will try my best

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

    Sir, please upload more videos onTypeScript. JazakALLAH 💗💗

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

    JazakALLAH 💕

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

    Sir react native cup start hogi

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

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

    JazakALLAH sir 💗💗