React Native Development
Build cross-platform mobile apps with React Native. Master components, navigation, styling, native modules, and deployment to iOS and Android from a single codebase.
Overview
Build cross-platform mobile apps with React Native. Master components, navigation, styling, native modules, and deployment to iOS and Android from a single codebase.
What you'll learn
- Build React Native apps from scratch
- Implement navigation and routing
- Style apps with StyleSheet and NativeWind
- Integrate native modules and device APIs
- Deploy apps to App Store and Play Store
Course Modules
12 modules 1 Introduction to React Native
Understanding React Native architecture and setting up your development environment.
30m
Introduction to React Native
Understanding React Native architecture and setting up your development environment.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain React Native
- Define and explain Expo
- Define and explain Bridge
- Define and explain Native Components
- Define and explain Development Build
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Native lets you build mobile apps using JavaScript and React. Created by Facebook in 2015, it renders native components, not web views. Your code runs on a JavaScript thread that communicates with native iOS and Android components via a bridge. The new architecture (Fabric and TurboModules) improves performance with direct native calls. Set up with Expo for quick start: npx create-expo-app MyApp, or React Native CLI for full native access. React Native powers apps like Instagram, Discord, and Shopify.
In this module, we will explore the fascinating world of Introduction to React Native. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
React Native
What is React Native?
Definition: Framework for building native mobile apps with React
When experts study react native, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding react native helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: React Native is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Expo
What is Expo?
Definition: Platform and framework built on React Native for easier development
The concept of expo has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about expo, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about expo every day.
Key Point: Expo is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Bridge
What is Bridge?
Definition: Communication layer between JavaScript and native code
To fully appreciate bridge, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of bridge in different contexts around you.
Key Point: Bridge is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Native Components
What is Native Components?
Definition: Platform-specific UI elements rendered by React Native
Understanding native components helps us make sense of many processes that affect our daily lives. Experts use their knowledge of native components to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: Native Components is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Development Build
What is Development Build?
Definition: Custom Expo build with native code access
The study of development build reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: Development Build is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Expo vs React Native CLI
Choose your development approach wisely. Expo is a framework built on React Native offering: managed workflow with pre-configured native code, over-the-air updates, Expo Go app for instant testing, and rich SDK with camera, notifications, and more. Use Expo for most projects. React Native CLI provides: full native code access, custom native modules, and complete control. Required for complex native integrations. Development builds in Expo bridge the gap, letting you add custom native code while keeping Expo benefits. Start with Expo, eject if needed.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? React Native was open-sourced in 2015, but Facebook had been using it internally since 2013. The Ads Manager app was the first production app built with it!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| React Native | Framework for building native mobile apps with React |
| Expo | Platform and framework built on React Native for easier development |
| Bridge | Communication layer between JavaScript and native code |
| Native Components | Platform-specific UI elements rendered by React Native |
| Development Build | Custom Expo build with native code access |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what React Native means and give an example of why it is important.
In your own words, explain what Expo means and give an example of why it is important.
In your own words, explain what Bridge means and give an example of why it is important.
In your own words, explain what Native Components means and give an example of why it is important.
In your own words, explain what Development Build means and give an example of why it is important.
Summary
In this module, we explored Introduction to React Native. We learned about react native, expo, bridge, native components, development build. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
2 Core Components
Using View, Text, Image, ScrollView, and other essential components.
30m
Core Components
Using View, Text, Image, ScrollView, and other essential components.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain View
- Define and explain Text
- Define and explain Image
- Define and explain ScrollView
- Define and explain Pressable
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Native provides core components that map to native views. View is like div - a container for layouts. Text displays text (required for all text content). Image shows images with source prop. ScrollView enables scrolling content. TextInput handles user text input. Pressable and TouchableOpacity create tappable elements. SafeAreaView respects device notches. Unlike web, you must use specific components:
In this module, we will explore the fascinating world of Core Components. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
View
What is View?
Definition: Container component similar to div in web
When experts study view, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding view helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: View is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Text
What is Text?
Definition: Component for displaying text content
The concept of text has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about text, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about text every day.
Key Point: Text is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Image
What is Image?
Definition: Component for displaying images
To fully appreciate image, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of image in different contexts around you.
Key Point: Image is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
ScrollView
What is ScrollView?
Definition: Scrollable container for content
Understanding scrollview helps us make sense of many processes that affect our daily lives. Experts use their knowledge of scrollview to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: ScrollView is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Pressable
What is Pressable?
Definition: Modern touchable component with press states
The study of pressable reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: Pressable is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Component Best Practices
Master these component patterns: Always wrap text in Text components. Use FlatList or FlashList instead of ScrollView for long lists. Pressable is the modern touchable with pressed state: style={({ pressed }) => [...]}. Image requires width and height, or use resizeMode. SafeAreaView should wrap your screen content. KeyboardAvoidingView prevents keyboard from covering inputs. ActivityIndicator shows loading states. StatusBar controls the status bar appearance. Platform-specific code: Platform.OS === "ios" or Platform.select({ ios: value, android: value }).
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? The Text component requirement comes from iOS where all text must be in UILabel. This constraint actually helps accessibility - screen readers know exactly where text is!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| View | Container component similar to div in web |
| Text | Component for displaying text content |
| Image | Component for displaying images |
| ScrollView | Scrollable container for content |
| Pressable | Modern touchable component with press states |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what View means and give an example of why it is important.
In your own words, explain what Text means and give an example of why it is important.
In your own words, explain what Image means and give an example of why it is important.
In your own words, explain what ScrollView means and give an example of why it is important.
In your own words, explain what Pressable means and give an example of why it is important.
Summary
In this module, we explored Core Components. We learned about view, text, image, scrollview, pressable. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
3 Styling with StyleSheet
Styling components with StyleSheet, Flexbox, and responsive design.
30m
Styling with StyleSheet
Styling components with StyleSheet, Flexbox, and responsive design.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain StyleSheet
- Define and explain Flexbox
- Define and explain NativeWind
- Define and explain Density-independent Pixels
- Define and explain useWindowDimensions
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Native uses JavaScript objects for styling, not CSS. Create styles with StyleSheet.create({ container: { flex: 1, padding: 16 } }). Flexbox is the primary layout system with flexDirection: "column" as default (opposite of web). Common properties: flex, justifyContent, alignItems, padding, margin, backgroundColor. Styles are applied via style prop: style={styles.container}. Combine styles with arrays: style={[styles.base, styles.active]}. No cascading - each component needs explicit styles. Units are density-independent pixels, automatically scaled.
In this module, we will explore the fascinating world of Styling with StyleSheet. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
StyleSheet
What is StyleSheet?
Definition: API for creating optimized style objects
When experts study stylesheet, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding stylesheet helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: StyleSheet is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Flexbox
What is Flexbox?
Definition: Layout system for arranging components
The concept of flexbox has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about flexbox, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about flexbox every day.
Key Point: Flexbox is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
NativeWind
What is NativeWind?
Definition: Tailwind CSS for React Native
To fully appreciate nativewind, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of nativewind in different contexts around you.
Key Point: NativeWind is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Density-independent Pixels
What is Density-independent Pixels?
Definition: Units that scale across different screen densities
Understanding density-independent pixels helps us make sense of many processes that affect our daily lives. Experts use their knowledge of density-independent pixels to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: Density-independent Pixels is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
useWindowDimensions
What is useWindowDimensions?
Definition: Hook for responsive screen dimensions
The study of usewindowdimensions reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: useWindowDimensions is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: NativeWind and Styling Solutions
NativeWind brings Tailwind CSS to React Native: className="flex-1 p-4 bg-white". It compiles to StyleSheet at build time for optimal performance. Setup: npm install nativewind, configure babel and tailwind.config.js. Other options include: Styled Components for CSS-in-JS, Tamagui for universal design systems, and Restyle from Shopify. For responsive design, use useWindowDimensions hook or libraries like react-native-responsive-screen. Platform-specific styles: StyleSheet.create({ text: { ...Platform.select({ ios: {}, android: {} }) } }).
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? React Native's Flexbox defaults to column direction because mobile screens are naturally vertical. This catches many web developers off guard at first!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| StyleSheet | API for creating optimized style objects |
| Flexbox | Layout system for arranging components |
| NativeWind | Tailwind CSS for React Native |
| Density-independent Pixels | Units that scale across different screen densities |
| useWindowDimensions | Hook for responsive screen dimensions |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what StyleSheet means and give an example of why it is important.
In your own words, explain what Flexbox means and give an example of why it is important.
In your own words, explain what NativeWind means and give an example of why it is important.
In your own words, explain what Density-independent Pixels means and give an example of why it is important.
In your own words, explain what useWindowDimensions means and give an example of why it is important.
Summary
In this module, we explored Styling with StyleSheet. We learned about stylesheet, flexbox, nativewind, density-independent pixels, usewindowdimensions. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
4 Navigation with React Navigation
Implementing stack, tab, and drawer navigation patterns.
30m
Navigation with React Navigation
Implementing stack, tab, and drawer navigation patterns.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain Stack Navigator
- Define and explain Tab Navigator
- Define and explain Drawer Navigator
- Define and explain NavigationContainer
- Define and explain Deep Linking
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Navigation is the standard navigation library for React Native. Install core: npm install @react-navigation/native, plus dependencies for Expo or bare React Native. Navigation types: Stack for screen-to-screen (push/pop), Bottom Tabs for main sections, Drawer for side menus, and Top Tabs for swipeable sections. Create navigator: const Stack = createNativeStackNavigator(). Wrap app in NavigationContainer. Navigate with navigation.navigate("ScreenName") or useNavigation hook. Pass params: navigate("Details", { id: 123 }), read with route.params.
In this module, we will explore the fascinating world of Navigation with React Navigation. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
Stack Navigator
What is Stack Navigator?
Definition: Navigation with push/pop screen transitions
When experts study stack navigator, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding stack navigator helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: Stack Navigator is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Tab Navigator
What is Tab Navigator?
Definition: Bottom or top tabs for main sections
The concept of tab navigator has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about tab navigator, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about tab navigator every day.
Key Point: Tab Navigator is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Drawer Navigator
What is Drawer Navigator?
Definition: Side menu navigation pattern
To fully appreciate drawer navigator, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of drawer navigator in different contexts around you.
Key Point: Drawer Navigator is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
NavigationContainer
What is NavigationContainer?
Definition: Root component that manages navigation state
Understanding navigationcontainer helps us make sense of many processes that affect our daily lives. Experts use their knowledge of navigationcontainer to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: NavigationContainer is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Deep Linking
What is Deep Linking?
Definition: Opening specific screens from URLs
The study of deep linking reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: Deep Linking is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Advanced Navigation Patterns
Build complex navigation with nesting: Tab navigator inside Stack, or Stack inside each Tab screen. Type navigation with TypeScript: type RootStackParamList = { Home: undefined; Details: { id: string } }. Deep linking maps URLs to screens. Authentication flows use conditional rendering of navigators. Screen options customize headers: options={{ title: "My Screen", headerRight: () => }}. useFocusEffect runs code when screen is focused. Expo Router offers file-based routing alternative, similar to Next.js, gaining popularity for simpler mental model.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? React Navigation version 6 was a major rewrite that made the library tree-shakeable, reducing bundle size by only including navigators you actually use!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| Stack Navigator | Navigation with push/pop screen transitions |
| Tab Navigator | Bottom or top tabs for main sections |
| Drawer Navigator | Side menu navigation pattern |
| NavigationContainer | Root component that manages navigation state |
| Deep Linking | Opening specific screens from URLs |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what Stack Navigator means and give an example of why it is important.
In your own words, explain what Tab Navigator means and give an example of why it is important.
In your own words, explain what Drawer Navigator means and give an example of why it is important.
In your own words, explain what NavigationContainer means and give an example of why it is important.
In your own words, explain what Deep Linking means and give an example of why it is important.
Summary
In this module, we explored Navigation with React Navigation. We learned about stack navigator, tab navigator, drawer navigator, navigationcontainer, deep linking. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
5 Lists and Performance
Building performant lists with FlatList and FlashList.
30m
Lists and Performance
Building performant lists with FlatList and FlashList.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain FlatList
- Define and explain FlashList
- Define and explain Virtualization
- Define and explain keyExtractor
- Define and explain estimatedItemSize
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
Lists are critical for mobile performance. FlatList renders only visible items: <FlatList data={items} renderItem={({ item }) =>
In this module, we will explore the fascinating world of Lists and Performance. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
FlatList
What is FlatList?
Definition: Virtualized list component for efficient rendering
When experts study flatlist, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding flatlist helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: FlatList is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
FlashList
What is FlashList?
Definition: High-performance list from Shopify
The concept of flashlist has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about flashlist, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about flashlist every day.
Key Point: FlashList is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Virtualization
What is Virtualization?
Definition: Rendering only visible items to save memory
To fully appreciate virtualization, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of virtualization in different contexts around you.
Key Point: Virtualization is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
keyExtractor
What is keyExtractor?
Definition: Function to extract unique key for each list item
Understanding keyextractor helps us make sense of many processes that affect our daily lives. Experts use their knowledge of keyextractor to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: keyExtractor is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
estimatedItemSize
What is estimatedItemSize?
Definition: Approximate item height for FlashList optimization
The study of estimateditemsize reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: estimatedItemSize is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: List Optimization Techniques
Optimize lists for smooth scrolling: Use FlashList with accurate estimatedItemSize. Memoize list items: const MemoizedItem = React.memo(Item). Remove console.logs in production. Use getItemLayout for fixed-height items. Avoid inline functions in renderItem. Keep list items flat - avoid deep component trees. Use InteractionManager.runAfterInteractions for heavy operations. Profile with Flipper or React DevTools. For horizontal lists, add horizontal prop. SectionList handles grouped data with section headers. Mastering list performance is essential for production apps.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? FlashList was created by Shopify after they found FlatList caused performance issues in their Shop app with thousands of products. It can be up to 10x faster!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| FlatList | Virtualized list component for efficient rendering |
| FlashList | High-performance list from Shopify |
| Virtualization | Rendering only visible items to save memory |
| keyExtractor | Function to extract unique key for each list item |
| estimatedItemSize | Approximate item height for FlashList optimization |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what FlatList means and give an example of why it is important.
In your own words, explain what FlashList means and give an example of why it is important.
In your own words, explain what Virtualization means and give an example of why it is important.
In your own words, explain what keyExtractor means and give an example of why it is important.
In your own words, explain what estimatedItemSize means and give an example of why it is important.
Summary
In this module, we explored Lists and Performance. We learned about flatlist, flashlist, virtualization, keyextractor, estimateditemsize. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
6 State Management in React Native
Managing state with hooks, Context, and Zustand.
30m
State Management in React Native
Managing state with hooks, Context, and Zustand.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain Zustand
- Define and explain TanStack Query
- Define and explain MMKV
- Define and explain Persist Middleware
- Define and explain Offline-First
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
State management in React Native mirrors React patterns. useState and useReducer for local state. Context API for global state like auth and theme. For server state, TanStack Query excels: const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos }). For client state, Zustand is popular: create((set) => ({ count: 0, increment: () => set(s => ({ count: s.count + 1 })) })). MMKV provides fast key-value storage, replacing AsyncStorage. Persist state with zustand/persist middleware. Mobile apps need careful state management for offline support.
In this module, we will explore the fascinating world of State Management in React Native. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
Zustand
What is Zustand?
Definition: Lightweight state management library
When experts study zustand, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding zustand helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: Zustand is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
TanStack Query
What is TanStack Query?
Definition: Server state management with caching
The concept of tanstack query has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about tanstack query, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about tanstack query every day.
Key Point: TanStack Query is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
MMKV
What is MMKV?
Definition: Fast key-value storage for React Native
To fully appreciate mmkv, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of mmkv in different contexts around you.
Key Point: MMKV is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Persist Middleware
What is Persist Middleware?
Definition: Saving state to storage between sessions
Understanding persist middleware helps us make sense of many processes that affect our daily lives. Experts use their knowledge of persist middleware to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: Persist Middleware is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Offline-First
What is Offline-First?
Definition: Architecture prioritizing offline functionality
The study of offline-first reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: Offline-First is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Offline-First State Management
Mobile apps must handle offline scenarios. TanStack Query caches responses automatically. Persist query cache with createSyncStoragePersister and MMKV. Zustand persist stores client state: persist((set) => store, { name: "storage", storage: createJSONStorage(() => mmkvStorage) }). Check network status with @react-native-community/netinfo. Queue mutations while offline, sync when online. WatermelonDB provides reactive offline database. Consider optimistic updates for better UX. Offline-first architecture is increasingly important as users expect apps to work anywhere.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? MMKV was created by WeChat and is used by billions of users. It is 30x faster than AsyncStorage because it uses memory mapping instead of serialization!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| Zustand | Lightweight state management library |
| TanStack Query | Server state management with caching |
| MMKV | Fast key-value storage for React Native |
| Persist Middleware | Saving state to storage between sessions |
| Offline-First | Architecture prioritizing offline functionality |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what Zustand means and give an example of why it is important.
In your own words, explain what TanStack Query means and give an example of why it is important.
In your own words, explain what MMKV means and give an example of why it is important.
In your own words, explain what Persist Middleware means and give an example of why it is important.
In your own words, explain what Offline-First means and give an example of why it is important.
Summary
In this module, we explored State Management in React Native. We learned about zustand, tanstack query, mmkv, persist middleware, offline-first. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
7 Animations and Gestures
Creating smooth animations with Reanimated and handling gestures.
30m
Animations and Gestures
Creating smooth animations with Reanimated and handling gestures.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain Reanimated
- Define and explain useSharedValue
- Define and explain useAnimatedStyle
- Define and explain Gesture Handler
- Define and explain Worklet
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Native Reanimated v3 runs animations on the UI thread for 60fps performance. Install: npx expo install react-native-reanimated. Use shared values: const offset = useSharedValue(0). Apply with useAnimatedStyle: useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] })). Animate with timing: offset.value = withTiming(100). Other animations: withSpring, withDecay, withRepeat. Gesture Handler library handles touch: npm install react-native-gesture-handler. Combine gestures with animations for interactive UI like swipeable cards and pull-to-refresh.
In this module, we will explore the fascinating world of Animations and Gestures. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
Reanimated
What is Reanimated?
Definition: Library for smooth UI thread animations
When experts study reanimated, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding reanimated helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: Reanimated is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
useSharedValue
What is useSharedValue?
Definition: Hook for creating animatable values
The concept of usesharedvalue has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about usesharedvalue, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about usesharedvalue every day.
Key Point: useSharedValue is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
useAnimatedStyle
What is useAnimatedStyle?
Definition: Hook for creating animated style objects
To fully appreciate useanimatedstyle, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of useanimatedstyle in different contexts around you.
Key Point: useAnimatedStyle is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Gesture Handler
What is Gesture Handler?
Definition: Library for declarative gesture handling
Understanding gesture handler helps us make sense of many processes that affect our daily lives. Experts use their knowledge of gesture handler to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: Gesture Handler is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Worklet
What is Worklet?
Definition: JavaScript function running on UI thread
The study of worklet reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: Worklet is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Advanced Animation Patterns
Build complex animations with these patterns: Interpolation maps values: interpolate(scrollY.value, [0, 100], [1, 0.5]). Layout animations animate mounting: entering={FadeIn} exiting={FadeOut}. Gesture-driven animations: const gesture = Gesture.Pan().onUpdate(e => { offset.value = e.translationX; }). runOnJS calls JS functions from UI thread. Worklets are JS functions running on UI thread. Lottie renders After Effects animations. Skeleton loading with shimmer effects. Shared element transitions between screens. Master these for delightful mobile experiences.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? Reanimated was created by Software Mansion, a Polish company that also maintains React Navigation and Gesture Handler - the holy trinity of React Native libraries!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| Reanimated | Library for smooth UI thread animations |
| useSharedValue | Hook for creating animatable values |
| useAnimatedStyle | Hook for creating animated style objects |
| Gesture Handler | Library for declarative gesture handling |
| Worklet | JavaScript function running on UI thread |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what Reanimated means and give an example of why it is important.
In your own words, explain what useSharedValue means and give an example of why it is important.
In your own words, explain what useAnimatedStyle means and give an example of why it is important.
In your own words, explain what Gesture Handler means and give an example of why it is important.
In your own words, explain what Worklet means and give an example of why it is important.
Summary
In this module, we explored Animations and Gestures. We learned about reanimated, usesharedvalue, useanimatedstyle, gesture handler, worklet. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
8 Native Modules and Device APIs
Accessing device features like camera, location, and notifications.
30m
Native Modules and Device APIs
Accessing device features like camera, location, and notifications.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain Native Module
- Define and explain expo-camera
- Define and explain expo-location
- Define and explain expo-notifications
- Define and explain TurboModules
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Native accesses device features through native modules. Expo provides many: expo-camera for camera, expo-location for GPS, expo-notifications for push notifications. Request permissions: const { status } = await Camera.requestCameraPermissionsAsync(). Access contacts with expo-contacts, file system with expo-file-system, and sensors with expo-sensors. For features Expo does not cover, use community packages or write custom native modules. Development builds in Expo allow adding any native code while keeping the Expo workflow.
In this module, we will explore the fascinating world of Native Modules and Device APIs. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
Native Module
What is Native Module?
Definition: Bridge between JavaScript and platform APIs
When experts study native module, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding native module helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: Native Module is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
expo-camera
What is expo-camera?
Definition: Expo module for camera access
The concept of expo-camera has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about expo-camera, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about expo-camera every day.
Key Point: expo-camera is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
expo-location
What is expo-location?
Definition: Expo module for GPS and geolocation
To fully appreciate expo-location, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of expo-location in different contexts around you.
Key Point: expo-location is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
expo-notifications
What is expo-notifications?
Definition: Expo module for push notifications
Understanding expo-notifications helps us make sense of many processes that affect our daily lives. Experts use their knowledge of expo-notifications to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: expo-notifications is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
TurboModules
What is TurboModules?
Definition: New architecture for faster native communication
The study of turbomodules reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: TurboModules is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Creating Custom Native Modules
When existing modules are not enough, create your own. Expo Modules API simplifies this with TypeScript: npx create-expo-module. Define module in TypeScript, implement native code in Swift/Kotlin. TurboModules (new architecture) provide synchronous calls and better performance. Native modules bridge JavaScript to platform APIs. Config plugins let you modify native project settings without ejecting. Examples: integrating payment SDKs, accessing hardware not covered by existing modules. The Expo module ecosystem covers most needs, but custom modules give full platform access.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? The new architecture TurboModules can call native code synchronously, which was impossible with the old bridge. This enables features like synchronous storage access!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| Native Module | Bridge between JavaScript and platform APIs |
| expo-camera | Expo module for camera access |
| expo-location | Expo module for GPS and geolocation |
| expo-notifications | Expo module for push notifications |
| TurboModules | New architecture for faster native communication |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what Native Module means and give an example of why it is important.
In your own words, explain what expo-camera means and give an example of why it is important.
In your own words, explain what expo-location means and give an example of why it is important.
In your own words, explain what expo-notifications means and give an example of why it is important.
In your own words, explain what TurboModules means and give an example of why it is important.
Summary
In this module, we explored Native Modules and Device APIs. We learned about native module, expo-camera, expo-location, expo-notifications, turbomodules. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
9 Networking and API Integration
Fetching data, handling authentication, and real-time connections.
30m
Networking and API Integration
Fetching data, handling authentication, and real-time connections.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain SecureStore
- Define and explain Token Refresh
- Define and explain WebSocket
- Define and explain NetInfo
- Define and explain OAuth
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
React Native supports fetch API and axios for HTTP requests. Configure base URL: axios.create({ baseURL: "https://api.example.com" }). Use TanStack Query for data fetching with caching. Authentication patterns: JWT tokens stored in SecureStore, refresh token rotation. Real-time: WebSockets with socket.io-client, or services like Firebase, Supabase, Pusher. Handle network errors gracefully. Check connectivity with @react-native-community/netinfo. Mobile networks are unreliable - implement retry logic and offline queuing.
In this module, we will explore the fascinating world of Networking and API Integration. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
SecureStore
What is SecureStore?
Definition: Encrypted storage for sensitive data
When experts study securestore, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding securestore helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: SecureStore is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Token Refresh
What is Token Refresh?
Definition: Obtaining new access token before expiration
The concept of token refresh has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about token refresh, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about token refresh every day.
Key Point: Token Refresh is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
WebSocket
What is WebSocket?
Definition: Protocol for real-time bidirectional communication
To fully appreciate websocket, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of websocket in different contexts around you.
Key Point: WebSocket is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
NetInfo
What is NetInfo?
Definition: Library for checking network connectivity status
Understanding netinfo helps us make sense of many processes that affect our daily lives. Experts use their knowledge of netinfo to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: NetInfo is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
OAuth
What is OAuth?
Definition: Standard for third-party authentication
The study of oauth reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: OAuth is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Secure Authentication Patterns
Implement secure authentication: Store tokens in expo-secure-store, not AsyncStorage. Implement token refresh: axios interceptor checks expiration, refreshes before requests. Biometric authentication with expo-local-authentication. OAuth flows with expo-auth-session for social login. Never store sensitive data in plain storage. Use HTTPS exclusively. Implement certificate pinning for high-security apps. Handle session expiration gracefully. Consider auth services: Supabase Auth, Firebase Auth, Auth0, Clerk. Security is critical - users trust apps with sensitive data.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? SecureStore uses Keychain on iOS and EncryptedSharedPreferences on Android. These are the same secure storage mechanisms used by banking apps!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| SecureStore | Encrypted storage for sensitive data |
| Token Refresh | Obtaining new access token before expiration |
| WebSocket | Protocol for real-time bidirectional communication |
| NetInfo | Library for checking network connectivity status |
| OAuth | Standard for third-party authentication |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what SecureStore means and give an example of why it is important.
In your own words, explain what Token Refresh means and give an example of why it is important.
In your own words, explain what WebSocket means and give an example of why it is important.
In your own words, explain what NetInfo means and give an example of why it is important.
In your own words, explain what OAuth means and give an example of why it is important.
Summary
In this module, we explored Networking and API Integration. We learned about securestore, token refresh, websocket, netinfo, oauth. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
10 Testing React Native Apps
Unit testing, component testing, and end-to-end testing strategies.
30m
Testing React Native Apps
Unit testing, component testing, and end-to-end testing strategies.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain Jest
- Define and explain React Native Testing Library
- Define and explain Detox
- Define and explain Maestro
- Define and explain MSW
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
Testing ensures app quality across platforms. Jest is the default test runner. React Native Testing Library tests components: render(
In this module, we will explore the fascinating world of Testing React Native Apps. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
Jest
What is Jest?
Definition: JavaScript testing framework
When experts study jest, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding jest helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: Jest is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
React Native Testing Library
What is React Native Testing Library?
Definition: Component testing utilities
The concept of react native testing library has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about react native testing library, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about react native testing library every day.
Key Point: React Native Testing Library is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Detox
What is Detox?
Definition: E2E testing framework for React Native
To fully appreciate detox, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of detox in different contexts around you.
Key Point: Detox is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Maestro
What is Maestro?
Definition: Simple YAML-based E2E testing tool
Understanding maestro helps us make sense of many processes that affect our daily lives. Experts use their knowledge of maestro to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: Maestro is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
MSW
What is MSW?
Definition: Mock Service Worker for API mocking
The study of msw reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: MSW is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: E2E Testing with Maestro
Maestro simplifies E2E testing with YAML flows. Install CLI, create flows/login.yaml: appId: com.myapp, then commands like tapOn "Email", inputText "test@example.com", tapOn "Login", assertVisible "Welcome". Run: maestro test flows/. Record flows: maestro record. Maestro Cloud runs tests in CI. Compared to Detox, Maestro requires less setup and no native build configuration. Great for smoke tests and critical paths. Combine with component tests for comprehensive coverage. E2E tests catch integration issues unit tests miss.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? Detox was created by Wix for testing their own complex React Native apps. Maestro was created by Mobile.dev and gained popularity for its simplicity compared to Detox!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| Jest | JavaScript testing framework |
| React Native Testing Library | Component testing utilities |
| Detox | E2E testing framework for React Native |
| Maestro | Simple YAML-based E2E testing tool |
| MSW | Mock Service Worker for API mocking |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what Jest means and give an example of why it is important.
In your own words, explain what React Native Testing Library means and give an example of why it is important.
In your own words, explain what Detox means and give an example of why it is important.
In your own words, explain what Maestro means and give an example of why it is important.
In your own words, explain what MSW means and give an example of why it is important.
Summary
In this module, we explored Testing React Native Apps. We learned about jest, react native testing library, detox, maestro, msw. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
11 Building and Deployment
Building apps for iOS and Android, and deploying to app stores.
30m
Building and Deployment
Building apps for iOS and Android, and deploying to app stores.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain EAS Build
- Define and explain EAS Submit
- Define and explain Code Signing
- Define and explain OTA Updates
- Define and explain EAS Update
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
Expo Application Services (EAS) simplifies building and deployment. Configure eas.json with build profiles. Build: eas build --platform ios (or android). EAS Build compiles native code in the cloud - no Mac required for iOS. Submit to stores: eas submit. For bare React Native, use Xcode for iOS and Android Studio. Code signing: iOS needs certificates and provisioning profiles, Android needs keystores. App Store requires app review, typically 24-48 hours. Play Store review is faster. Plan for rejected builds and have fallback strategies.
In this module, we will explore the fascinating world of Building and Deployment. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
EAS Build
What is EAS Build?
Definition: Cloud build service for Expo apps
When experts study eas build, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding eas build helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: EAS Build is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
EAS Submit
What is EAS Submit?
Definition: Automated app store submission
The concept of eas submit has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about eas submit, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about eas submit every day.
Key Point: EAS Submit is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Code Signing
What is Code Signing?
Definition: Cryptographic verification of app authenticity
To fully appreciate code signing, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of code signing in different contexts around you.
Key Point: Code Signing is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
OTA Updates
What is OTA Updates?
Definition: Pushing updates without store review
Understanding ota updates helps us make sense of many processes that affect our daily lives. Experts use their knowledge of ota updates to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: OTA Updates is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
EAS Update
What is EAS Update?
Definition: Expo service for OTA JavaScript updates
The study of eas update reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: EAS Update is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Over-The-Air Updates
OTA updates push JavaScript changes without app store review. EAS Update: eas update --branch production. Updates deploy instantly to users. Channel system: development, staging, production branches. Rollback bad updates immediately. OTA cannot change native code - only JavaScript bundle and assets. Use for bug fixes, UI changes, and feature toggles. Combine with feature flags for gradual rollouts. CodePush from Microsoft is an alternative. OTA is powerful but use responsibly - users trust stable apps. Major changes should still go through store review.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? Apple introduced App Store review in 2008 and it was revolutionary - before that, malware was rampant on mobile platforms. OTA updates must comply with store guidelines!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| EAS Build | Cloud build service for Expo apps |
| EAS Submit | Automated app store submission |
| Code Signing | Cryptographic verification of app authenticity |
| OTA Updates | Pushing updates without store review |
| EAS Update | Expo service for OTA JavaScript updates |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what EAS Build means and give an example of why it is important.
In your own words, explain what EAS Submit means and give an example of why it is important.
In your own words, explain what Code Signing means and give an example of why it is important.
In your own words, explain what OTA Updates means and give an example of why it is important.
In your own words, explain what EAS Update means and give an example of why it is important.
Summary
In this module, we explored Building and Deployment. We learned about eas build, eas submit, code signing, ota updates, eas update. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
12 Production Best Practices
Performance optimization, monitoring, and production-ready patterns.
30m
Production Best Practices
Performance optimization, monitoring, and production-ready patterns.
Learning Objectives
By the end of this module, you will be able to:
- Define and explain Hermes
- Define and explain Sentry
- Define and explain Flipper
- Define and explain ProGuard
- Define and explain Source Maps
- Apply these concepts to real-world examples and scenarios
- Analyze and compare the key concepts presented in this module
Introduction
Production React Native apps need careful optimization. Enable Hermes engine for faster startup and lower memory. Remove console.log statements in production. Monitor with Sentry for crash reporting: npm install @sentry/react-native. Track analytics with PostHog, Amplitude, or Firebase Analytics. Profile with Flipper or React DevTools. Reduce bundle size by removing unused dependencies. Use ProGuard/R8 on Android and Bitcode on iOS. App size affects downloads - keep APK/IPA small. Regular performance auditing ensures smooth user experience.
In this module, we will explore the fascinating world of Production Best Practices. You will discover key concepts that form the foundation of this subject. Each concept builds on the previous one, so pay close attention and take notes as you go. By the end, you'll have a solid understanding of this important topic.
This topic is essential for understanding how the subject works and how experts organize their knowledge. Let's dive in and discover what makes this subject so important!
Hermes
What is Hermes?
Definition: JavaScript engine optimized for React Native
When experts study hermes, they discover fascinating details about how systems work. This concept connects to many aspects of the subject that researchers investigate every day. Understanding hermes helps us see the bigger picture. Think about everyday examples to deepen your understanding — you might be surprised how often you encounter this concept in the world around you.
Key Point: Hermes is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Sentry
What is Sentry?
Definition: Error tracking and performance monitoring service
The concept of sentry has been studied for many decades, leading to groundbreaking discoveries. Research in this area continues to advance our understanding at every scale. By learning about sentry, you are building a strong foundation that will support your studies in more advanced topics. Experts around the world work to uncover new insights about sentry every day.
Key Point: Sentry is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Flipper
What is Flipper?
Definition: Desktop debugging tool for mobile apps
To fully appreciate flipper, it helps to consider how it works in real-world applications. This universal nature is what makes it such a fundamental concept in this field. As you learn more, try to identify examples of flipper in different contexts around you.
Key Point: Flipper is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
ProGuard
What is ProGuard?
Definition: Android code shrinking and obfuscation tool
Understanding proguard helps us make sense of many processes that affect our daily lives. Experts use their knowledge of proguard to solve problems, develop new solutions, and improve outcomes. This concept has practical applications that go far beyond the classroom.
Key Point: ProGuard is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
Source Maps
What is Source Maps?
Definition: Files mapping minified code to original source
The study of source maps reveals the elegant complexity of how things work. Each new discovery opens doors to understanding other aspects and how knowledge in this field has evolved over time. As you explore this concept, try to connect it with what you already know — you'll find that everything is interconnected in beautiful and surprising ways.
Key Point: Source Maps is a fundamental concept that you will encounter throughout your studies. Make sure you can explain it in your own words!
🔬 Deep Dive: Crash Reporting and Monitoring
Comprehensive monitoring is essential. Sentry captures crashes with stack traces, breadcrumbs, and device info. Set up source maps for readable stack traces. Track custom events and user context. Bugsnag and Crashlytics are alternatives. Performance monitoring: track screen load times, API latency, frame drops. User feedback integration for bug reports. Alerting on error rate spikes. Dashboard for key metrics. Combine with analytics for full picture. Proactive monitoring catches issues before users report them. Fast response to crashes maintains user trust.
This is an advanced topic that goes beyond the core material, but understanding it will give you a deeper appreciation of the subject. Researchers continue to study this area, and new discoveries are being made all the time.
Did You Know? Hermes was created by Facebook specifically for React Native. It compiles JavaScript to bytecode ahead of time, reducing startup time by up to 50% on Android!
Key Concepts at a Glance
| Concept | Definition |
|---|---|
| Hermes | JavaScript engine optimized for React Native |
| Sentry | Error tracking and performance monitoring service |
| Flipper | Desktop debugging tool for mobile apps |
| ProGuard | Android code shrinking and obfuscation tool |
| Source Maps | Files mapping minified code to original source |
Comprehension Questions
Test your understanding by answering these questions:
In your own words, explain what Hermes means and give an example of why it is important.
In your own words, explain what Sentry means and give an example of why it is important.
In your own words, explain what Flipper means and give an example of why it is important.
In your own words, explain what ProGuard means and give an example of why it is important.
In your own words, explain what Source Maps means and give an example of why it is important.
Summary
In this module, we explored Production Best Practices. We learned about hermes, sentry, flipper, proguard, source maps. Each of these concepts plays a crucial role in understanding the broader topic. Remember that these ideas are building blocks — each module connects to the next, helping you build a complete picture. Keep reviewing these concepts and you'll be well prepared for what comes next!
Ready to master React Native Development?
Get personalized AI tutoring with flashcards, quizzes, and interactive exercises in the Eludo app