React Native
Lộ trình phát triển toàn diện React Native theo tiêu chuẩn quốc tế nilbuild/developer-roadmap
Hướng dẫn từng bước từ nền tảng đến chuyên sâu giúp bạn làm chủ React Native. Tích hợp tài liệu lý thuyết, bài viết thực chiến, video tham khảo và bài tập lập trình trực tiếp trên IDE.
Nền Tảng & Khái Niệm Cốt Lõi
Giai đoạn 1 tập trung hoàn thiện 19 chủ đề then chốt.
Accessibility
Accessibility (often abbreviated as a11y) in React Native is a crucial aspect of application development that ensures your applications are usable by everyone, including individuals with disabilities. This commitment to inclusivity is not just a legal requirement in many jurisdictions but also a moral imperative that enhances the user experience for all. React Native provides a comprehensive set of accessibility features, attributes, and APIs that allow developers to create applications that cater to diverse user needs. By implementing these features, developers can ensure that their applications are navigable and usable by individuals with visual, auditory, motor, or cognitive impairments.
Activity Indicator
The `ActivityIndicator` is a core component in React Native that provides a simple visual indication of some ongoing activity or loading state within your application. It shows a spinning animation, which gives the user feedback that something is happening in the background. This component is particularly useful when fetching data from an external source, like a server, or while performing time-consuming operations.
Animations
Animations in React Native allow developers to create smooth, fluid, and dynamic user interfaces by changing the properties of components over time. The framework provides the Animated API to handle simple, high-performance transitions, as well as the LayoutAnimation API for animating global layout changes. These tools enable the transformation of elements through movements, scaling, opacity changes, and rotations to provide visual feedback and enhance the overall user experience within a mobile application.
Appium
Appium is an open-source test automation framework for mobile devices, targeting native, hybrid, or mobile-web apps for iOS, Android, and Windows platforms. Appium works with multiple programming languages, including JavaScript, Ruby, Python, Java, and C#. Appium uses the WebDriver protocol, which allows you to write tests that can interact with your app through a series of commands. The WebDriver protocol interprets these commands into actions that are then performed on the app.
Publishing Apps in App Store
The App Store is Apple's official platform for distributing iOS apps to users with iPhones, iPads, and iPod Touch devices. To publish an app on the App Store, you need to follow specific guidelines and use the necessary tools provided by Apple.
Authentication
Authentication is the process of verifying the identity of a user before granting them access to specific features or data within a mobile application. In React Native, this typically involves managing secure user sessions through methods like OAuth, JWT (JSON Web Tokens), or biometric authentication. Developers integrate these systems to ensure that sensitive user information remains protected and that only authorized individuals can interact with private parts of the application.
Button
A `Button` is a built-in React Native component used to create clickable buttons. It is a simple, customizable and easy-to-use component that captures touches and triggers an `onPress` event when pressed.
Common Problem Sources in React Native Performance
Performance issues in React Native often stem from an overloaded JavaScript thread, which handles business logic, API calls, and state management. When this thread becomes blocked by heavy computations or excessive re-renders, the user interface feels unresponsive or choppy. Other frequent causes include inefficient list rendering, large image assets that consume excessive memory, and unnecessary communication overhead between the JavaScript bridge and the native modules. Identifying these bottlenecks involves analyzing how components update their state and ensuring that resource-intensive tasks are offloaded to native code or handled asynchronously.
Components
React components are the building blocks of the user interface (UI) in a React application. They are used to break down the UI into reusable, isolated, and manageable pieces. Components handle rendering the UI and managing the logic and behavior.
Connectivity Status
Connectivity refers to the mechanisms that allow data transfer between your React Native app and external resources through various means of communication. It is essential to ensure efficient communication with APIs, servers, and external systems, to update your app's data, fetching content or enabling real-time interactions. The community NetInfo package reports the device's connection type and whether the internet is reachable, and lets you subscribe to changes so the app can react when the user goes offline.
Core Components
Core Components are the fundamental building blocks provided by React Native that map directly to native platform UI elements. Instead of using standard web elements like `<div>` or `<span>`, React Native uses components such as `<View>` for layout, `<Text>` for displaying strings, and `<Image>` for rendering pictures. These components translate to their respective native counterparts on iOS and Android, allowing developers to create authentic mobile experiences using JavaScript and React.
Create Expo App
`create-expo-app` is a command line tool that generates a React Native project that works out of the box with Expo. It is the easiest way to get started building a new React Native application.
CSS Basics
CSS is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. It is primarily used for styling web pages and user interfaces written in HTML and XHTML. React native uses CSS to style its components. You can learn some CSS basics to get started with React Native and learn more as you go.
Deep Linking
Deep linking in React Native allows your app to open and navigate to a specific screen or content when a user clicks on a URL or a custom URI scheme. It essentially creates a direct pathway into a particular section of your application, bypassing the typical app launch sequence and providing a more seamless user experience. This is useful for scenarios like opening a product page from a marketing email or directing users to a specific profile from a shared link.
Detox
Detox is an end-to-end testing framework for React Native applications. It enables you to run tests on an actual device or in a simulator/emulator environment. The goal of Detox is to maintain a high level of confidence in your application's behavior while allowing for quick test runs and easy debugging.
Development Workflow
The development workflow in React Native involves a continuous cycle of writing code, testing components, and refining the user interface across both iOS and Android platforms. Developers typically utilize tools like Metro Bundler to compile JavaScript code in real-time, allowing for immediate feedback through features like Fast Refresh. This process integrates version control systems, debugging
DevTools
React Native DevTools is the modern, built-in debugging experience for React Native. It is designed for debugging React app concerns, such as inspecting components, stepping through JavaScript, and profiling, while the native layers are still debugged with the tools in Android Studio and Xcode.
Enabling Fast Refresh
Fast Refresh is a React Native feature that allows you to get near-instant feedback while making changes in your code. It achieves this by reloading only the portion of the app that was changed, without losing the current state. This makes the development process a lot smoother as you don't have to wait for the entire app to rebuild after making a change.
Environment Setup
Environment setup involves configuring your local machine with the necessary tools, software, and dependencies required to build, run, and test mobile applications. This process typically includes installing Node.js, the React Native CLI or Expo CLI, and the specific software development kits for platforms like Android and iOS, such as Android Studio or Xcode. Properly configuring these tools ensures that your development environment can communicate effectively with emulators, simulators, or physical devices during the coding process.
Kỹ Năng Trọng Tâm & Thực Hành
Giai đoạn 2 tập trung hoàn thiện 19 chủ đề then chốt.
Expo File System
Expo File System is a universal module that provides access to the file system on the device. Using this module, you can perform various file operations like reading, writing, copying, moving, and deleting files and folders. It also supports reading file metadata and querying file URI.
expo-secure-store
Expo Secure Store is a built-in package provided by the Expo SDK to store encrypted data securely on users' devices. It is a key-value storage system, but it is not designed to store larger amounts of data such as app databases or complex data structures. It is most appropriate for storing secret keys, access tokens, and small user preferences.
Expo Snack
Expo Snack is an online playground and development environment for creating and testing React Native projects. With Snack, you can easily edit and preview your code changes directly in your browser or on a mobile device using the Expo Go app. It offers a fast, easy, and convenient way to develop, test, and share your projects without needing to set up a local development environment.
expo-sqlite
expo-sqlite is a module that provides an interface for a local SQLite database in React Native applications. It allows developers to store, query, and manage structured data directly on a device using standard SQL commands. This library is designed to work seamlessly within the Expo ecosystem, providing a reliable way to persist data offline without needing to configure complex native database drivers.
Expo Tradeoffs
Expo is a managed framework that simplifies React Native development by providing a set of pre-built tools, libraries, and services. While it offers a faster development cycle and easier configuration, it comes with specific limitations regarding native code control. Developers using Expo cannot easily add custom native modules that require direct modification of the Android or iOS project files without using the "eject" process or development builds. Furthermore, the reliance on the Expo SDK means that project updates must align with their release schedule, which can occasionally lead to dependency conflicts when using highly specific third-party native libraries.
Expo
Expo is a framework and platform for React Native that simplifies the development process by providing a set of tools and services that abstract away complex native code configurations. It allows developers to build, test, and deploy applications across iOS, Android, and the web using a unified codebase. By managing the underlying build environment, Expo enables users to focus on writing JavaScript or TypeScript code without needing to constantly interact with Xcode or Android Studio.
Fetch
_Fetch_ is a JavaScript function available in React Native that is used to make network requests, similar to XMLHttpRequest in web applications. It allows you to handle requests and retrieve data from APIs or other sources. The Fetch API is built on Promises, making it simple to handle success and error cases.
File Extensions
File extensions like `.ios.js` and `.android.js` allow React Native to automatically select the correct implementation based on the platform where the application is running. When you import a module with these specific extensions, the packager detects the operating system and loads the file that matches the target platform. This mechanism enables developers to maintain separate logic or UI components for iOS and Android within the same codebase while keeping imports clean and simple.
FlatList
`FlatList` is a `React Native` core component that displays a scrolling list of changing, but similarly structured, data. It is an efficient list component that makes use of a limited scrolling `renderWindow`, reducing the memory footprint and creating smooth scrolling. Additionally, `FlatList` supports-Headers, Footers, Pull-to-refresh, and Horizontal scrolling, among other things.
For Android
Native modules in React Native provide a powerful way to access device-specific features and capabilities that are not available through the standard React Native APIs. For example, a Bluetooth module can be created using the Android Bluetooth API, allowing applications to scan for nearby Bluetooth devices, connect to them, and transfer data.
For iOS
iOS native modules in React Native allow developers to tap into the rich ecosystem of iOS features and functionalities that are not directly accessible through the standard React Native APIs. For instance, a Camera module can be implemented using the AVFoundation framework, enabling developers to capture photos and videos directly from their applications.
Gesture Responder System
Gesture handling is an essential and powerful feature in React Native that helps create interactive and responsive user interfaces. React Native provides several built-in components and libraries to recognize and respond to different types of user gestures. Some of the common gestures include tapping, swiping, dragging, and pinching.
Google Play Store
Google Play Store is a digital distribution platform that allows developers to publish and release their React Native applications to Android users worldwide. To distribute an app, developers must create a Google Play Console account, sign their application with a secure keystore file, and generate an Android App Bundle (AAB). Once the bundle is uploaded, the app undergoes a review process by Google to ensure it meets safety and quality standards before it becomes available for download on the store.
Image
The `Image` component is used to display images in a React Native application. It allows you to load and display local as well as remote images, providing essential props and methods for better image handling and customization.
ImageBackground
`ImageBackground` is a React Native core component that allows you to display an image as a background while still being able to place content inside the component. This helps in creating beautiful layouts with images and text or other content on top.
In-App Developer Menu
The In-App Developer Menu is a built-in interface in React Native that provides essential tools for debugging and development. By triggering this menu through a specific gesture or keyboard shortcut, you can access features such as refreshing the application, enabling fast refresh, inspecting elements, and toggling performance monitors. It serves as a central control panel that allows you to manage your app's state and development settings directly on the device or simulator while you write your code.
Interactions
Interaction in React Native means dealing with how the user can interact with your application. This typically involves handling touch events, gestures, and animations to provide a more engaging and dynamic user experience. There are several built-in components and libraries available in React Native to help you build interactive elements in your app.
Introduction
React Native is an open-source framework developed by Facebook that allows developers to build mobile applications using JavaScript (or TypeScript) and React. It enables building apps for both iOS and Android platforms by offering a shared codebase, which significantly reduces development time and effort.
JavaScript Basics
JavaScript is a versatile programming language that serves as the foundation for building interactive and dynamic applications. It enables developers to manipulate content, control multimedia, animate elements, and handle complex logic within a codebase. In the React Native environment, a solid understanding of JavaScript syntax, functions, objects, and asynchronous operations is essential for creating mobile components and managing application data flow.
Kiến Trúc Nâng Cao & Tối Ưu
Giai đoạn 3 tập trung hoàn thiện 19 chủ đề then chốt.
Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
JSX
JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript code. It was developed to be used with React and has become an integral part of working with React.
KeyboardAvoidingView
`KeyboardAvoidingView` is a built-in React Native component that automatically adjusts its children components' position when the keyboard opens, preventing them from being obscured by the on-screen keyboard. It's a useful component, particularly for forms and input fields where the user needs to see the text they're typing.
Layouts & Flexbox
Layouts and Flexbox in React Native provide a system for arranging elements on the screen. It is based on the CSS Flexbox algorithm, which allows you to define how components are positioned, spaced, and sized within a container. By using properties like `flexDirection`, `justifyContent`, and `alignItems`, you can create responsive designs that adapt to different screen sizes and orientations.
Learn the Pre-requisites
Before you start learning React Native, you should have a basic knowledge of JavaScript and React. You don't need to fully master these topics, but you should be familiar with them. Learn the basics of JavaScript (e.g. topics marked for beginners in JavaScript Roadmap and continue with React Native.
Listings
Listings in React Native — primarily `FlatList` and `SectionList` — are the core components for rendering scrollable lists. They are optimized for large data sets with lazy row rendering, pull-to-refresh, header and footer support, and per-row memoization for better performance.
ListViews
`ListView` was the original list component in React Native, now superseded by the more efficient `FlatList` and `SectionList`. These components render data in a performant, scrollable way by only mounting rows near the viewport, and support features like separators, empty states, and pull-to-refresh.
LogBox
LogBox is React Native's in-app display for logs, warnings, and errors during development. It groups and formats them, with stack traces for errors, so problems are easier to spot and address in your code.
Metro Bundler
Metro Bundler is the default bundler for React Native applications. It's a JavaScript module bundler that takes all your application code and dependencies, and bundles them together into a single JavaScript file or multiple files (based on platform).
Modal
A `Modal` is a component that displays content on top of the current view, creating an overlay that can be used for various purposes, such as displaying additional information, confirmation messages, or a selection menu.
Networking in React Native
Networking in React Native allows applications to communicate with remote servers to fetch or send data using standard web protocols. Developers typically utilize the built-in Fetch API to perform HTTP requests, which handles asynchronous data retrieval in a way that is consistent with modern web standards. For more complex requirements, such as managing cookies, handling authentication headers, or tracking upload progress, libraries like Axios are commonly integrated into projects to simplify request configuration and response handling.
Networking Security in React Native
Networking security in React Native involves protecting the data transmitted between your application and a backend server to prevent unauthorized access or interception. This is primarily achieved through the use of HTTPS (SSL/TLS) to encrypt communication, alongside best practices like implementing certificate pinning to verify the server's identity and validating all incoming data from API responses. Developers also use techniques such as secure token management and request authentication to ensure that only authorized users can exchange sensitive information with the application.
Optimizing Flatlist Config
Optimizing Flatlist configuration involves fine-tuning the properties of the Flatlist component to improve scrolling performance and memory usage in large data lists. By leveraging props such as `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, and `removeClippedSubviews`, developers can control how many items are rendered at once and how off-screen elements are handled. Adjusting these settings reduces the workload on the JavaScript bridge and helps maintain a smooth frame rate during complex list interactions.
Other Storage Options
Beyond basic local storage solutions, React Native applications often require more specialized ways to manage data. These options include libraries like SQLite for relational database management, Realm for high-performance object-oriented storage, or WatermelonDB for reactive data synchronization. These tools are typically used when an application needs to handle complex data structures, perform advanced queries, or maintain large datasets locally on the device.
Performance
Performance is a crucial aspect of any application, and React Native is no exception. Optimizing performance in your React Native apps will not only lead to a better user experience but also lessen the load on device resources.
Permissions
Permissions in React Native are how your app requests access to sensitive user data or device features, like the camera, microphone, or location. When your app needs to use one of these features, it must first ask the user for permission. This is done through native modules that interact with the underlying operating system (iOS or Android) to display a permission request dialog. The user can then grant or deny the request, and your app needs to handle both scenarios gracefully.
Platform Module
The Platform module in React Native provides a simple way to detect the operating system on which your application is currently running. It exposes a constant that allows you to branch your code logic based on whether the app is executing on iOS, Android, or other supported platforms. Developers use this module to apply platform-specific styles, components, or behaviors to ensure the user interface behaves appropriately for each environment.
Pressable
Pressable is a core component in React Native that makes any view respond properly to touch or press events. It provides a wide range of event handlers for managing user interactions, such as onPress, onPressIn, onPressOut, and onLongPress. With Pressable, you can create custom buttons, cards, or any touchable elements within your app.
Profiling
Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu. For iOS, Instruments is an invaluable tool, and on Android you should learn to use `systrace`.
Hệ Sinh Thái & Triển Khai Thực Tế
Giai đoạn 4 tập trung hoàn thiện 19 chủ đề then chốt.
Props
In React, **props** are short for _properties_ and are used to pass data from a parent component to a child component. They are similar to function arguments, and they help make components reusable and maintainable.
Publishing Apps
Publishing React Native apps is the process of deploying your application on various app stores so that users can download and use your app. The two most popular app stores for publishing are the Apple App Store (iOS) and the Google Play Store (Android).
Push Notifications
Push notifications in React Native allow you to send timely and relevant information to users even when they aren't actively using your app. The original native push notification functionality in React Native has been deprecated. Now, you'll typically rely on third-party services like Firebase Cloud Messaging (FCM), Expo Notifications, or OneSignal to handle the complexities of delivering notifications across different platforms (iOS and Android). These services provide robust APIs and infrastructure for managing device tokens, sending notifications, and tracking delivery success.
RAM Bundles + Inline Requires
Inline requires defer loading a module until it is first used instead of at startup, which trims the time to interactive for apps with many screens or rarely used features. Random Access Module (RAM) bundles are an older format that served the same purpose by loading modules on demand, but they are not supported with Hermes, whose bytecode gives the same or better startup performance. On current React Native versions, prefer Hermes, lazy-loading screen-level components, and inline requires, which the React Native CLI applies automatically.
React Native Alternatives
React Native is a popular choice for cross-platform application development, but there are other options available. Some of the common alternatives to React Native are Flutter, Ionic and Xamarin. Flutter being the most popular alternative to React Native.
React Native Async Storage
Async Storage is an unencrypted, asynchronous, persistent key-value storage system for React Native. It was removed from React Native core and now lives in the community package `@react-native-async-storage/async-storage`. It is primarily used for persisting small amounts of data offline, such as user preferences or session data.
React Native CLI
The React Native Community CLI (`@react-native-community/cli`) is the command-line tool for creating and running React Native apps without a framework such as Expo. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
React Native Testing Library
React Native Testing Library (RNTL) is a collection of tools and utilities to test React Native components. It is built on top of the Testing Library ecosystem, designed to work seamlessly with Jest and other testing frameworks. Its primary goal is to enable efficient and effective testing by providing simple and intuitive APIs that promote best practices, like testing UI components in isolation and promoting accessibility checks.
React Native for Web
React Native for Web is a library that allows developers to run React Native components and APIs on the web using React DOM. It maps React Native components, such as Views and Text, to their equivalent HTML elements, enabling the reuse of a single codebase across mobile and browser platforms. This integration ensures that styles and interactions defined in React Native are translated effectively into standard web technologies.
React Test Renderer
React Test Renderer is a library provided by the React team that allows you to render React components as JavaScript objects without depending on the DOM or a native mobile environment. The package is now deprecated, and the React team recommends migrating tests to React Native Testing Library instead.
Refresh Control
`RefreshControl` is a component in React Native that is used to provide pull-to-refresh functionality for scrollable components like `ScrollView`, `ListView`, and `FlatList`.
Running on Device
Running your React Native application on a physical device allows you to test your code in a real-world environment, providing a more accurate representation of performance, touch interactions, and hardware integration compared to an emulator or simulator. To achieve this, you connect your mobile device to your development machine via USB or a local Wi-Fi network and use tools like Metro Bundler to transmit the application bundle directly to the device. This process enables developers to utilize features like Fast Refresh to see code changes instantly on their phone screen, ensuring that the user experience remains consistent across different hardware configurations.
SafeAreaView
SafeAreaView is a component designed to render content within the safe area boundaries of a device screen. It automatically applies padding to ensure that your UI elements, such as text or buttons, are not obscured by system notches, home indicators, or rounded corners found on modern smartphones. By wrapping your content in this component, you maintain a clean layout that remains visible and accessible across different device models.
Screen Navigation
In React Native, navigating from one screen to another is a crucial aspect of app development. The most commonly used navigation libraries are React Navigation and React Native Navigation.
Scrolling and Swiping
In React Native, scrolling and swiping interactions can be defined and customized with a set of built-in components. These components are efficient and provide fluid navigation through the elements inside them.
Scroll View
In React Native, the `ScrollView` is a generic scrolling container used to provide a scrollable view to its child components. It is useful when you need to display scrollable content larger than the screen, such as lists, images, or text. A `ScrollView` must have a bounded height in order to properly work.
SectionList
`SectionList` is a component used to render sections and headers in a scroll view. It helps to manage and optimize a large list of items divided into categories. It is one of the List View components provided by React Native along with FlatList.
Security
Security is a vital consideration in React Native application development, as it helps protect user data and sensitive information. Key best practices include using secure storage solutions for sensitive data, such as authentication tokens and user credentials, with libraries like `react-native-keychain` and `react-native-encrypted-storage`. For secure communication, always use HTTPS for API interactions to ensure that data exchanged between the client and server is encrypted. Additionally, minimize permissions by requesting only those necessary for the app's functionality, ideally at runtime, using libraries like `react-native-permissions`. Validating and sanitizing user input is crucial to prevent threats like SQL injection and cross-site scripting (XSS), which can be achieved with validation libraries such as `Yup`. Lastly, keeping dependencies up to date is essential to avoid known security vulnerabilities; tools like `npm audit` and Dependabot can assist in this process. By adhering to these best practices, developers can enhance the security of their React Native applications, safeguarding both application data and user information.
Sourcemaps
Sourcemaps are files that act as a bridge between your bundled, minified JavaScript code and the original source code you actually wrote. When an error occurs in a production environment, the stack trace typically points to the transformed bundle, which is difficult to read. By using sourcemaps, developer tools can map these obfuscated locations back to the exact files and line numbers in your original project, making it much easier to identify and fix bugs.
Chuyên Gia & Mở Rộng Hệ Thống
Giai đoạn 5 tập trung hoàn thiện 19 chủ đề then chốt.
Speeding up Builds
Building your React Native app could be expensive and take several minutes of developers time. This can be problematic as your project grows and generally in bigger organizations with multiple React Native developers.
State
State is an object that holds data managed within a React component. It allows components to become dynamic and interactive by keeping track of its data changes. When the state of a component changes, React re-renders the component and updates the DOM accordingly.
StatusBar
The `StatusBar` component is used to control the appearance of the status bar on the top of the screen. It may strike as a bit unusual since, unlike other React Native components, it doesn't render any visible content. Instead, it sets some native properties that can help customize the look of status bars on Android, iOS, or other platforms.
Storage in React Native
Storage in React Native refers to the various methods used to save data persistently on a mobile device so that information remains available even after the application is closed. Developers typically choose between options like AsyncStorage for simple key-value pairs, SQLite for structured relational data, or Encrypted Storage for sensitive information. Because mobile devices are susceptible to physical access and local file system vulnerabilities, choosing the correct storage mechanism is essential for protecting user privacy and preventing unauthorized data extraction.
Storage
React Native offers several methods for persisting data locally within applications, each catering to different storage needs and use cases. The primary options include Async Storage, which provides a simple key-value storage system suitable for small-scale data; Expo Secure Store, designed for securely storing sensitive information; Expo File System, which allows for file management and storage; and Expo SQLite, which supports more complex data storage and querying capabilities. When selecting a storage option, it's essential to consider the specific requirements of your app.
Stylesheets in React Native
In React Native, stylesheets are objects that define the appearance of components. They provide a way to separate styling from the component's logic. Stylesheets are created using `StyleSheet.create` method, which ensures a standardized and efficient way to manage styles for your components.
Styling in React Native
Styling in React Native is handled using a system that closely resembles CSS but is implemented through JavaScript objects. Developers define styles using the `StyleSheet.create` method, which organizes layout properties such as flexbox, colors, and spacing to determine how components appear on the screen. Because React Native uses a subset of standard CSS properties, it relies heavily on the Flexbox layout engine to manage the positioning and alignment of elements within a mobile interface.
Switch
A Switch is a visual component in React Native that provides a toggle interface for users to switch between two states, typically on and off. It functions as a controlled component, meaning it relies on a boolean value passed through properties to determine its current state and a callback function to handle changes when the user interacts with it. This component is commonly used in settings menus or forms where a binary selection is required.
Testing
Testing a React Native app usually combines Jest for unit and component tests, React Native Testing Library for rendering components and interacting with them the way a user would, and an end-to-end tool such as Detox, Appium, or Maestro that drives the app on a simulator or device.
Text Input
`TextInput` is a core component in React Native that allows the user to enter text. It is commonly used to collect user data, like emails or passwords. You can customize the appearance of `TextInput` by using various props such as `placeholder`, `multiline`, `maxLength`, and more.
Text Component
The `Text` component is a basic element in React Native used to display text content on the screen. While it has some basic styling properties, you usually nest it inside other components (e.g., `View`) to create more complex UIs.
Touchables
In React Native, `Touchable` components are used to handle user interactions like taps, long presses, and double-taps on the appropriate elements. Each of these components is from the `react-native` package, except `TouchableScale` which is from `react-native-touchable-scale`. They can be used interchangeably depending on the type of interaction you want to provide. The main `props` used with these components are `onPress`, `onLongPress`, and some component-specific ones like `underlayColor` for `TouchableHighlight`.
Understand Frame Rates
Frame rate measures the frequency at which individual images, known as frames, are displayed on a screen to create the illusion of motion. In React Native applications, maintaining a consistent frame rate—typically 60 frames per second—is essential for ensuring that animations and transitions feel smooth and responsive to the user. When the frame rate drops, the interface experiences stuttering or lag, which occurs if the JavaScript thread or the UI thread becomes overwhelmed by heavy computations or inefficient rendering cycles.
Using Native Modules
Native Modules allow React Native applications to access platform-specific features and native APIs that are not available through the default JavaScript bridge. By writing custom code in languages like Swift or Objective-C for iOS, and Java or Kotlin for Android, developers can integrate high-performance native libraries or device-specific hardware functionality directly into their applications. This mechanism enables the execution of complex tasks that require direct interaction with the underlying operating system.
View
`View` is the fundamental layout container in React Native, similar to a `div` in web development. It supports flexbox layout, styling, touch handling, and nesting, and is the building block for nearly every screen and component.
Websockets
WebSockets are a protocol that allows full-duplex communication between a client and a server over a single, long-lived connection. They are useful when real-time communication is needed, such as in chat applications, online gaming, or financial trading platforms. React Native ships with a built-in `WebSocket` implementation that follows the same API as the browser.
React Native
React Native is an open-source framework created by Meta that allows developers to build mobile applications for iOS and Android using JavaScript and React. It enables the creation of apps that provide a native look and feel by leveraging native platform components rather than using web views. Because it shares a single codebase, developers can efficiently maintain and deploy applications across multiple mobile platforms simultaneously.
Why use React Native?
React Native allows developers to build mobile applications for both iOS and Android using a single codebase written in JavaScript and React. It achieves this by bridging your code to native platform components, which provides a smooth user experience and performance similar to apps built with platform-specific languages. This approach reduces development time and maintenance costs because most of the logic is shared across different mobile platforms.
Writing Platform Specific Code
Writing platform-specific code involves using specialized techniques to implement features or UI components that behave differently on iOS and Android. React Native provides tools like the `Platform` module to detect the operating system at runtime and file extensions such as `.ios.js` or `.android.js` to separate implementation files. This approach allows developers to access native APIs unique to a single platform while maintaining a shared codebase for the rest of the application.