Course
Course Decription
Unlock the world of cross-platform app development with our comprehensive course, “Building Cross Platform Apps with React Native.” Learn how to create high-performance, visually stunning apps with React Native and Expo that run seamlessly on both iOS and Android devices.
What will I learn?
- 😎 Master React Native navigation, including tab bars and nested stacks for a smooth user experience.
- 🌈 Unleash your creativity with styling using the NativeBase library, crafting captivating forms, lists, and cards.
- 📸 Harness the power of Expo features like the camera, adding native functionality to your app with ease.
- 🏗️ Explore the various build options that Expo offers, including the powerful Expo Application Services (EAS).
Don’t let cross-platform app development challenges hold you back. Enroll in “Building Cross Platform Apps with React Native” now and start building stunning, versatile applications with React Native and Expo today!
👋 Getting Started
Course Intro
What are we building in this course, and what will you learn? Let's take a quick look at the course and all objectives!
🧭 Navigation
Simple Stack Navigation
Navigation is the most important concept to understand, so we start by creating a simple stack navigation in our app to move between screens.
Building a Tab Bar Layout
While a stack navigation is cool, it's usually not enough. Therefore, we now also add a tab bar layout to our app!
Adding Nested Stack Navigation
We are almost there, but we need to fix the stack navigation inside of the tab bar now to have our own stack of screens on a specific tab page.
Passing Params to Screens
The last missing piece to a powerful navigation is the ability to send params to another page - and that's what we do now!
🌈 Styling & Components
Setting up Nativebase
To style our React Native app more easily we add one (if not the) most popular styling libararies which comes with tons of cool features.
Using a Form Control
The first element we add to our page is an input field, which we wrap into a flex layoaut by using the Nativebase utility clases.
Adding a Select Dropdown
Now we add a dropdown, which renders as a nice bottom list with Nativebase!
Building a List of Items
It's time to add some real API interaction to the mix and display data in a cool list component.
Creating a Details Card
To wrap up the basic UI implementation we create a cool card component on our details page based on the API information.
👩💻 Features
Handling Errors
How do we handle errors? Not yet, but with a Nativebase disclose this becomes a breeze!
Loading & Skeletons
Another way to spice up your view is by improving transitions and increasing the perceived performance using skeleton views.
Native Device Functionality
Need native features? Expo has you covered again with a ton of plugins from which we test drive one now.
🏗️ Build
App Icon & Splash
Every app needs an icon and optionally splash screen, but of course this task is super simple with Expo.
Local Prebuild with Expo
Let's talk about the different Expo workflows and how you can easily switch from a managed build to a bare build with Expo prebuild!
Build with EAS
For the end of our React Native course we have a big finale where we take a look at EAS, the cloud build service for React native apps with Expo!