React Native From The Ground Up [Updated Dec 2025]

In this video we will cover the following topics:

1. General naming conventions

2. File structure of the apps we will be building

3. Expo templates and what they provide

4. Core React Native components

5. JSX - a brief overview

6. App styling

In this video you will expand on our registration form and spend a little time on styling, to give you some practice.

In this video you will learn how to build your very own React Native component.

We will refactor our code so the structure is more modular and easier to build on.

This video is all about making our form work.

You will learn the following:

1. Using Text input props

2. Using callbacks

3. Handling user input

4. The button component

5. The onPress action

6. Different types of keyboard

7. Password field

We will complete the registration form in this video and concentrate on making it look like the design brief.  We will compare the difference between iOS and android devices, using the emulator and Simulator, and set styles specific to each device.

In this video we are going to lern the basics of Dynamic Navigation. We are going to cover the following topics:

1. The packages and libraries required

2. The installation process

3. Using Navigators

In this video we will discuss more about the NavApp and the various components.  We will also cover the following topics:

1. How to add new screens

2. Adding buttons to those screens

3. How to navigate between screens

In this video we will take a closer look at the navigation API.  We will also look at:

1. The route prop

2. Navigation params

This video is all about the strructure of our project files.  We will do the following:

1. Create a screen componet for the HomeScreen

2. Move some of our styles into a Stylesheet

3. Work on keeping our code DRY

4. Modify the product details screen to dynamically use the color

5. Explore header options

We have a slight mind shift change in this video.  We can stretch our minds and start thinking about this as a growing store of products.

We will cover the following:

1. Adding structured product data to the app

2. Using this seed data for products

3. Using the Flatlist component

4. The 'key' we need to use with out lists

5. Using ...props - the spread operator

6. Adding details information

7. Multi column displays

In this video we are going to ad our colored button.

You will learn how to:

1. Create custom list item comonents

2. Style the component

3. Render the component in a Flatlist

4. Turn the component into a button

In part 1, we start the process of deleting colors from our list. To enable us to do that we will use React State.

You will learn:

• How to use the use multiple Pressable components in the ListItem component

• What an Anti Patern is - and how to elimitate it

• The loading and unloading of components

  
  

I'll also set a challenge related to props.

In part 2, we complete the process of deleting colors from our list. To enable us to do that we will use React State.

You will learn:

• How to use the use multiple Pressable components in the ListItem component

• What an Anti Patern is - and how to elimitate it

• The loading and unloading of components

  
  

I'll also set a challenge related to props.

I set a challenge at the end of the oprevious lesson.  In this video, we will cover a couple of ways to solve the challenge.

We will also talk about Anti Patterns.

In this video we are going to prepare our code for the addition of new buttons. We will learn about:

1. The modal component

2. Props and functions available on the modal component

3. Displaying and hiding the component

4. Using state to manage the modal

In part 1 of this video we are going to start building the structure of our code for the adition of colors to our list.

You will learn how to:

• Add input fields onto a modal

• Use the useRef React Hook

• Modify the Keyboard Key

• Automatically move input fields to focus the next field

In part 2 of this video we are going to continue building the structure of our code for the adition of colors to our list.

You will learn how to:

• Add input fields onto a modal

• Use the useRef React Hook

• Modify the Keyboard Key

• Automatically move input fields to focus the next field

In this video, we will implement the final stage of the addition of colored buttons to our list.

In part 1 of this video we will start the process involved in editing colored buttons.

This is a standard technique and while there are many ways to solve the problem, the coding and structure practice will serve you well.

In part 2 of this video we will complete the process involved in editing colored buttons.

This is a standard technique and while there are many ways to solve the problem, the coding and structure practice will serve you well.

In this video we are going to add a React Reducer to our code.  This will enable us to:

1. Consolidate state logic

2. Make our code easier to debug

3. Although our code base is small, it is a great time to learn more about reducers

In this video we start the process of adding the drawer to our app.  To achieve that we will do the following:

1. Install the drawer navigator

2. Install Gesture handler and Reanimated

3. Compare the structure and flow of the app when switching between stack and drawer navigators

4. Identify Issues Related To The Navigator Structure

In this video we complete the process of adding the drawer to our app.  To achieve that we will do the following:

1. Install the drawer navigator

2. Install Gesture handler and Reanimated

3. Compare the structure and flow of the app when switching between stack and drawer navigators

4. Identify Issues Related To The Navigator Structure

Having created the side drawer in our app, we are now going to take it to the next level and create a custom drawer. To help us achieve this, we will use the following:

• Use React Context hook

• Create multiple contexts

• Use Context with A Reducer

• Share state throughout our app

• Add our colored buttons to our custom side drawer

Having completed part 1, we are now going to complete thr process of created the side drawer in our app.

To recap :

We are now going to take it to the next level and create a custom drawer. To help us achieve this, we will use the following:

• Use React Context hook

• Create multiple contexts

• Use Context with A Reducer

• Share state throughout our app

• Add our colored buttons to our custom side drawer

In this video we will explore a technique to preserve that state of the app between reloads or restarts.

To achieve this, we will install and use Async Storage.

In this video we will complete the addition of saving our buttons to Async Storage.

In this video we are going to add images to our colored buttons. We will learn about using 'require' and how the metro bundler resolves files during build time. 

In this video we will add the Bottom Tabs to our app.

You will learn how to add additional bottom tab screens, how to change the tab icon and label and how to use different images styles depending on if the tab is focused.

In this video we will learn more about the bottom tabs.  We will explore some of the options and props we can control and use a few to give you some practice.

You will learn how to further customise the bottom tabs and also how to add a badge that dynamically changes based on the number of products in the store.

This is the start our the SocialApp. An app related to the managing of images and videos and the foundation of a social sharing app.

In this video, we will initialise our project and put the assets required in place and ready for development.

In this video we are going to build the overall structure of our app.

We will add bottom tabs and all of the screen components required and connect them together.

In this video we are going to build out the bottom tabs of the app.

You will learn how to manage screen options and add icons based on the various states of the tabs and adjust the scene color.

In this video, we are going to introduce the action button.  It is the button that appears on the bottom tabs.

In this video we will start the process of getting  the header of the app organised.  There are many parts, and this is the first.

You will learn how to position item on the screen using a variety of techniques.

In this video we are going to get familiar with React Native Elements, a UI library that has some interesting components to save us the effort of building our own.

We will also add the Name and Tagline to the home page.

In this video we are going to implement the followers and following section of the figma design to the Home Screen.

As our code is getting crowded, this short video is a code refactor to optimise the friends and followers setion of the home screen without compromising code readability.

In this video we are going to implement the button group that will be used to switch between the Photo and Video galleries.

You will learn how to use the React Native Elements UI Library.

In this video we will build a static version of the photo album to help us build out the logic and layout of the app.

In this video we are going to complete the layout of the action button, and to help, you will get more practice using context. 

With context now implemented, we have the power to easily transfer information from any component to another and use our context as a mediator.

In this video, we will implement a feture that will transform our action button into a contextual button, performing actions that depend on the screen.

To achieve this, you will learn about a Navigation Hook.

You will also learn how to conditionally change contents of the bottom tabs on different screens.

In this video we will implement an overlay to make it easier for us to manage the flow while taking pictures. You will get a more detailed understanding about how we get the modal and other components interaction with our Social Provider (mediator pattern)

In this video we are going to get the style, layout and positioning ready for the camera overlay in preparation for uploading and taking pictures.

Learn how to use the Icon component from RNEUI and how to position reletive to the enclosing view.

In this video we will use more Expo libraries to upload images from our devices to our gallery.

You will learn how to manage the interaction between various components to conditionally display UI components.

Now that we have our images selected, we need to save them to our album.

In this video we will create the photo album and store images selected into it.

You will gain more practice on using Context to manage the flow of information around the app.

The upload of images from our device gallery does not require permission.  In this video we are going to use the camer to take pictures. This facility will work on Android.

For iPhone users, follow along with the code, but some elements will not work until we cover Permission, Devices and the Permission Hook.

So far, we have configured the app to upload images to the gallery, and to take photos.

As mentioned previously, some permission issues on iOS are resolved in the Handling Device Permissions video.

In this video, we are going to work through the process required for uploading videos.

In this video we are going to add duration timing to the videos that we are adding to the gallery.

In this video, we will use an Expo library to generate thumbnails from the uploaded videos and to use that as the video image.

Now that we have the videos uploaded, we will work on improving the formatting of the duration timing.

In this video we are going to implement the permission hook for camera interaction.  This should resolve any issues being experienced by iOS users and is the required process for requeting camera interaction in any app.

You will learn the slightly different flow when using iOs and Android device permissions.

In this video, we are going to add the taking of videos to our app.  All the pieces of the puzzle are in place, so let's get going.

Now that our images are in the album, wouldn't it be a good idea if when selected, we could get a closer look at them.

In this video, we are going to lay the foundation by creating an overlay and create interaction to support the opening and closing of the overlay. Then we will be ready to display our selected image.

In this video we are going to complete the task of displaying images in a larger view when selected.

In this video we are going to implement the pinch gesture. We first used the  geture handler library when dealing with colored buttons and the side drawer.

This feature will enable us to really have a closer look at the images when selected.

You will learn, in detail, how the pinch gesture works.

In this video we will create the stucture that will enable us to watch videos that have been uploaded to our library. First, we will create the overlay and structure required.

In this video we will explore the Expo Video Player, install the library and play videos that have been added to our album.

In this video, we are going to work on the last major screen of this app, the profile screen.

There will be a number of input fields and these will dynamically update elements of the app when changed.

In this video, we will make the display name and the tagline dynamic, so when they are changes on the user profile screen, then are updated on the home screen.

In this video we are going to perform some optimisation to our code to make adding additional input fields easier.

It will also enable us to have a closer look at the React useRef and forwardRef (deprecated, but still around!) hooks.

We will then add the user handle field to the app.

In this video we are going to implement the gender settings and dynamically update the background header image.

In this video we are going to perform a number of tasks that have already been covered in this app. We are going to:

1. Add an action/asset button to the profile screen to take pictures

2. Connect the button to an overlay, that we will create from scratch

3. Use image picker launch camera async to launch the front camera

4. Take a profile picture

5. Store the picture in context

6. Use the picture as the profile image on the home screen.

You may want to give this a go yourself, you have nothing to lose!  If you get stuck, just work through the video for answers.

In this video, we will set up the project structure for our mini authentication app. By the end of this video you will have completed the following:

1. Created the project structure

2. Installed libraries & packages required

3. Connected app To Home Screen

This video contains an overiew of the Firebase products, a brief discussions about additional services and the process required to sign up for the no cost Firebase option.

Before we get deep into Firebase, we need something to use it with.  So in this video, and the next, we are going to create a new app called ListBuddy, which is you friend for managing a list, a one page Todo app.

In this video we are going to create the structure for our app.  We will use context and a reducer to manage interaction and state within this app.

This video should serve as a good revision and practice for some of the things you have already learned.

In this video we will complete the setup of Firebase project for using the real time database.

In this video we are going nto install the Firebase SDK for the Realtime Database, configure the required environment variables to connect then add some data to the realtime database.

So far we have leared how to set data at a point on the database and also how to push data using new references.  The power of the realtime database is really about being notified when something happens, so we will explore the use of callbacks.

We have now added items to our list and stored them on the database.  We havd also set a callback to update state in the reducer.

In this video, we will start the implementation of the delete feature.

Now that we have deleted data from the real time database, we need to ensure that the data is also deleted from state, using a callback.

In this video, we will take a little break from Firebase and refactor some code.

In this video, we will implement the todo completed feature.  When an item is done, we want to change the status on the database and also in state.

Before we progress to integrating Firebase Auth into our app, there are a couple of querky features that we need to resolve.

The first of these is our duplicate keys stack trace when the app is reloaded, the second is related to subscriptions of callbacks and best practice.

In this video we are going to integrate our previous Auth project, into this app.

We will do the following:

1. Download and install the Auth files

2. Install secure store

3. Make numerous changes to the app.js file and

4. Add a simple login screen

In this video we are going to complete the setup of one Login / Register screen. This will enable us to test out the Sign Up and Sign In features of auth.

In this video, I'm going to walk through the configuration settings required in Firebase console to enable us to get going with Firebase Auth.

In this video we are going to register our first user using Firebase Auth

In this video we will walk through error handling. We will build a solid structire to manage and handle the catching and throwing of errors from Firebase.

We have register users and handled some of the more common errors.  In this video, we wil create the code stucture to sign user into Firebase.

In this video we are going to lock down the database.  We will set database rules to ensure that only authenticated users can access the database and only authorised users see their data.

With the changes to the database structure already made, we now need to work through the ramaining functions to update their location and userId to ensure that they connect to the correct database location.

We curently have a situation where users are logged out from the app each time it is reloaded. This is not ideal, but before we implement persistent user sessions, we will provide users with the facility to log themselves out.

In this video, we are going to implement session persistence. This is the process of keeping users logged in without then having to constantly enter their credentials.

So once logged in, they remain logged in, unless they log themselves out.

To get going, we bootstrap a new project with npx create-expo-app. We test the installation and then get going.

You will learn how to structure and layout the screen grid for the game.

The next stage is to create the tile, one for each letter of the game play.

In this video we complete the creation of the grid and get the layout ready for the game.

Learn how to build your own keyboard of letters for the game play

Make the keyboard useful by adding styling and make the letters pressable.

Create a component to house the action buttons, delete and submit.

In this lesson you will learn how to create context to control the overall logic of the games and to reduce the component interaction, making the components more reusable.

Learn how to add a reducer with context, this powerful advanced React technique, and provide state management and logic control for the whole app.

Here we get functional and learn how to connect the letters to the grid tiles. We add and delete characters, the basics for gameplay.

Here we set up boundary control to avoid deleting characters that don't exist and avoiding game logic errors.

In this video we style and layout the action buttons on the keyboard.

Learn how to implement some game over logic control.

In this video you will learn how to use the Map object to control of logic of a key part of game play.  How to use Map to handle duplicates and determine what state the tiles will be in.

In this video we configure the correct guessed tiles scenario. Right letter in the right place.

There are more Game End conditions and we configure another one in this video.

We are now ready to complete the other states of guessed letters and do that in this video.

In this video you will learn how we use the state structure to determine which colour the tiles should be.

In this video you will learn the process required to add state colours to the keyboard letters that have been used in the game.

In this video we build and Game end Component to display related game end information to the user.

Play Again? Here we build the logic required to enable the user to play the game again and again.

Random Word Gameplay. Learn how to make the game fully functional.  Add thousands of words to the game so that each play uses a new random word, making it a fun game to play.

Final part of the game, handling words not in the word list.