react-native

What is react-native?

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.

What are react-native's main functionalities?

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>
  );
}

Other packages similar to react-native

flutter

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

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

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.

README

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Supported operating systems are >= Android 4.1 (API 16) and >= iOS 7.0.

• Getting Started
• Getting Help
• Documentation
• Examples
• Extending React Native
• Upgrading
• Opening Issues
• Contributing
• License

Introduction

See the official React Native website for an introduction to React Native.

Getting Started

• Follow the Getting Started guide to install React Native and its dependencies.
• Check out this tutorial to walk through your first project that fetches real data and displays it in a list.
• Open the UIExplorer example project to see a list of components that ship with React Native.
• Install the React Developer Tools for Chrome or Firefox for better debugging (read more).
• Try out apps from the Showcase to see what React Native is capable of!

Getting Help

Please use these community resources for getting help. We use the GitHub issues for tracking bugs and feature requests and have limited bandwidth to address them.

• Ask a question on StackOverflow and tag it with react-native
• Chat with us on Reactiflux in #react-native
• Articulate your feature request or upvote existing ones on Product Pains
• Start a thread on the React Discussion Board
• Join #reactnative on IRC: chat.freenode.net
• If it turns out that you may have found a bug, please open an issue

Documentation

The website’s documentation is divided into multiple sections.

• There are Guides that discuss topics like debugging, integrating with existing apps, and the gesture responder system.
• The Components section covers React components such as View and Navigator.
• The APIs section covers other libraries like Animated and StyleSheet that aren’t React components themselves.
• Finally, React Native provides a small number of Polyfills that offer web-like APIs.

Another great way to learn more about the components and APIs included with React Native is to read their source. Look under the Libraries directory for components like ScrollView and Navigator, for example. The UIExplorer example is also here to demonstrate some of the ways to use these components. From the source you can get an accurate understanding of each component’s behavior and API.

The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

Examples

• git clone https://github.com/facebook/react-native.git
• cd react-native && npm install

Running the examples on iOS

Now open any example (the .xcodeproj file in each of the Examples subdirectories) and hit Run in Xcode.

Running the examples on Android

Note that you'll need the Android NDK installed, see prerequisites.

./gradlew :Examples:Movies:android:app:installDebug
# Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
# Open the Movies app in your emulator

Extending React Native

• Looking for a component? react.parts
• Fellow developers write and publish React Native modules to npm and open source them on GitHub.
• Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.
• Read the guides on Native Modules (iOS, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.

Upgrading

React Native is under active development. See the guide on upgrading React Native to keep your project up-to-date.

Opening Issues

If you encounter a bug with React Native we would like to hear about it. Search the existing issues and try to make sure your problem doesn’t already exist before opening a new issue. It’s helpful if you include the version of React Native and OS you’re using. Please include a stack trace and reduced repro case when appropriate, too.

The GitHub issues are intended for bug reports and feature requests. For help and questions with using React Native please make use of the resources listed in the Getting Help section. Product Pains in particular is a good way to signal your interest in a feature or issue. There are limited resources available for handling issues and by keeping the list of open issues lean we can respond in a timely manner.

Contributing

For more information about contributing PRs and issues, see our Contribution Guidelines.

We encourage the community to ask and answer questions on Stack Overflow with the react-native tag. It's a great way to help out and be involved!

License

React is BSD licensed. We also provide an additional patent grant.

React documentation is Creative Commons licensed.

Examples provided in this repository and in the documentation are separately licensed, as are some of the custom components.