Build a Movie Mobile App With React Native, TypeScript & Redux Toolkit
!!!!!!!!!!!!!!!!!!! Must Read !!!!!!!!!!!!!!!
This tutorial has some parts of the video frozen and only my voice could be heard, it’s because my Mac’s memory was overwhelmed during the tutorial thus the screen recorder couldn’t get enough memory to capture the screen during those times, but you can get the complete app files on my GitHub repo, link below.
I’ve tried redoing the tutorial but the same issue repeated itself, so I may redo the tutorial again when I’ve figured out a solution to it, thanks for watching
Build a Movie Mobile App With React Native, TypeScript & Redux Toolkit
Buy me a coffee: buymeacoffee.com/paulosab
Please subscribe and share
Overview
In this tutorial we are going to be building a mobile app using React Native, TypeScript, Redux Toolkit, React Hooks, React Navigation and TMDB API
We will use TMDB API to get list of latest movies and display them in the app
We will also use other API endpoints like search API and movie details API
We will use React Navigation for the navigation and also for the bottom tabs
We will also be implementing dark mode with @react-native-async-storage/async-storage and redux-toolkit
We will also be using Shopify's Flashlist which is just like Flatlist but with a better performance
We will also be using axios to make all the API requests within the app
Things you will gain from this tutorial:
Mobile app Networking
React Hooks
Redux
API testing with Postman
React App Optimization
Links
React Native
Setting up your environment for React Native development:
https://reactnative.dev/docs/environm...
useColorScheme doc:
https://reactnative.dev/docs/usecolor...
Redux Toolkit
Getting Started
https://redux-toolkit.js.org/introduc...
Installation
https://redux-toolkit.js.org/tutorial...
Typescript Redux Toolkit Quick Start
https://redux-toolkit.js.org/tutorial...
React Navigation
Getting Started
https://reactnavigation.org/docs/gett...
Quick Setup with Native Stack library installation
https://reactnavigation.org/docs/hell...
Bottom Tab Navigation
https://reactnavigation.org/docs/tab-...
React Native Vector Icons
https://oblador.github.io/react-nativ...
React Native Async Storage
https://react-native-async-storage.gi...
React Native Async Storage Usages:
https://react-native-async-storage.gi...
React Native Async Storage API:
https://react-native-async-storage.gi...
React Native Paper
Getting Started
https://callstack.github.io/react-nat...
Card UI Component
https://callstack.github.io/react-nat...
Switch UI Component
https://callstack.github.io/react-nat...
Shopify Flashlist
https://shopify.github.io/flash-list/...
Simple Usage
https://shopify.github.io/flash-list/...
Icon Sax Icon for React Native
https://iconsax-react.pages.dev/
Icon Sax Icon Installation on NPM
https://www.npmjs.com/package/iconsax...
Postman for API
https://web.postman.co
TMDB documentation
Getting started
https://developer.themoviedb.org/refe...
Get your own Bearer token and API keys here:
https://developer.themoviedb.org/v3/r...
Movie details endpoint
https://developer.themoviedb.org/refe...
Movie Search endpoint
https://developer.themoviedb.org/refe...
Trending movie list (i.e the API to get the list of latest movies on the home page in the app) API
https://developer.themoviedb.org/refe...
Axios
https://www.npmjs.com/package/axios
Link to the lesson files on my github repo:
https://github.com/paulosabayomi/movi...
Or clone it on the CLI
git clone https://github.com/paulosabayomi/movi... RN-movie-app
Please don't forget to follow me on GitHub and fork and/or star the repository
What I couldn't talk about in the tutorial but I later fixed:
i. A bug that makes new search result to display old result with the new result
ii. Dark mode not implemented for the Details page header but I later fixed it by setting the navigation header in the useLayoutEffect in the details component: more details here:
https://reactnavigation.org/docs/navi...
#reactnative #typescript #reduxtoolkit #movieapp #reactnativeproject
