
Set up a React Native project by installing Node.js and Visual Studio Code, then initialize a blank Expo project. Learn Expo CLI installation and cross-platform development basics.
Explore the React Native Expo project setup, including package.json, app.json, icons and assets, and how app.js uses React, View, Text, and StyleSheet.
Set up android emulators with Genymotion or Android Studio AVD, start Expo, and run the React Native app on the emulator or a real device.
Define reusable text input styles in React Native, apply inline and constant styles, configure email and password fields with placeholders, secure entry, and add a login and registration flow.
Explore running a React Native login UI with Expo, configuring npm start, using Metro bundler and Expo client, and implementing state for text input while refining styles for login screen.
Build a login UI in React Native using state management with text inputs and on text change; implement touchable opacity and alerts, and demonstrate a quick color theme change.
Implement client-side login screen validation by checking email and password inputs using state, and show a success alert when both fields are filled.
Mastering React Native guides you to set the registration page as the root component, implement centered, styled inputs with a secure text entry, and add a sign-up button using TouchableOpacity.
Implement inline registration validation in React Native by checking input lengths and logging data. Show state-based error messages for username and name and apply red borders for invalid fields.
Learn to create a login and registration flow in React Native by installing navigation modules, configuring a stack navigator, and wiring the app entry for a multi-page experience.
Set up a main stack navigator with login and registration screens inside a navigation container, declaring login as the initial root and testing the app in expo.
Demonstrates configuring React Native navigation by adding login and registration screens as routes, setting login as the initial route, and applying header styles and theme changes in the emulator.
Navigate from the login screen to the registration page via onPress using the navigation container; enable back navigation with the header back button.
Learn to call a registration API from a React Native app using fetch, async/await, and try/catch, sending JSON data with proper headers and state-driven fields.
Connect the registration API in a React Native app by validating fields, including password and confirm password, building the request body, and using async/await for 200 status success and errors.
Connect a registration form to an api via fetch, trigger the registration function, and manage state for user data to receive a registration done successfully response and prep for login.
Explore building a cross-platform React Native app with product detail and profile detail screens, covering styling, navigation, data passing, and Rest API integration.
Builds a React Native product detail page with an image slider box, showing the title, price, description, size options, and reviews, plus add to cart and navigation from listing.
Build a product detail screen in React Native by styling touchable opacity buttons, a review section with an author and six-star rating, and an add to cart flow.
Refine the React Native product detail layout by moving from the rating view to finalize with an add to cart button, a separator, and a cohesive style sheet.
Style the product name, price, and detail in a React Native detail screen with red bold name and green bold price. Center the text and address image and layout issues.
Design and implement a profile screen with tabbed slider navigation, displaying contact, personal, work, and education details, using React Native Elements and navigation stack for a reusable login-based project.
Guides building a profile screen in a React Native app using React Native Elements to add validated inputs for name, mobile, email, and address with icons and a save button.
Configure a personal profile screen by integrating a customizable date picker with min/max dates, format, and platform-specific visuals, then implement a gender selection with a button group and state updates.
In this profile screen lecture, update the status and marital status using setState and selected index, while adjusting button container style and input style.
Create a profile screen in react native by refining the about section and a multi-line text with a two plus child option, then outline a settings page and button styles.
Replace the dropdown with a country picker in the contact page, import and configure it for single selection with placeholder, while planning page renames for education, work, and settings.
Design the profile screen's work and education pages in React Native, implementing an occupations dropdown (housewife, teacher, student, etc.) and an INR income range selector with a scrollable height.
Master the profile and settings design in a React Native app by implementing switch states, toggling logic, and persisting user data with async storage on a contact page.
Create a React Native profile screen by managing states for name, mobile, email, business name, and pin code with validation. Save data to memory and add a get data function.
Modify the login flow to navigate to the update password screen, implement old/new/confirm password fields with validation, and call the update password API to complete the change.
Demonstrates testing the forgot password API in a React Native app by inputting an email and observing a 200 ok response with a loading indicator until the password arrives.
Learn to build a cross-platform product listing app with React Native, integrating an API, styling components, and implementing navigation and animations for Android and iOS.
Set up a React Native project with a slide navigation drawer, install a drawer navigator, and build product listing and profile screens using a flat list with static data.
Create a slide menu with a product listing in a React Native project using Expo, Node.js, and Visual Studio Code. Initialize the project and configure navigation dependencies.
Create a two-screen react native app with a product listing and a profile screen using a drawer navigator, with custom content and close and toggle options.
Explore slide menu navigation in a React Native app, implementing a custom drawer with close and toggle actions, featuring a product listing using a flat list and a profile screen.
Master dynamic product listing in React Native by fetching from a product API, implementing a loading indicator, and rendering a touchable, image-and-text row with a flat list.
Convert image URLs to dynamic in a React Native flatlist, then display a rounded image, product name, description, and price with responsive styling and a red background.
Convert a basic slide menu into a three-item navigation with an image icon, using a stack navigator to manage product listing and profile screens with a drawer toggle.
Learn to build a slide menu in React Native by using touchable opacity to toggle a left navigation with an image, styled headers, and test on Android with visor.
Apply slide menu customization in React Native by adjusting icon width and height, tint color and style, margins, and theming, with Android preview and web http(s) limitations for product listings.
Learn how to implement a load more feature in a React Native product list, fetch paginated data from an API, and append it using a class component with offset-based paging.
Learn to fetch server data, manage loading state with offset-based pagination, and implement a load more button and activity indicator in React Native.
Learn how to implement a load more mechanism in React Native by calling an API when scrolling reaches a threshold from the end, and manage loading state.
Explore how a text input updates the search filter, connects to a FlatList, and renders product names through a state-driven search data function.
Learn to implement a filter search list in React Native, handle common issues with nested loops, and enable dynamic results and item detail viewing.
Create an animated product listing in React Native using the react-native-animatable library. Build color and product arrays and apply animations such as fade in, shake, rubber band, and zoom out.
Create an animated product listing in react native by applying centered styles and dynamic colors, then drive item animations—fade in, shake, rubber band, and zoom out—with an animatable view.
Welcome to the React Native Mastery Course, where you will embark on a journey to master mobile application development using React Native. This comprehensive course is designed to equip you with the skills and knowledge needed to build robust and scalable mobile apps for both iOS and Android platforms.
Throughout this course, you will learn from scratch how to set up your development environment, configure projects, and leverage React Native's powerful capabilities to create engaging user interfaces and seamless user experiences. Whether you're a beginner or an experienced developer looking to expand your mobile development skills, this course will provide you with practical, hands-on experience and insights into building real-world applications.
By the end of this course, you will have the expertise to develop and deploy your own React Native applications, integrate APIs for data retrieval, implement navigation and user authentication features, and optimize performance for mobile devices. Join us on this journey and unlock the potential of React Native to build the next generation of mobile apps!
Section 1: React Native - Login And Registration Feature Application
In this section, you will delve into the world of React Native development with a focus on creating a secure and efficient login and registration feature application. You will learn essential concepts and techniques that form the foundation of modern mobile app development. Throughout this section, you will progressively build the login and registration functionalities. Starting with project setup and environment configuration, you will move on to designing and implementing the user interface for login screens, registration forms, and validation mechanisms. Emphasis will be placed on user experience and ensuring data integrity through robust validation techniques. Here, you will integrate backend APIs to handle user registration and authentication. You will learn how to securely communicate with servers to validate user credentials, manage session states, and handle error scenarios gracefully. This section will equip you with skills essential for real-world mobile application development.
Section 2: React Native - Product and Profile Application
This section focuses on extending your React Native skills to develop a product and profile application. You'll begin with an introduction to the project scope and setup, followed by detailed sessions on building product detail screens and customizing profile views. Throughout these lectures, you'll learn to implement complex UI components, handle API integrations for fetching product details, and manage user profiles effectively. By the end of this section, you'll be proficient in creating dynamic and interactive mobile applications with React Native.
Section 3: React Native - Product Listing Application
In the final section of the course, you'll concentrate on building a product listing application using React Native. Starting with project setup and basic UI components like flat lists and slide menus, you'll progress to more advanced topics such as customizing product lists and implementing search functionalities. You'll also explore animation techniques to enhance the user experience when navigating product listings. By mastering these skills, you'll be well-equipped to develop scalable and feature-rich mobile applications using React Native.
Each section builds upon the previous one, ensuring a comprehensive learning experience that equips you with practical skills to develop React Native applications from scratch.
Conclusion By the end of this course, you will have a comprehensive understanding of building sophisticated login and registration features using React Native. You will be capable of developing secure, responsive, and scalable mobile applications, making you proficient in leveraging React Native for future projects.
This course is designed for developers looking to enhance their skills in React Native and mobile app development, providing hands-on experience in building essential features for modern applications.