# React Native · Learn once, write anywhere > A framework for building native apps for Android, iOS, and more using React - [React Native · Learn once, write anywhere](/index.md) ## docs ### getting-started This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. - [Introduction](/docs/getting-started.md): This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. ### environment-setup React Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once. - [Get Started with React Native](/docs/environment-setup.md): React Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once. ### set-up-your-environment In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more. - [Set Up Your Environment](/docs/set-up-your-environment.md): In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more. ### integration-with-existing-apps React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc. - [Integration with Existing Apps](/docs/integration-with-existing-apps.md): React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc. ### integration-with-android-fragment The guide for Integration with Existing Apps details how to integrate a full-screen React Native app into an existing Android app as an Activity. - [Integration with an Android Fragment](/docs/integration-with-android-fragment.md): The guide for Integration with Existing Apps details how to integrate a full-screen React Native app into an existing Android app as an Activity. ### intro-react-native-components React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components! - [Core Components and Native Components](/docs/intro-react-native-components.md): React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components! ### intro-react To understand React Native fully, you need a solid foundation in React. This short introduction to React can help you get started or get refreshed. - [React Fundamentals](/docs/intro-react.md): To understand React Native fully, you need a solid foundation in React. This short introduction to React can help you get started or get refreshed. ### handling-text-input TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted. - [Handling Text Input](/docs/handling-text-input.md): TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted. ### using-a-scrollview The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items can be heterogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property). - [Using a ScrollView](/docs/using-a-scrollview.md): The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items can be heterogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property). ### using-a-listview React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList. - [Using List Views](/docs/using-a-listview.md): React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList. ### troubleshooting These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub. - [Troubleshooting](/docs/troubleshooting.md): These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub. ### platform-specific-code When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for Android and iOS. - [Platform-Specific Code](/docs/platform-specific-code.md): When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for Android and iOS. ### building-for-tv TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - [Building For TV Devices](/docs/building-for-tv.md): TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. ### out-of-tree-platforms React Native is not only for Android and iOS devices - our partners and the community maintain projects that bring React Native to other platforms, such as: - [Out-of-Tree Platforms](/docs/out-of-tree-platforms.md): React Native is not only for Android and iOS devices - our partners and the community maintain projects that bring React Native to other platforms, such as: ### more-resources There’s always more to learn: developer workflows, shipping to app stores, internationalization, security and more. - [More Resources](/docs/more-resources.md): There’s always more to learn: developer workflows, shipping to app stores, internationalization, security and more. ### accessibility Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS. - [Accessibility](/docs/accessibility.md): Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS. ### accessibilityinfo Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes. - [AccessibilityInfo](/docs/accessibilityinfo.md): Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes. ### actionsheetios Displays native to iOS Action Sheet component. - [ActionSheetIOS](/docs/actionsheetios.md): Displays native to iOS Action Sheet component. ### activityindicator Displays a circular loading indicator. - [ActivityIndicator](/docs/activityindicator.md): Displays a circular loading indicator. ### alert Launches an alert dialog with the specified title and message. - [Alert](/docs/alert.md): Launches an alert dialog with the specified title and message. ### alertios Use Alert instead. - [❌ AlertIOS](/docs/alertios.md): Use Alert instead. ### animated The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution. - [Animated](/docs/animated.md): The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution. ### animatedvalue Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones. - [Animated.Value](/docs/animatedvalue.md): Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones. ### animatedvaluexy 2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood. - [Animated.ValueXY](/docs/animatedvaluexy.md): 2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood. ### animations Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface. - [Animations](/docs/animations.md): Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface. ### app-extensions App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the App Extension Programming Guide. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS. - [App Extensions](/docs/app-extensions.md): App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the App Extension Programming Guide. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS. ### appearance The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark). - [Appearance](/docs/appearance.md): The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark). ### appendix I. Terminology - [Appendix](/docs/appendix.md): I. Terminology ### appregistry Project with Native Code Required - [AppRegistry](/docs/appregistry.md): Project with Native Code Required ### appstate AppState can tell you if the app is in the foreground or background, and notify you when the state changes. - [AppState](/docs/appstate.md): AppState can tell you if the app is in the foreground or background, and notify you when the state changes. ### asyncstorage Use one of the community packages instead. - [❌ AsyncStorage](/docs/asyncstorage.md): Use one of the community packages instead. ### backhandler The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only. - [BackHandler](/docs/backhandler.md): The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only. ### boxshadowvalue The BoxShadowValue object is taken by the boxShadow style prop. It is comprised of 2-4 lengths, an optional color, and an optional inset boolean. These values collectively define the box shadow's color, position, size, and blurriness. - [BoxShadowValue Object Type](/docs/boxshadowvalue.md): The BoxShadowValue object is taken by the boxShadow style prop. It is comprised of 2-4 lengths, an optional color, and an optional inset boolean. These values collectively define the box shadow's color, position, size, and blurriness. ### build-speed Building your React Native app could be expensive and take several minutes of developers time. - [Speeding up your Build phase](/docs/build-speed.md): Building your React Native app could be expensive and take several minutes of developers time. ### button A basic button component that should render nicely on any platform. Supports a minimal level of customization. - [Button](/docs/button.md): A basic button component that should render nicely on any platform. Supports a minimal level of customization. ### checkbox Use one of the community packages instead. - [❌ CheckBox](/docs/checkbox.md): Use one of the community packages instead. ### clipboard Use one of the community packages instead. - [❌ Clipboard](/docs/clipboard.md): Use one of the community packages instead. ### colors Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web. General guides on the color usage on each platform could be found below: - [Color Reference](/docs/colors.md): Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web. General guides on the color usage on each platform could be found below: ### communication-android In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. - [Communication between native and React Native](/docs/communication-android.md): In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. ### communication-ios In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. - [Communication between native and React Native](/docs/communication-ios.md): In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. ### components-and-apis React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following categories: - [Core Components and APIs](/docs/components-and-apis.md): React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following categories: ### datepickerandroid Use one of the community packages instead. - [❌ DatePickerAndroid](/docs/datepickerandroid.md): Use one of the community packages instead. ### datepickerios Use one of the community packages instead. - [❌ DatePickerIOS](/docs/datepickerios.md): Use one of the community packages instead. ### debugging Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds. - [Debugging Basics](/docs/debugging.md): Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds. ### debugging-native-code Projects with Native Code Only - [Debugging Native Code](/docs/debugging-native-code.md): Projects with Native Code Only ### debugging-release-builds Symbolicating a stack trace - [Debugging Release Builds](/docs/debugging-release-builds.md): Symbolicating a stack trace ### devsettings The DevSettings module exposes methods for customizing settings for developers in development. - [DevSettings](/docs/devsettings.md): The DevSettings module exposes methods for customizing settings for developers in development. ### dimensions useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update. This works nicely with the React paradigm. - [Dimensions](/docs/dimensions.md): useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update. This works nicely with the React paradigm. ### document-nodes Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web). - [Document nodes](/docs/document-nodes.md): Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web). ### drawerlayoutandroid React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the drawerPosition prop and its width can be set by the drawerWidth prop. - [DrawerLayoutAndroid](/docs/drawerlayoutandroid.md): React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the drawerPosition prop and its width can be set by the drawerWidth prop. ### dropshadowvalue The DropShadowValue object is taken by the filter style prop for the dropShadow function. It is comprised of 2 or 3 lengths and an optional color. These values collectively define the drop shadow's color, position, and blurriness. - [DropShadowValue Object Type](/docs/dropshadowvalue.md): The DropShadowValue object is taken by the filter style prop for the dropShadow function. It is comprised of 2 or 3 lengths and an optional color. These values collectively define the drop shadow's color, position, and blurriness. ### dynamiccolorios The DynamicColorIOS function is a platform color type specific to iOS. - [DynamicColorIOS](/docs/dynamiccolorios.md): The DynamicColorIOS function is a platform color type specific to iOS. ### easing The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations. - [Easing](/docs/easing.md): The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations. ### element-nodes Element nodes represent native components in the native view tree (similar to Element nodes on Web). - [Element nodes](/docs/element-nodes.md): Element nodes represent native components in the native view tree (similar to Element nodes on Web). ### fabric-native-components-android Now it's time to write some Android platform code to be able to render the web view. The steps you need to follow are: - [Fabric Native Modules: Android](/docs/fabric-native-components-android.md): Now it's time to write some Android platform code to be able to render the web view. The steps you need to follow are: ### fabric-native-components-introduction If you want to build new React Native Components that wrap around a Host Component like a unique kind of CheckBox on Android, or a UIButton on iOS, you should use a Fabric Native Component. - [Native Components](/docs/fabric-native-components-introduction.md): If you want to build new React Native Components that wrap around a Host Component like a unique kind of CheckBox on Android, or a UIButton on iOS, you should use a Fabric Native Component. ### fabric-native-components-ios Now it's time to write some iOS platform code to be able to render the web view. The steps you need to follow are: - [Fabric Native Components: iOS](/docs/fabric-native-components-ios.md): Now it's time to write some iOS platform code to be able to render the web view. The steps you need to follow are: ### fast-refresh Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native Dev Menu. With Fast Refresh enabled, most edits should be visible within a second or two. - [Fast Refresh](/docs/fast-refresh.md): Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native Dev Menu. With Fast Refresh enabled, most edits should be visible within a second or two. ### flatlist A performant interface for rendering basic, flat lists, supporting the most handy features: - [FlatList](/docs/flatlist.md): A performant interface for rendering basic, flat lists, supporting the most handy features: ### flexbox A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. - [Layout with Flexbox](/docs/flexbox.md): A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. ### gesture-responder-system The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches. - [Gesture Responder System](/docs/gesture-responder-system.md): The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches. ### getting-started-without-a-framework If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework. - [Get Started Without a Framework](/docs/getting-started-without-a-framework.md): If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework. ### global-__DEV__ You can use the DEV pseudo-global variable in the codebase to guard development-only blocks of code. - [✨ __DEV__](/docs/global-__DEV__.md): You can use the DEV pseudo-global variable in the codebase to guard development-only blocks of code. ### global-AbortController 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [AbortController](/docs/global-AbortController.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-AbortSignal 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [AbortSignal](/docs/global-AbortSignal.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-alert 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [alert](/docs/global-alert.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-Blob 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [Blob](/docs/global-Blob.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-cancelAnimationFrame 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [cancelAnimationFrame](/docs/global-cancelAnimationFrame.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-cancelIdleCallback 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [cancelIdleCallback](/docs/global-cancelIdleCallback.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-clearInterval 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [clearInterval](/docs/global-clearInterval.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-clearTimeout 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [clearTimeout](/docs/global-clearTimeout.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-console 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [console](/docs/global-console.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-EventCounts The global EventCounts class, as defined in Web specifications. - [EventCounts 🧪](/docs/global-EventCounts.md): The global EventCounts class, as defined in Web specifications. ### global-fetch 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [fetch](/docs/global-fetch.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-File 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [File](/docs/global-File.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-FileReader 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [FileReader](/docs/global-FileReader.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-FormData 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [FormData](/docs/global-FormData.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-global global is a legacy alias for globalThis, as defined in Node.js. - [global](/docs/global-global.md): global is a legacy alias for globalThis, as defined in Node.js. ### global-Headers 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [Headers](/docs/global-Headers.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-navigator 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [navigator](/docs/global-navigator.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-performance The global performance object, as defined in Web specifications. - [performance 🧪](/docs/global-performance.md): The global performance object, as defined in Web specifications. ### global-PerformanceEntry The global PerformanceEntry class, as defined in Web specifications. - [PerformanceEntry 🧪](/docs/global-PerformanceEntry.md): The global PerformanceEntry class, as defined in Web specifications. ### global-PerformanceEventTiming The global PerformanceEventTiming class, as defined in Web specifications. - [PerformanceEventTiming 🧪](/docs/global-PerformanceEventTiming.md): The global PerformanceEventTiming class, as defined in Web specifications. ### global-PerformanceLongTaskTiming The global PerformanceLongTaskTiming class, as defined in Web specifications. - [PerformanceLongTaskTiming 🧪](/docs/global-PerformanceLongTaskTiming.md): The global PerformanceLongTaskTiming class, as defined in Web specifications. ### global-PerformanceMark The global PerformanceMark class, as defined in Web specifications. - [PerformanceMark 🧪](/docs/global-PerformanceMark.md): The global PerformanceMark class, as defined in Web specifications. ### global-PerformanceMeasure The global PerformanceMeasure class, as defined in Web specifications. - [PerformanceMeasure 🧪](/docs/global-PerformanceMeasure.md): The global PerformanceMeasure class, as defined in Web specifications. ### global-PerformanceObserver The global PerformanceObserver class, as defined in Web specifications. - [PerformanceObserver 🧪](/docs/global-PerformanceObserver.md): The global PerformanceObserver class, as defined in Web specifications. ### global-PerformanceObserverEntryList The global PerformanceObserverEntryList class, as defined in Web specifications. - [PerformanceObserverEntryList 🧪](/docs/global-PerformanceObserverEntryList.md): The global PerformanceObserverEntryList class, as defined in Web specifications. ### global-process 🚧 This page is work in progress. - [process](/docs/global-process.md): 🚧 This page is work in progress. ### global-queueMicrotask 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [queueMicrotask](/docs/global-queueMicrotask.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-Request 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [Request](/docs/global-Request.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-requestAnimationFrame 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [requestAnimationFrame](/docs/global-requestAnimationFrame.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-requestIdleCallback 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [requestIdleCallback](/docs/global-requestIdleCallback.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-Response 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [Response](/docs/global-Response.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-self self is an alias for globalThis, as defined in Web specifications. - [self](/docs/global-self.md): self is an alias for globalThis, as defined in Web specifications. ### global-setInterval 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [setInterval](/docs/global-setInterval.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-setTimeout 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [setTimeout](/docs/global-setTimeout.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-URL 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [URL](/docs/global-URL.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-URLSearchParams 🚧 This page is work in progress, so please refer to the MDN documentation for more information.\ - [URLSearchParams](/docs/global-URLSearchParams.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information.\ ### global-WebSocket 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [WebSocket](/docs/global-WebSocket.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### global-window window is an alias for globalThis, as defined in Web specifications. - [window](/docs/global-window.md): window is an alias for globalThis, as defined in Web specifications. ### global-XMLHttpRequest 🚧 This page is work in progress, so please refer to the MDN documentation for more information. - [XMLHttpRequest](/docs/global-XMLHttpRequest.md): 🚧 This page is work in progress, so please refer to the MDN documentation for more information. ### handling-touches Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. - [Handling Touches](/docs/handling-touches.md): Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. ### headless-js-android Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. - [Headless JS](/docs/headless-js-android.md): Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. ### height-and-width A component's height and width determine its size on the screen. - [Height and Width](/docs/height-and-width.md): A component's height and width determine its size on the screen. ### hermes Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. - [Using Hermes](/docs/hermes.md): Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. ### i18nmanager The I18nManager module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction. - [I18nManager](/docs/i18nmanager.md): The I18nManager module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction. ### image A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - [Image](/docs/image.md): A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. ### image-style-props Examples - [Image Style Props](/docs/image-style-props.md): Examples ### imagebackground A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the ` component, which has the same props as `, and add whatever children to it you would like to layer on top of it. - [ImageBackground](/docs/imagebackground.md): A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the ` component, which has the same props as `, and add whatever children to it you would like to layer on top of it. ### imagepickerios Use one of the community packages instead. - [❌ ImagePickerIOS](/docs/imagepickerios.md): Use one of the community packages instead. ### images Static Image Resources - [Images](/docs/images.md): Static Image Resources ### improvingux Configure text inputs - [Improving User Experience](/docs/improvingux.md): Configure text inputs ### inputaccessoryview A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars. - [InputAccessoryView](/docs/inputaccessoryview.md): A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars. ### interactionmanager Avoid long-running work and use requestIdleCallback instead. - [🗑️ InteractionManager](/docs/interactionmanager.md): Avoid long-running work and use requestIdleCallback instead. ### javascript-environment JavaScript Runtime - [JavaScript Environment](/docs/javascript-environment.md): JavaScript Runtime ### keyboard Keyboard module to control keyboard events. - [Keyboard](/docs/keyboard.md): Keyboard module to control keyboard events. ### keyboardavoidingview This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed. - [KeyboardAvoidingView](/docs/keyboardavoidingview.md): This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed. ### layout-props More detailed examples about those properties can be found on the Layout with Flexbox page. - [Layout Props](/docs/layout-props.md): More detailed examples about those properties can be found on the Layout with Flexbox page. ### layoutanimation Automatically animates views to their new positions when the next layout happens. - [LayoutAnimation](/docs/layoutanimation.md): Automatically animates views to their new positions when the next layout happens. ### layoutevent LayoutEvent object is returned in the callback as a result of component layout change, for example onLayout in View component. - [LayoutEvent Object Type](/docs/layoutevent.md): LayoutEvent object is returned in the callback as a result of component layout change, for example onLayout in View component. ### legacy #### direct-manipulation It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node. - [Direct Manipulation](/docs/legacy/direct-manipulation.md): It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node. #### local-library-setup A local library is a library containing views or modules that's local to your app and not published to a registry. This is different from the traditional setup for view and modules in the sense that a local library is decoupled from your app's native code. - [Local libraries setup](/docs/legacy/local-library-setup.md): A local library is a library containing views or modules that's local to your app and not published to a registry. This is different from the traditional setup for view and modules in the sense that a local library is decoupled from your app's native code. #### native-components-android There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application. - [Android Native UI Components](/docs/legacy/native-components-android.md): There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application. #### native-components-ios There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application. - [iOS Native UI Components](/docs/legacy/native-components-ios.md): There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application. #### native-modules-android Welcome to Native Modules for Android. Please start by reading the Native Modules Intro for an intro to what native modules are. - [Android Native Modules](/docs/legacy/native-modules-android.md): Welcome to Native Modules for Android. Please start by reading the Native Modules Intro for an intro to what native modules are. #### native-modules-intro Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing. - [Native Modules Intro](/docs/legacy/native-modules-intro.md): Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing. #### native-modules-ios Welcome to Native Modules for iOS. Please start by reading the Native Modules Intro for an intro to what native modules are. - [iOS Native Modules](/docs/legacy/native-modules-ios.md): Welcome to Native Modules for iOS. Please start by reading the Native Modules Intro for an intro to what native modules are. #### native-modules-setup Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find this guide useful. - [Native Modules NPM Package Setup](/docs/legacy/native-modules-setup.md): Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find this guide useful. ### libraries This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps. - [Using Libraries](/docs/libraries.md): This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps. ### linking Linking gives you a general interface to interact with both incoming and outgoing app links. - [Linking](/docs/linking.md): Linking gives you a general interface to interact with both incoming and outgoing app links. ### linking-libraries-ios Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support adding these features whenever you need them. - [Linking Libraries](/docs/linking-libraries-ios.md): Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support adding these features whenever you need them. ### metro React Native uses Metro to build your JavaScript code and assets. - [Metro](/docs/metro.md): React Native uses Metro to build your JavaScript code and assets. ### modal The Modal component is a basic way to present content above an enclosing view. - [Modal](/docs/modal.md): The Modal component is a basic way to present content above an enclosing view. ### native-platform Your application may need access to platform features that aren’t directly available from react-native or one of the hundreds of third-party libraries maintained by the community. Maybe you want to reuse some existing Objective-C, Swift, Java, Kotlin or C++ code from the JavaScript runtime. Whatever your reason, React Native exposes a powerful set of API to connect your native code to your JavaScript application code. - [Native Platform](/docs/native-platform.md): Your application may need access to platform features that aren’t directly available from react-native or one of the hundreds of third-party libraries maintained by the community. Maybe you want to reuse some existing Objective-C, Swift, Java, Kotlin or C++ code from the JavaScript runtime. Whatever your reason, React Native exposes a powerful set of API to connect your native code to your JavaScript application code. ### navigation Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. - [Navigating Between Screens](/docs/navigation.md): Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. ### network Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server. - [Networking](/docs/network.md): Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server. ### nodes React Native apps render a native view tree that represents the UI, similar to how React DOM does on Web (the DOM tree). React Native provides imperative access to this tree via refs, which are returned by all native components (including those rendered by built-in components like View). - [Nodes from refs](/docs/nodes.md): React Native apps render a native view tree that represents the UI, similar to how React DOM does on Web (the DOM tree). React Native provides imperative access to this tree via refs, which are returned by all native components (including those rendered by built-in components like View). ### optimizing-flatlist-configuration Terms - [Optimizing FlatList Configuration](/docs/optimizing-flatlist-configuration.md): Terms ### optimizing-javascript-loading Parsing and running JavaScript code requires memory and time. Because of this, as your app grows, it's often useful to delay loading code until it's needed for the first time. React Native comes with some standard optimizations that are on by default, and there are techniques you can adopt in your own code to help React load your app more efficiently. There are also some advanced automatic optimizations (with their own tradeoffs) that are suitable for very large apps. - [Optimizing JavaScript loading](/docs/optimizing-javascript-loading.md): Parsing and running JavaScript code requires memory and time. Because of this, as your app grows, it's often useful to delay loading code until it's needed for the first time. React Native comes with some standard optimizations that are on by default, and there are techniques you can adopt in your own code to help React load your app more efficiently. There are also some advanced automatic optimizations (with their own tradeoffs) that are suitable for very large apps. ### other-debugging-methods This page covers how to use legacy JavaScript debugging methods. If you are getting started with a new React Native or Expo app, we recommend using React Native DevTools. - [Other Debugging Methods](/docs/other-debugging-methods.md): This page covers how to use legacy JavaScript debugging methods. If you are getting started with a new React Native or Expo app, we recommend using React Native DevTools. ### panresponder PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. - [PanResponder](/docs/panresponder.md): PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. ### performance A compelling reason to use React Native instead of WebView-based tools is to achieve at least 60 frames per second and provide a native look and feel to your apps. Whenever feasible, we aim for React Native to handle optimizations automatically, allowing you to focus on your app without worrying about performance. However, there are certain areas where we haven't quite reached that level yet, and others where React Native (similar to writing native code directly) cannot determine the best optimization approach for you. In such cases, manual intervention becomes necessary. We strive to deliver buttery-smooth UI performance by default, but there may be instances where that isn't possible. - [Performance Overview](/docs/performance.md): A compelling reason to use React Native instead of WebView-based tools is to achieve at least 60 frames per second and provide a native look and feel to your apps. Whenever feasible, we aim for React Native to handle optimizations automatically, allowing you to focus on your app without worrying about performance. However, there are certain areas where we haven't quite reached that level yet, and others where React Native (similar to writing native code directly) cannot determine the best optimization approach for you. In such cases, manual intervention becomes necessary. We strive to deliver buttery-smooth UI performance by default, but there may be instances where that isn't possible. ### permissionsandroid Project with Native Code Required - [PermissionsAndroid](/docs/permissionsandroid.md): Project with Native Code Required ### pixelratio PixelRatio gives you access to the device's pixel density and font scale. - [PixelRatio](/docs/pixelratio.md): PixelRatio gives you access to the device's pixel density and font scale. ### platform Example - [Platform](/docs/platform.md): Example ### platformcolor You can use the PlatformColor function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the PlatformColor function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application. - [PlatformColor](/docs/platformcolor.md): You can use the PlatformColor function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the PlatformColor function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application. ### pressable Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children. - [Pressable](/docs/pressable.md): Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children. ### pressevent PressEvent object is returned in the callback as a result of user press interaction, for example onPress in Button component. - [PressEvent Object Type](/docs/pressevent.md): PressEvent object is returned in the callback as a result of user press interaction, for example onPress in Button component. ### profiling Profiling is the process of analyzing an app's performance, resource usage, and behavior to identify potential bottlenecks or inefficiencies. It's worth making use of profiling tools to ensure your app works smoothly across different devices and conditions. - [Profiling](/docs/profiling.md): Profiling is the process of analyzing an app's performance, resource usage, and behavior to identify potential bottlenecks or inefficiencies. It's worth making use of profiling tools to ensure your app works smoothly across different devices and conditions. ### progressbarandroid Use one of the community packages instead. - [🗑️ ProgressBarAndroid](/docs/progressbarandroid.md): Use one of the community packages instead. ### props Most components can be customized when they are created, with different parameters. These created parameters are called props, short for properties. - [Props](/docs/props.md): Most components can be customized when they are created, with different parameters. These created parameters are called props, short for properties. ### publishing-to-app-store The publishing process is the same as any other native iOS app, with some additional considerations to take into account. - [Publishing to Apple App Store](/docs/publishing-to-app-store.md): The publishing process is the same as any other native iOS app, with some additional considerations to take into account. ### pushnotificationios Use one of the community packages instead. - [🗑️ PushNotificationIOS](/docs/pushnotificationios.md): Use one of the community packages instead. ### react-native-devtools React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods. - [React Native DevTools](/docs/react-native-devtools.md): React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods. ### react-native-gradle-plugin This guide describes how to configure the React Native Gradle Plugin (often referred as RNGP), when building your React Native application for Android. - [React Native Gradle Plugin](/docs/react-native-gradle-plugin.md): This guide describes how to configure the React Native Gradle Plugin (often referred as RNGP), when building your React Native application for Android. ### react-node A React Node is one of the following types: - [React Node Object Type](/docs/react-node.md): A React Node is one of the following types: ### rect Rect accepts numeric pixel values to describe how far to extend a rectangular area. These values are added to the original area's size to expand it. - [Rect Object Type](/docs/rect.md): Rect accepts numeric pixel values to describe how far to extend a rectangular area. These values are added to the original area's size to expand it. ### refreshcontrol This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event. - [RefreshControl](/docs/refreshcontrol.md): This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event. ### releases New React Native releases are shipped every two months, usually resulting in six (6) new minors per year. - [Releases Overview](/docs/releases.md): New React Native releases are shipped every two months, usually resulting in six (6) new minors per year. #### release-levels React Native provides the community with the ability to adopt individual new features as soon as their design and implementation are nearly complete, even before they are included in a stable release. This approach is known as release levels. - [Release Levels](/docs/releases/release-levels.md): React Native provides the community with the ability to adopt individual new features as soon as their design and implementation are nearly complete, even before they are included in a stable release. This approach is known as release levels. #### versioning-policy This page describes the versioning policy we follow for the react-native package. - [Versioning Policy](/docs/releases/versioning-policy.md): This page describes the versioning policy we follow for the react-native package. ### roottag RootTag is an opaque identifier assigned to the native root view of your React Native surface — i.e. the ReactRootView or RCTRootView instance for Android or iOS respectively. In short, it is a surface identifier. - [RootTag](/docs/roottag.md): RootTag is an opaque identifier assigned to the native root view of your React Native surface — i.e. the ReactRootView or RCTRootView instance for Android or iOS respectively. In short, it is a surface identifier. ### running-on-device It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production. - [Running On Device](/docs/running-on-device.md): It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production. ### running-on-simulator-ios Starting the simulator - [Running On Simulator](/docs/running-on-simulator-ios.md): Starting the simulator ### safeareaview Use react-native-safe-area-context instead. - [🗑️ SafeAreaView](/docs/safeareaview.md): Use react-native-safe-area-context instead. ### scrollview Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - [ScrollView](/docs/scrollview.md): Component that wraps platform ScrollView while providing integration with touch locking "responder" system. ### sectionlist A performant interface for rendering sectioned lists, supporting the most handy features: - [SectionList](/docs/sectionlist.md): A performant interface for rendering sectioned lists, supporting the most handy features: ### security Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - [Security](/docs/security.md): Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! ### segmentedcontrolios Use one of the community packages instead. - [❌ SegmentedControlIOS](/docs/segmentedcontrolios.md): Use one of the community packages instead. ### settings Settings serves as a wrapper for NSUserDefaults, a persistent key-value store available only on iOS. - [Settings](/docs/settings.md): Settings serves as a wrapper for NSUserDefaults, a persistent key-value store available only on iOS. ### shadow-props --- - [Shadow Props](/docs/shadow-props.md): --- ### share Example - [Share](/docs/share.md): Example ### signed-apk-android Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to App Signing by Google Play functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The Signing Your Applications page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle. - [Publishing to Google Play Store](/docs/signed-apk-android.md): Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to App Signing by Google Play functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The Signing Your Applications page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle. ### state There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state. - [State](/docs/state.md): There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state. ### statusbar Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons. - [StatusBar](/docs/statusbar.md): Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons. ### statusbarios Use StatusBar for mutating the status bar. - [❌ StatusBarIOS](/docs/statusbarios.md): Use StatusBar for mutating the status bar. ### strict-typescript-api The Strict TypeScript API is a preview of our future, stable JavaScript API for React Native. - [Strict TypeScript API (opt in)](/docs/strict-typescript-api.md): The Strict TypeScript API is a preview of our future, stable JavaScript API for React Native. ### style With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color. - [Style](/docs/style.md): With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color. ### stylesheet A StyleSheet is an abstraction similar to CSS StyleSheets. - [StyleSheet](/docs/stylesheet.md): A StyleSheet is an abstraction similar to CSS StyleSheets. ### switch Renders a boolean input. - [Switch](/docs/switch.md): Renders a boolean input. ### systrace Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize. - [Systrace](/docs/systrace.md): Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize. ### targetevent TargetEvent object is returned in the callback as a result of focus change, for example onFocus or onBlur in the TextInput component. - [TargetEvent Object Type](/docs/targetevent.md): TargetEvent object is returned in the callback as a result of focus change, for example onFocus or onBlur in the TextInput component. ### testing-overview This guide introduces React Native developers to the key concepts behind testing, how to write good tests, and what kinds of tests you can incorporate into your workflow. - [Testing](/docs/testing-overview.md): This guide introduces React Native developers to the key concepts behind testing, how to write good tests, and what kinds of tests you can incorporate into your workflow. ### text A React component for displaying text. - [Text](/docs/text.md): A React component for displaying text. ### text-nodes Text nodes represent raw text content on the tree (similar to Text nodes on Web). They are not directly accessible via refs, but can be accessed using methods like childNodes on element refs. - [Text nodes](/docs/text-nodes.md): Text nodes represent raw text content on the tree (similar to Text nodes on Web). They are not directly accessible via refs, but can be accessed using methods like childNodes on element refs. ### text-style-props Example - [Text Style Props](/docs/text-style-props.md): Example ### textinput A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - [TextInput](/docs/textinput.md): A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. ### the-new-architecture #### advanced-topics-components This document contains a set of advanced topics to implement more complex functionalities of Native Components. It is recommended to first read the Codegen section and the guides on Native Components. - [Advanced Topics on Native Modules Development](/docs/the-new-architecture/advanced-topics-components.md): This document contains a set of advanced topics to implement more complex functionalities of Native Components. It is recommended to first read the Codegen section and the guides on Native Components. #### advanced-topics-modules This document contains a set of advanced topics to implement more complex functionalities of Native Modules. It is recommended to first read the Codegen section and the guides on Native Modules. - [Advanced Topics on Native Modules Development](/docs/the-new-architecture/advanced-topics-modules.md): This document contains a set of advanced topics to implement more complex functionalities of Native Modules. It is recommended to first read the Codegen section and the guides on Native Modules. #### codegen-cli Calling Gradle or manually calling a script might be hard to remember and it requires a lot of ceremony. - [The Codegen CLI](/docs/the-new-architecture/codegen-cli.md): Calling Gradle or manually calling a script might be hard to remember and it requires a lot of ceremony. #### create-module-library React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the reactnative.directory website, and this is a great resource to bookmark for every React Native developer. - [Create a Library for Your Module](/docs/the-new-architecture/create-module-library.md): React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the reactnative.directory website, and this is a great resource to bookmark for every React Native developer. #### custom-cxx-types This guide assumes that you are familiar with the Pure C++ Turbo Native Modules guide. This will build on top of that guide. - [Advanced: Custom C++ Types](/docs/the-new-architecture/custom-cxx-types.md): This guide assumes that you are familiar with the Pure C++ Turbo Native Modules guide. This will build on top of that guide. #### direct-manipulation-new-architecture It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node. - [Direct Manipulation](/docs/the-new-architecture/direct-manipulation-new-architecture.md): It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node. #### fabric-component-native-commands In the base guide to write a new Native Component, you have explored how to create a new component, how to pass properties from the JS side to the native side, and how to emit events from native side to JS. - [Invoking native functions on your native component](/docs/the-new-architecture/fabric-component-native-commands.md): In the base guide to write a new Native Component, you have explored how to create a new component, how to pass properties from the JS side to the native side, and how to emit events from native side to JS. #### layout-measurements Sometimes, you need to measure the current layout to apply some changes to the overall layout or to make decisions and call some specific logic. - [Measuring the Layout](/docs/the-new-architecture/layout-measurements.md): Sometimes, you need to measure the current layout to apply some changes to the overall layout or to make decisions and call some specific logic. #### native-modules-custom-events In some circustamces, you may want to have a Native Module that listen to some events in the platform layer and then emit them to the JavaScript layer, to let you application react to such native events. In other cases, you might have long running operations that can emits events so that the UI can be updated when those happen. - [Emitting Events in Native Modules](/docs/the-new-architecture/native-modules-custom-events.md): In some circustamces, you may want to have a Native Module that listen to some events in the platform layer and then emit them to the JavaScript layer, to let you application react to such native events. In other cases, you might have long running operations that can emits events so that the UI can be updated when those happen. #### native-modules-lifecycle In React Native, Native Modules are singleton. The Native Module infrastructure lazily creates a Native Module the first time it is accessed and it keeps it around whenever the app requires it. This is a performance optimization that allows us to avoid the overhead of creating Native Modules eagerly, at app start, and it ensure faster startup times. - [Native Modules Lifecycle](/docs/the-new-architecture/native-modules-lifecycle.md): In React Native, Native Modules are singleton. The Native Module infrastructure lazily creates a Native Module the first time it is accessed and it keeps it around whenever the app requires it. This is a performance optimization that allows us to avoid the overhead of creating Native Modules eagerly, at app start, and it ensure faster startup times. #### pure-cxx-modules Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code. - [Cross-Platform Native Modules (C++)](/docs/the-new-architecture/pure-cxx-modules.md): Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code. #### turbo-modules-with-swift Swift is the official and default language for developing native application on iOS. - [iOS - Using Swift in Your Native Modules](/docs/the-new-architecture/turbo-modules-with-swift.md): Swift is the official and default language for developing native application on iOS. #### using-codegen This guide teaches how to: - [Using Codegen](/docs/the-new-architecture/using-codegen.md): This guide teaches how to: #### what-is-codegen Codegen is a tool to avoid writing a lot of repetitive code. Using Codegen is not mandatory: you can write all the generated code manually. However, Codegen generates scaffolding code that could save you a lot of time. - [What is Codegen?](/docs/the-new-architecture/what-is-codegen.md): Codegen is a tool to avoid writing a lot of repetitive code. Using Codegen is not mandatory: you can write all the generated code manually. However, Codegen generates scaffolding code that could save you a lot of time. ### timepickerandroid Use one of the community packages instead. - [❌ TimePickerAndroid](/docs/timepickerandroid.md): Use one of the community packages instead. ### timers Timers are an important part of an application and React Native implements the browser timers. - [Timers](/docs/timers.md): Timers are an important part of an application and React Native implements the browser timers. ### toastandroid React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method show(message, duration) which takes the following parameters: - [ToastAndroid](/docs/toastandroid.md): React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method show(message, duration) which takes the following parameters: ### touchablehighlight If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. - [TouchableHighlight](/docs/touchablehighlight.md): If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. ### touchablenativefeedback If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. - [TouchableNativeFeedback](/docs/touchablenativefeedback.md): If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. ### touchableopacity If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. - [TouchableOpacity](/docs/touchableopacity.md): If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. ### touchablewithoutfeedback If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. - [TouchableWithoutFeedback](/docs/touchablewithoutfeedback.md): If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. ### transforms Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps. - [Transforms](/docs/transforms.md): Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps. ### turbo-native-modules-android Now it's time to write some Android platform code to make sure localStorage survives after the application is closed. - [Turbo Native Modules: Android](/docs/turbo-native-modules-android.md): Now it's time to write some Android platform code to make sure localStorage survives after the application is closed. ### turbo-native-modules-introduction Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a Turbo Native Module. This guide will show you how to write one. - [Native Modules](/docs/turbo-native-modules-introduction.md): Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a Turbo Native Module. This guide will show you how to write one. ### turbo-native-modules-ios Now it's time to write some iOS platform code to make sure localStorage survives after the application is closed. - [Turbo Native Modules: iOS](/docs/turbo-native-modules-ios.md): Now it's time to write some iOS platform code to make sure localStorage survives after the application is closed. ### tutorial React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not. - [Learn the Basics](/docs/tutorial.md): React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not. ### typescript TypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow. - [Using TypeScript](/docs/typescript.md): TypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow. ### upgrading Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you. - [Upgrading to new versions](/docs/upgrading.md): Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you. ### usecolorscheme The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle). - [useColorScheme](/docs/usecolorscheme.md): The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle). ### usewindowdimensions useWindowDimensions automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so: - [useWindowDimensions](/docs/usewindowdimensions.md): useWindowDimensions automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so: ### vibration Vibrates the device. - [Vibration](/docs/vibration.md): Vibrates the device. ### view The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, `, android.view`, etc. - [View](/docs/view.md): The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, `, android.view`, etc. ### view-style-props Example - [View Style Props](/docs/view-style-props.md): Example ### viewtoken ViewToken object is returned as one of the properties in the onViewableItemsChanged callback (for example, in the FlatList component). It is exported by ViewabilityHelper.js. - [ViewToken Object Type](/docs/viewtoken.md): ViewToken object is returned as one of the properties in the onViewableItemsChanged callback (for example, in the FlatList component). It is exported by ViewabilityHelper.js. ### virtualizedlist Base implementation for the more convenient ` and components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList` provides, e.g. for use with immutable data instead of plain arrays. - [VirtualizedList](/docs/virtualizedlist.md): Base implementation for the more convenient ` and components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList` provides, e.g. for use with immutable data instead of plain arrays. ### virtualview VirtualView is a core component that behaves similar to View. - [VirtualView 🧪](/docs/virtualview.md): VirtualView is a core component that behaves similar to View. ## architecture ### bundled-hermes This page gives an overview of how Hermes and React Native are built. - [Bundled Hermes](/architecture/bundled-hermes.md): This page gives an overview of how Hermes and React Native are built. ### fabric-renderer Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and to unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer. - [Fabric](/architecture/fabric-renderer.md): Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and to unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer. ### glossary Dev Menu - [Glossary](/architecture/glossary.md): Dev Menu ### landing-page Since 2018, the React Native team has been redesigning the core internals of React Native to enable developers to create higher-quality experiences. As of 2024, this version of React Native has been proven at scale and powers production apps by Meta. - [About the New Architecture](/architecture/landing-page.md): Since 2018, the React Native team has been redesigning the core internals of React Native to enable developers to create higher-quality experiences. As of 2024, this version of React Native has been proven at scale and powers production apps by Meta. ### overview Welcome to the Architecture Overview! If you're getting started with React Native, please refer to Guides section. Continue reading to learn how internals of React Native work! - [Architecture Overview](/architecture/overview.md): Welcome to the Architecture Overview! If you're getting started with React Native, please refer to Guides section. Continue reading to learn how internals of React Native work! ### render-pipeline The React Native renderer goes through a sequence of work to render React logic to a host platform. This sequence of work is called the render pipeline and occurs for initial renders and updates to the UI state. This document goes over the render pipeline and how it differs in those scenarios. - [Render, Commit, and Mount](/architecture/render-pipeline.md): The React Native renderer goes through a sequence of work to render React logic to a host platform. This sequence of work is called the render pipeline and occurs for initial renders and updates to the UI state. This document goes over the render pipeline and how it differs in those scenarios. ### threading-model The React Native renderer distributes the work of the render pipeline across multiple threads. - [Threading Model](/architecture/threading-model.md): The React Native renderer distributes the work of the render pipeline across multiple threads. ### view-flattening View Flattening is an optimization by the React Native renderer to avoid deep layout trees. - [View Flattening](/architecture/view-flattening.md): View Flattening is an optimization by the React Native renderer to avoid deep layout trees. ### xplat-implementation The React Native renderer utilizes a core render implementation to be shared across platforms - [Cross Platform Implementation](/architecture/xplat-implementation.md): The React Native renderer utilizes a core render implementation to be shared across platforms ## community ### communities The React Native Community - [Communities](/community/communities.md): The React Native Community ### overview The React Native Community - [Overview](/community/overview.md): The React Native Community ### staying-updated The React Native Community - [Staying up to date](/community/staying-updated.md): The React Native Community ### support Where to get help - [Where to get help](/community/support.md): Where to get help ## showcase Thousands of apps are using React Native, check out these apps! - [Who is using React Native?](/showcase.md): Thousands of apps are using React Native, check out these apps! ## contributing ### bots-reference pull-bot - [Bots Reference](/contributing/bots-reference.md): pull-bot ### changelogs-in-pull-requests The changelog entry in your pull request serves as a sort of "tl;dr do they affect Android? are these breaking changes? is something new being added? - [Changelogs in Pull Requests](/contributing/changelogs-in-pull-requests.md): The changelog entry in your pull request serves as a sort of "tl;dr do they affect Android? are these breaking changes? is something new being added? ### contribution-license-agreement You must sign a Contribution License Agreement (CLA) before your pull request can be merged. This a one-time requirement for Meta projects in GitHub. You can read more about Contributor License Agreements (CLA) on Wikipedia. - [Contribution License Agreement](/contributing/contribution-license-agreement.md): You must sign a Contribution License Agreement (CLA) before your pull request can be merged. This a one-time requirement for Meta projects in GitHub. You can read more about Contributor License Agreements (CLA) on Wikipedia. ### how-to-build-from-source You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core. - [How to Build from Source](/contributing/how-to-build-from-source.md): You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core. ### how-to-contribute-code Thank you for your interest in contributing to React Native! From commenting on and triaging issues, to reviewing and sending PRs, all contributions are welcome. In this document, we'll cover the steps to contributing code to React Native. - [How to Contribute Code](/contributing/how-to-contribute-code.md): Thank you for your interest in contributing to React Native! From commenting on and triaging issues, to reviewing and sending PRs, all contributions are welcome. In this document, we'll cover the steps to contributing code to React Native. ### how-to-open-a-pull-request These instructions provide the step-by-step process to set up your machine to make contributions to the core React Native repository, and create your first pull request. - [How to Open a Pull Request](/contributing/how-to-open-a-pull-request.md): These instructions provide the step-by-step process to set up your machine to make contributions to the core React Native repository, and create your first pull request. ### how-to-report-a-bug Reporting a bug for React Native is one of the best way to start contributing to the project. We use GitHub issues as the main channel for handling new bug reports. - [How to Report a Bug](/contributing/how-to-report-a-bug.md): Reporting a bug for React Native is one of the best way to start contributing to the project. We use GitHub issues as the main channel for handling new bug reports. ### how-to-run-and-write-tests Running Tests - [How to Run and Write Tests](/contributing/how-to-run-and-write-tests.md): Running Tests ### labeling-github-issues Most of our labels have a prefix that provides a hint of their purpose. - [Labeling GitHub Issues](/contributing/labeling-github-issues.md): Most of our labels have a prefix that provides a hint of their purpose. ### managing-pull-requests Reviewing a pull request can take a considerable amount of time. In some cases, the review might require more time to perform than it took someone to write and submit their changes! It's therefore necessary to do some preliminary work to ensure each pull request is in a good state to be reviewed. - [Managing Pull Requests](/contributing/managing-pull-requests.md): Reviewing a pull request can take a considerable amount of time. In some cases, the review might require more time to perform than it took someone to write and submit their changes! It's therefore necessary to do some preliminary work to ensure each pull request is in a good state to be reviewed. ### overview How to contribute to React Native - [Contributing Overview](/contributing/overview.md): How to contribute to React Native ### triaging-github-issues Start out by looking at issues that need triage, as identified by the "Needs: Triage" label. - [Triaging GitHub Issues](/contributing/triaging-github-issues.md): Start out by looking at issues that need triage, as identified by the "Needs: Triage" label. ## versions - [React Native versions](/versions.md) ## blog Blog - [Blog · React Native](/blog.md): Blog ### 2023 #### 01 - [First-class Support for TypeScript](/blog/2023/01/03/typescript-first.md): With the release of 0.71, React Native is investing in the TypeScript experience with the following changes: - [React Native 0.71: TypeScript by Default, Flexbox Gap, and more...](/blog/2023/01/12/version-071.md): Today we’re releasing React Native version 0.71! This is a feature-packed release including: - [React Native 0.71-RC0 Android outage postmortem](/blog/2023/01/27/71rc1-android-outage-postmortem.md): Now that 0.71 is available, we want to share some key information about the incident that broke Android builds for all React Native versions while releasing the first 0.71 release candidate for React Native & Expo Android builds on November 4th, 2022. #### 06 - [React Native 0.72 - Symlink Support, Better Errors, and more](/blog/2023/06/21/0.72-metro-package-exports-symlinks.md): Today we’re releasing 0.72! - [Package Exports Support in React Native](/blog/2023/06/21/package-exports-support.md): With the release of React Native 0.72, Metro — our JavaScript build tool — now includes beta support for the package.json "exports" field. When enabled, it adds the following functionality: #### 12 - [React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks.md): Today we're releasing React Native 0.73! This release adds improvements to debugging with Hermes, stable symlink support, Android 14 support, and new experimental features. We are also deprecating legacy debugging features, and are releasing the next pillar of the New Architecture: Bridgeless Mode! ### 2024 #### 04 - [React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more](/blog/2024/04/22/release-0.74.md): Today we're releasing React Native 0.74! This release adds Yoga 3.0, Bridgeless by default under the New Architecture, batched onLayout updates (New Architecture), and Yarn 3 as the default package manager for new projects. #### 06 - [Use a framework to build React Native apps](/blog/2024/06/25/use-a-framework-to-build-react-native-apps.md): At React Conf, we updated our guidance on the best tool to get started building React Native apps: a React Native framework - a toolbox with all the necessary APIs to let you build production-ready apps. #### 08 - [React Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, and more](/blog/2024/08/12/release-0.75.md): Today we are excited to release React Native 0.75! #### 10 - [React Native 0.76 - New Architecture by default, React Native DevTools, and more](/blog/2024/10/23/release-0.76-new-architecture.md): Today we are excited to release React Native 0.76! - [New Architecture is here](/blog/2024/10/23/the-new-architecture-is-here.md): React Native 0.76 with the New Architecture by default is now available on npm! ### 2025 #### 01 - [React Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template](/blog/2025/01/21/version-0.77.md): Today we are excited to release React Native 0.77! #### 02 - [React Native Core Contributor Summit 2024 Recap](/blog/2025/02/03/react-native-core-contributor-summit-2024.md): Every year, the core contributors in the React Native Community get together with the React Native team to collaboratively shape the direction of this project. - [React Native 0.78 - React 19 and more](/blog/2025/02/19/react-native-0.78.md): Today we are excited to release React Native 0.78! #### 04 - [React Native 0.79 - Faster tooling and much more](/blog/2025/04/08/react-native-0.79.md): Today we are excited to release React Native 0.79! #### 06 - [Moving Towards a Stable JavaScript API (New Changes in 0.80)](/blog/2025/06/12/moving-towards-a-stable-javascript-api.md): In React Native 0.80, we're introducing two significant changes to React Native's JavaScript API — the deprecation of deep imports, and our new Strict TypeScript API. These are part of an ongoing effort to accurately define our API and offer dependable type safety to users and frameworks. - [React Native 0.80 - React 19.1, JS API Changes, Freezing Legacy Arch and much more](/blog/2025/06/12/react-native-0.80.md): Today we are excited to release React Native 0.80! #### 08 - [React Native 0.81 - Android 16 support, faster iOS builds, and more](/blog/2025/08/12/react-native-0.81.md): Today we are excited to release React Native 0.81! #### 10 - [React Native 0.82 - A New Era](/blog/2025/10/08/react-native-0.82.md): Today we're excited to release React Native 0.82: the first React Native that runs entirely on the New Architecture.