React Native 2024
Agenda
• React Native Background
• What makes RN Great?
• 2024 Trends
• Roadmap
• Exclusive Bonus 🎁
React Native Background
React Native - is Native
The advantage of Native components:
• Performance
• Familiar look and feel
• Always up-to-date with the platform updates
What makes React Native Great?
1. Write once run everywhere
React Native Web
guild.co
React Native Windows + macOS
React Native for VisionOS
Where else can you run React Native?
2. Native Look & Feel
3. The community
Companies contributing to RN OSS
• Expo
• Software Mansion
• Callstack
• Infinite Red
• Margelo
Corporations
• Meta
• Microsoft
• Shopify
Individual contributors
• William Candillon
• Marc Souravy
• Fernando Rojo
• onlydans
• And 1000s others
4. Top companies using React Native
https://evanbacon.dev/blog/expo-2024
https://infinite.red/top-react-native-apps
React Native 2024
React Native is at all-time high: 2M downloads/week
The New Architecture
The old architecture
The NEW architecture
React Native 2024
Server Components are coming to React Native
React Compiler
React Native Frameworks
Expo - The recommended RN Framework
Use native code in Expo apps:
• Expo Config plugins - configure native side projects (ex: AndroidManifest or Info.plist file)
Use native code in Expo apps:
• Expo Config plugins - configure native side projects (ex: AndroidManifest or Info.plist file)
• Custom development builds - use any native side code or library
Use native code in Expo apps:
• Expo Config plugins - configure native side projects (ex: AndroidManifest or Info.plist file)
• Custom development builds - use any native side code or library
• CNG - is an abstract concept of generating the native side projects on demand, based on a
set of inputs (usually expo configuration and config plugins).
Using Expo in 2024 is a no-brainer
Roadmap to React Native Mastery
Javascript
Having strong javascript fundamentals will make it easier to move along with React Native.
It’s also important to know the advanced javascript features introduced in es5 and es6
• Arrow functions
• Array methods: map, forEach, filter
• Promises, async/await
• Object and Array destructuring, spreading
Typescript
Typescript is a superset of Javascript that adds static types.
It’s widely used and highly recommended, especially for larger projects. It helps us
catch errors of incompatible types early in the development.
However, it’s not required. You can build the same application with Javascript.
My recommendation is to start using typescript after you feel comfortable with the
framework your are learning - ex: React Native/Expo.
React
React fundamentals are important when building React Native apps, because React Native uses
React as the UI library.
Should you first learn React and only then React Native?
• No, you can learn the React Fundamentals while learning React Native
However, if you already have experience with React, then it will be easier to learn React Native.
React
• JSX
• Custom components
• Props
• State
• Component Lifecycle
• Hooks
• React Context
React Native
• Native Views
• Styling
◦ styles as javascript objects
◦ StyleSheet API
◦ Flex box
• Managing Forms and Inputs
• Platform APIs
◦ Camera
◦ Permissions
◦ FileSystem
◦ Media library
◦ Deep linking
Expo
I recommend starting your React Native journey using Expo.
First of all, the environment setup is much easier. The Android Studio and Xcode are optional, so you can
get up and running just by having NodeJS.
At the beginning, you will use Expo GO.
As you move further, you will start using libraries that include native code, and in that case you will have
to build a custom development build. This is the time to read more and understand the concepts around
CNG, prebuild, expo config plugins.
Navigation
Mobile Navigation on mobile devices is very different from the web.
On mobile, we have platform specific navigators, such as Stack, Tabs, Drawer.
One of the most popular navigation library for React native is React Navigation.
Expo Router
Expo Router is the first file-based navigation system for React native.
With Expo Router, we simply create files and they are automatically mapped to screens.
It is built on top of React Navigation, that’s why before moving to Expo Router, I would
recommend building at least a project using React Navigation.
Data fetching
Most apps depends on remote data, that is usually fetched from a backend.
We can use the Fetch API to fetch the data.
Here you will have to learn about async data, loading states, useEffects, error handling.
To improve the data fetching and add a local caching layer, I recommend learning TanStack Query.
The next step is to persist data locally, so that your app would display some content if you open it
without a network connection.
Animations & Graphics
• Lottie
• React Native Reanimated
• Gesture Handling
• React Native Skia
Keep learning
The best way to learn?
That’s what I did
Built 50+ React Native apps
Help Developers build impactful Mobile Apps
$499
Launching by the end of 2024
3/7 Projects are Done ✅
Do you want early-access?
Open to enroll for Early-access
$499
$499
$249
ONLY 50 spots available
Enroll now and save $249
https://bit.ly/rnm-early
Group Coaching
See you inside!
Q&A
