react-native
Advanced tools
Package description
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.
Changelog
0.74.0
start/end in styles always refer to writing direction (e859f6c773 by @NickGerleman)configFilename and configKey arguments from iOS codegen CLI. Now we always expect them to be package.json and codegenConfig respectively. (33a44e68fc by @dmytrorykun)Float -> float; Int32 -> int. (ccd3b04770 by @dmytrorykun)getJSCallInvokerHolder() for Bridgeless Catalyst Instance (c6076bca97 by @arushikesarwani94)onKeyLongPress in Bridgeless (f345fcf3e8 by @arushikesarwani94)onKeyDown in Bridgeless (b14f7d58e3 by @arushikesarwani94)onConfigurationChanged in Bridgeless (b2e1db0fbf by @arushikesarwani94)onNewIntent in Bridgeless (5d711f83b5 by @arushikesarwani94)onWindowFocusChange in Bridgeless (7b40c8ee5f by @arushikesarwani94)handler param on PushNotificationIOS.removeEventListener (fdf4ec3297)ios_folder argument from the use_react_native function. (be0c353e18 by @dmytrorykun)Float -> float; Int32 -> NSInteger. (5aa425c086 by @dmytrorykun)react-native.config.js is not supported anymore. Define them as normal dependencies in package.json. (ca39a11b27 by @dmytrorykun)exclude array inside tsconfig (40bb425f48 by @bartlomein).gitignore in template (965f2eb1fb by @szymonrybczak)cursorColor and selectionHandleColor to override selectionColor on Android (1e68e48534 by @jakex7)tabIndex for View and userSelect in the Text props were added. (b36505bf06 by @wootsbot)alignContent: "space-evenly" (c9d0a006fd by @NickGerleman)npx react-native init (a6397afb7f by @byCedric)nativeNetworkInspection target capability flag (f3ce7cd76e by @byCedric)user-agent when header is unset (c62be78d99 by @byCedric)getJavaScriptContextHolder() for Bridgeless Catalyst Instance (b72f5e9982 by @arushikesarwani94)getRuntimeExecutor() for Bridgeless Catalyst Instance (6a5aaad9e0 by @arushikesarwani94)onUserLeaveHint support into ReactActivityDelegate (3b6c522942 by @behenate)removeAllViews to IViewGroupManager. (3cd85dc933 by @javache)rrc_text and rrc_textinput (ad9f0b0ab8 by @j-piasecki)vision interfaceIdiom (258d8e51b4 by @okwasniewski)shouldBeRecycled method on iOS. (613a5a7597 by @WoLewicki)RCTIsNewArchEnabled() to check whether the New Arch is enabled at runtime. (f1a7f08feb by @cipolleschi)ccache, to speed up subsequent builds of native code. After installing ccache and running pod install, the Xcode project is injected with compiler and linker build settings pointing scripts that loads a default Ccache configuration and invokes the ccache executable. (e85d51c6f1 by @kraenhansen)REACT_NATIVE_PATH in the "Bundle React Native code and images" shell script build phase. This will help apps initialized into a mono-repo which hoists the react-native package. (289e78388a by @kraenhansen)dismissActionSheet function in ActionSheetIOS. (89c7be890b by @LRNZ09)Platform.isMacCatalyst (027d520d65 by @jacobp100)@react-native-community/cli to 13.6.4 (4f50089da2 by @szymonrybczak)hermes-parser instead of flow-parser to parse Flow Codegen specs. (5abaf388cd by @motiz88)--experimental-debugger flag, restore Flipper as base launch flow (9e068ac163 by @huntie)position: "relative" (88a55baeaa by @NickGerleman)react_render_textlayoutmanager via prefab. (642b4e5c2c by @tomekzaw)rrc_text via prefab. (1c69100a2b by @tomekzaw)rrc_textinput via prefab. (adc9e5b0fa by @tomekzaw)PopupMenuAndroidNativeComponent.js to PopupMenuAndroidNativeComponent.android.js (fcabb2ad21 by @cipolleschi).mm) file in prep for DisplayP3 changes (267ea2661a by @cipolleschi)RCTKeyWindow to be more resilient and work in multi-window apps (782e9eace9 by @okwasniewski)NDEBUG flag for Release builds for both architectures (1a0e1741c0 by @tjzel)scrollEventThrottle no longer needs to be set for continuous scroll events when using the new architecture. (56b57e2db4 by @NickGerleman)RCTRootViewFrameDidChangeNotification as it's not tracking root view frame changes (625d0ece6d by @Saadnajmi)[RCTConvert RCTTransformOrigin:] out of UIAccessibilityTraits category (c7aa3954e3 by @Saadnajmi)<Webkit/Webkit.h> import in RCTConvert.h (452bf0ff06 by @Saadnajmi)RCTAppSetupPrepareApp (reverts #41976) (ce3ce1194b by @huntie)[RCTConvert UIBarStyle:] (157cb0e02b by @Saadnajmi)RCTAppSetupPrepareApp, replaced with C++ overload (7a4950b366 by @huntie)getSurfacePresenter and getModuleRegistry for surfacePresenter and moduleRegistry` props. (c3b0a8f162 by @cipolleschi)react (62c15bacaa by @jbroma)onEndReached is called (4dcc1d3efb by @janicduplessis)react-native config failing in pnpm setups (8f4f09bf70 by @tido64)react-native/community-cli-plugin is unable to resolve out-of-tree platforms in monorepos (e350859d72 by @tido64)onViewableItemsChanged signature (35f5c3a204 by @miallo)translateX & translateX to be able to use percentage values (b133bf6024 by @retyui)compose-source-maps.js failing if -o is not specified when it should output the composed source map (ab192ced69 by @tido64)SectionList while transiting between empty and filled state (0c37f8c85c by @MateWW)react-native/codegen not being able to resolve dependencies in pnpm setups (c58e19e89a by @tido64)ping() method into WebSocket interface (016b62c549 by @alexzel)react-native-babel-preset (c90485eb10 by @jonthysell)number | null to ViewProps['hitSlop'] TypeScript type (bc16bc5b01 by @DimitarNestorov)originalKeywordKind deprecation error (5de0ddae30 by @mrousavy)registerCallableModule TypeScript definitions (6bc95b2074 by @Kudo)convertRawPropAliases (5e37c1f219 by @NickGerleman)[Android][Fixed] - Fix incorrect measurement of TextInput when new architecture is enabled ([dc2ce9e66e](https://github.com/facebook/react-native/commit/dc2ce9e66e337ef90a179853467dbb8b09b9d24c) by [@mdvacca](https://github.com/mdvacca))
DefaultComponentsRegistry::registerComponentDescriptorsFromEntryPoint is set (8474e239df by @tido64)ReactCompoundViewGroup comments (385473522c by @kkafar)java.lang.NoSuchMethodError for Bridgeless (b22f566104 by @cortinico)configureJavaToolChains is only executed once during configuration (c7d969f31b by @UNIDY2002)rrc_text and rrc_textinput (623bbe6bd6 by @j-piasecki)addUIBlock provides a Dictionary-look-alike object that returns the right views when queried. (f61f87c5ef by @cipolleschi)RCTAppDelegate to template's AppDelegate (ebb55a780a by @cipolleschi)DoubleConversion build error from Swift integration (631b6a12c5 by @Kudo)UIMenuController (6801fc3f9b by @Saadnajmi)with-environment.sh script for the case when Node can't be found prior to loading .xcode.env (c684f9fc62 by @birdofpreyru)setState is not working for nested inline views in text (9b33e752c7 by @ehsemloh)setState is not working properly for text inline image (36ef6460f0 by @ehsemloh)D continuously (a257e9f5f0 by @zhongwuzw)createRootViewWithBridge being deprecated (a1197695fc by @okwasniewski)bundleURL so that it can connect to metro on Reload when the url changes.
(90296be1d4 by @cipolleschi)Readme
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 repo, @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.
FAQs
A framework for building native apps using React
The npm package react-native receives a total of 1,742,368 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
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.