React Native Cross-Platform Framework: Basics and a First App

React Native — an open-source cross-platform framework for developing native mobile and desktop applications in JavaScript and TypeScript, created by Facebook, Inc. React Native supports platforms such as Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP, allowing developers to use the React library outside the browser to build native applications with full access to the platforms' system APIs.

Implementation

The core principles of React Native are almost identical to those of React, except that React Native manages platform UI components rather than the browser DOM. The JavaScript code written by the developer runs in a background thread and interacts with the platform APIs through an asynchronous messaging system called the Bridge. In 2021, the Bridge is expected to be replaced with a more performant synchronous messaging model that supports the zero-copy paradigm.

Although the React Native styling system (the way visual properties of interface elements are configured) has a syntax similar to CSS, the framework does not use HTML or CSS technologies as such.^[14] Instead, for each of the operating systems the framework supports, software adapters are implemented that apply the style specified by the developer to the platform UI element.

React Native also allows developers to reuse existing code written in other programming languages — for example, Java or Kotlin for Android and Objective-C or Swift for iOS. React Native also supports integration into existing applications — for example, part of a mobile application's interface can be implemented in React Native, while another part is built using purely platform-native tools.

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

Programming basics in React Native

React Native is a framework for developing mobile applications that lets you use the JavaScript programming language and the React library to build native mobile applications for iOS and Android. Here are the main concepts and elements of React Native:

1. Components: React Native is built on the concept of components. Components are reusable user interface building blocks that combine logic and visual elements.

   Component example:

   import React from 'react'; 
   import { View, Text } from 'react-native'; 
   const MyComponent = () => { return ( Hello, React Native! ); }; 
   export default MyComponent;

2. State: State is an object that holds data managed by a component. When a component's state changes, React Native re-renders the component to display the new state.

   jsx
   import React, { useState } from 'react'; 
   import { View, Text, Button } from 'react-native'; 
   const MyComponentWithState = () => { const [count, setCount] = useState(0);
    return ( Count: {count}setCount(count + 1)} /> ); };
    export default MyComponentWithState;

3. Navigation: React Navigation is a library for managing navigation in React Native applications. It lets you create stack, tab and other types of navigation.

   js
   import { createAppContainer } from 'react-navigation'; 
   import { createStackNavigator } from 'react-navigation-stack';
    const AppNavigator = createStackNavigator( { Home: HomeScreen, Details: DetailsScreen, }, { initialRouteName: 'Home', } );
    export default createAppContainer(AppNavigator);

4. Device APIs: React Native provides many APIs for interacting with the device, such as the camera, geolocation, sensors and more.

5. Style management: Styles in React Native are defined using JavaScript objects rather than CSS. Styles can be inline or defined in separate files.

   jsx
   const styles = { container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 18, color: 'blue', }, }; const MyStyledComponent = () => { return ( Styling in React Native ); };

These basics will help you get started developing mobile applications with React Native. Consult the official React Native documentation to deepen your knowledge and skills.