react-native
Advanced tools
React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web, and UWP by enabling developers to use React along with native platform capabilities. It allows for the development of mobile apps using JavaScript and React, offering a rich mobile UI library and tools to deliver a native app experience.
UI Components
React Native provides a set of built-in core components like View, Text, and Image that you can use to build your app's UI. These components are pre-styled and ready to use, making it easy to develop complex UIs.
import { View, Text } from 'react-native';
function HelloWorldApp() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, world!</Text>
</View>
);
}Native Modules
Native Modules allow you to write modules in native code that can be called from JavaScript. This is useful for accessing platform-specific functionality that is not covered by the built-in React Native components.
import { NativeModules } from 'react-native';
const { CalendarModule } = NativeModules;
CalendarModule.createCalendarEvent('testName', 'testLocation');Navigation
Navigation is essential for mobile apps. React Native can integrate with libraries like React Navigation to provide a way to navigate between screens.
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Profile' component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It is similar to React Native but uses Dart instead of JavaScript. Flutter provides its own widgets, which are drawn by the framework's own graphics engine.
Ionic is a popular framework for building hybrid mobile applications using web technologies like HTML, CSS, and JavaScript. It differs from React Native as it focuses on web technologies and uses Cordova or Capacitor to access native device features.
NativeScript is an open-source framework for developing truly native mobile applications using JavaScript, TypeScript, Vue.js, or Angular. It provides direct access to native APIs and performance similar to React Native, but it allows for a broader choice of frameworks for building the UI.
Learn once, write anywhere:
Build mobile apps with React.
React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.
React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.
React Native apps may target iOS 13.4 and Android 6.0 (API 23) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.
Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
The full documentation for React Native can be found on our website.
The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.
The source for the React Native documentation and website is hosted on a separate repository, @facebook/react-native-website.
Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the Upgrading Guide for instructions.
React Native releases are discussed in this discussion repo.
The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Read our Contributing Guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.
You can learn more about our vision for React Native in the Roadmap.
We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Larger discussions and proposals are discussed in @react-native-community/discussions-and-proposals.
React Native is MIT licensed, as found in the LICENSE file.
React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.
v0.77.0-rc.0
serverBaseUrl relative to the middleware host. (acf384a72e by @robhogan)position of sticky headers on ScrollView will now be taken into account (cbab004eb9 by @joevilches)com.facebook.react.views.progressbar internal (46526fc2fe by @cortinico)ClipboardModule internal (10f6d5adb5 by @cortinico)com.facebook.react.views.safeareaview internal (39dfbadd5d by @cortinico)DevLoadingModule internal (8c50bf0beb by @cortinico)NotThreadSafeViewHierarchyUpdateDebugListener (287e200332 by @cortinico)AccessibilityInfoModule internal (7168a9d1a2 by @cortinico)CGColorRef with UIColor to avoid manual memory management (b70709dbc2 by @Saadnajmi)RCTHermesInstance constructor breaking change (aec6666bfa by @tido64)rn_rootThreshold in Intersection Observer (a77d8d9d50 by @lunaleaps)resizeMode and objectFit support for 'none'. (d8cfd98070 by @mateoguzmana)React.AbstractComponent in React codebase (6205aad81e by @SamChou19815)display: contents (e7a3f479fe by @j-piasecki)announceForAccessibilityWithOptions function mock in the packages/react-native/jest/setup.js file. (4ae999b90b by @ChrisMattew)NativeAnimatedModule (fd355308fa by @yungsters)HostInstance type to represent the instance of a HostComponent<T>. (e24f9917c2 by @yungsters)DevMenu from react-native (e12c0d9551 by @frankcalise)experimental prefix and fully released mixBlendMode prop (d2c48f3b1a by @jorge-cab)Animated to improve product performance (dc84d00db6 by @yungsters)Animated (f3f652daab by @yungsters)force-cache caching control option (a0be88fd72 by @mateoguzmana)Image cache control for Android (e5dd7d68bf by @mateoguzmana)resizeMethod options when applied to a large image (768a1d8664 by @Abbondanzo)resizeMethod, none, which disables downsampling for an image (6202319ed5 by @Abbondanzo)isHighTextContrastEnabled() to AccessibilityInfo to read ACCESSIBILITY_HIGH_TEXT_CONTRAST_ENABLED setting value (d4ea147b41 by Ariel Lin)outline-width, outline-color, outline-style & outline-offset (17faac4170 by @jorge-cab)unloadApp methods for unmounting surfaces without destroying ReactHost (38593c440e by @rozele)only-if-cached cache control option (dc9db01665 by @mateoguzmana)inputAccessoryViewButtonLabel prop (32931466ed by @mateoguzmana)RCTAppDependencyProvider to the RCTAppDelegate (95fc906930 by @cipolleschi)disabledButtonTintColor prop to ActionSheetIOS (089c87e22e by @henninghall)CallInvoker to BindingsInstaller (87bae7f734 by @mrousavy)isDarkerSystemColorsEnabled() to AccessibilityInfo to read "Increase Contrast" setting value (af3bee6511 by Ariel Lin)systemCyan and systemMint colors on iOS (4caf548a9f by @EvanBacon)outline-width, outline-color, outline-style & outline-offset (1288e38423 by @jorge-cab)AnimatedNode graph will not occur during the insertion effect phase, which means animations can now be reliably started during layout effects. (316170ce8d by @yungsters)appendFragment and prependFragment take an rval instead of a const ref; append/prependAttributedString have been removed (2c31fe99e1 by @javache)animation.start(<callback>) will be scheduled for execution in a microtask. Previously, there were certain scenarios in which the callback could be synchronously executed by start. (090501d26d by @yungsters)Animated components. (f0ffcd4f5d by @yungsters)useMergeRefs and components using it (e.g. Pressable) now support ref cleanup functions. (01e210fd28 by @yungsters)useNativeDriver and AnimatedValue configurations will now synchronously fail. Previously, spring and timing animations with non-zero delays would throw the error asynchronously. (fd8cf19625 by @yungsters)Animation superclass no longer exposes __onEnd as a property. Subclasses must instead invoke super.start(…) in their start() implementation. (b3fe06b268 by @yungsters)HostInstance (which changing nominal types). (177697f539 by @yungsters)toJSON(). (7bd4a54968 by @yungsters)toJSON(). (fe6228512e by @yungsters)style to the original prop value if it contains no AnimatedNode instances. Previously, it would resolve to a flattened style object. (ca234ba10e by @yungsters)outline props on Android to stay consistent with iOS (7ab0002799 by @jorge-cab)prefetchImageWithMetadata's queryRootName nullable in the spec (4dd60acb7d by @TheRogue76)RCTSurfaceHostingProxyRootView no longer has different behavior (whether it calls start on the provided surface) depending on which initializer is used. Call start yourself on the surface instead. (13b93cfdda by Nolan O'Brien)newArchEnabled flag in RCTAppDelegate and RCTRootViewFactory (7e1674fc59 by @okwasniewski)RCTUIGraphicsImageRenderer to RCTMakeUIGraphicsImageRenderer (6a09fc09af by @Saadnajmi)BackHandler.removeEventListener (44d619414c by @retyui)refs property from NativeMethods TypeScript definition. (223e98cc4b by @yungsters)display: contents is used (aa53bde21b by @j-piasecki)flow, where extended JS syntax remains unsupported. (3de9892353 by @huntie)Appearance.setColorScheme(null) not resetting color scheme value (7d63235086 by @sangonz193)useNativeProps (4c3112c8d8 by @cipolleschi)display: contents not being cleaned in some cases (a88ddcecc9 by @j-piasecki)PerformanceEntryReporter::reportMark and PerformanceEntryReporter::reportMeasaure now return created performance entries. (32f7b3b4e0 by @robik)create to customize property lookup (5b5e150eaf by @javache)jscodeshift@17.0.0 to resolve outdated dependencies (39c98fb8f8 by @byCedric)textAlign is set to justify (08e8f6adfd by @coado)maintainVisibleContentPosition in virtualized lists (6c19996e10 by @fabriziocucci)onDropViewInstance cleanup was not being handled after ReactRootView.unmountReactApplication (0449630612 by @rozele)ANTI_ALIAS_FLAG when resetting Text Paint (276e3a7df7 by @NickGerleman)setAndroidLayoutDirection by default (6cf0cfb5a4 by @NickGerleman)r & d not working from Metro sometimes (9a60038a40 by @EdmondChuiHW)onMomentumScrollBegin event not firing on command-driven scroll events (5b609cca09 by @Abbondanzo)attempt to insert nil object from objects (bebd6531b5 by @RodolfoGS)FAQs
A framework for building native apps using React
The npm package react-native receives a total of 2,192,089 weekly downloads. As such, react-native popularity was classified as popular.
We found that react-native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.