AI tools

React Native

Open-source mobile application framework From Wikipedia, the free encyclopedia

React Native

React Native is an open-source UI software framework developed by Meta Platforms (formerly Facebook Inc.).[3] It is used to develop applications for Android,[4]: §Chapter 1 [5][6] Android TV,[7] iOS,[4]: §Chapter 1 [6] macOS,[8] tvOS,[9] Web,[10] Windows[8] and UWP[11] by enabling developers to use the React framework along with native platform capabilities.[12] It is used to develop Android and iOS applications at Facebook, Microsoft, and Shopify.[13] It is also being used to develop virtual reality applications at Oculus.[14]

Quick Facts Developer(s), Initial release ...
React Native
Developer(s)Meta and community
Initial releaseMarch 26, 2015; 9 years ago (2015-03-26)[1]
Stable release
0.77.0[2]  / 21 January 2025; 24 days ago (21 January 2025)
Repositorygithub.com/facebook/react-native
Written inC++, Java, JavaScript, Objective-C, Kotlin
PlatformAndroid, Android TV, iOS, macOS, tvOS, Web, Windows, UWP, and VR
TypeApplication framework
LicenseMIT License
Websitereactnative.dev
Close

History

In 2012 Mark Zuckerberg commented, "The biggest mistake we made as a company was betting too much on HTML5 as opposed to native".[15][16] Using HTML5 for Facebook's mobile version resulted in an unstable application that retrieved data slowly.[17] He promised Facebook would soon deliver a better mobile experience.

Inside Facebook, Jordan Walke found a way to generate UI elements for iOS from a background JavaScript thread, which became the basis for the React web framework. They decided to organize an internal Hackathon to perfect this prototype in order to be able to build native apps with this technology.[18]

In 2015, after months of development, Facebook released the first version for the React JavaScript Configuration. During a technical talk,[19] Christopher Chedeau explained that Facebook was already using React Native in production for its Group App and its Ads Manager App.[20]

Implementation

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM.[4]: §Chapter 2  It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native[4]: §Chapter 2  platform via serialized data over an asynchronous and batched bridge.[21][22]

React components wrap existing native code and interact with native APIs via React's declarative UI paradigm and JavaScript.[23] TypeScript is often used over JavaScript in modern React Native applications due to its increased type safety.[24]

While React Native styling has a similar syntax to CSS, it does not use HTML or CSS.[4]: §Chapter 5 [25] Instead, messages from the JavaScript thread are used to manipulate native views. Using plugins, Tailwind can also be used with React Native.

React Native is also available for both Windows and macOS, which is currently maintained by Microsoft.

Hello World example

A Hello, World program in React Native looks like this:

import { AppRegistry, Text, View, Button } from 'react-native';
import React from 'react';

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Hello world!</Text>
      <Text>{count}</Text>
      <Button onPress={incrementCount} title="Increase Count" />
    </View>
  );
};

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

Typescript Example

In TypeScript, a counter component looks like this:

import { Button, Text, View } from "react-native";
import React from "react";

interface CounterProps {
    title: string; // Required prop
    baseNumber?: number; // Optional prop
}

const Counter: React.FC<CounterProps> = ({ title, baseNumber }) => {
    const [count, setCount] = React.useState<number>(baseNumber || 0);

    const incrementCount = (): void => setCount((prevCount) => prevCount + 1);

    return (
        <View>
            <Text>{count}</Text>
            <Button onPress={incrementCount} title={title}></Button>
        </View>
    );
};

See also

Citations

References

Wikiwand - on

Seamless Wikipedia browsing. On steroids.