Introduction to React Native: Principles, Architecture, and Practical Implementation

React Native Overview

React Native is an open‑source JavaScript framework released by Facebook in September 2015 that enables developers to build cross‑platform mobile applications using JavaScript and React. It combines React's development efficiency with native‑level performance, embodying the principle "Learn Once, Write Anywhere".

Key Characteristics

Cross‑Platform

By leveraging a Virtual DOM, a single codebase can be bundled for multiple platforms, greatly improving development speed and reducing maintenance costs compared with fully native development.

Fast Onboarding

JavaScript has a low learning curve and flexible syntax, allowing web developers to reuse existing knowledge to create native apps. If you know React, you can write React Native code with minimal friction.

Native Experience

React Native components expose native APIs, so although the code is written in JavaScript, it ultimately calls native UI components, delivering performance comparable to pure native apps.

Hot Update

React Native bundles are JavaScript files that can be fetched from a server at app launch. Updating the bundle enables version upgrades without requiring users to download a new package from the app store, subject to store policies.

Underlying Principles

JavaScriptCore

JavaScriptCore is the JavaScript engine used to parse and execute the bundle's JavaScript code.

// Create a JS context
JSContent *ctx = [[JSContent alloc] init];
// Define a variable
[ctx evaluateScript:@"var name = 'Hellen'"];
// Define a function
[ctx evaluateScript:@"var hello = function(name) { return 'hello ' + name }"];

Native code can invoke JavaScript functions via the context:

// Obtain the function
JSValue *helloFunction = ctx[@"hello"];
// Call the function
JSValue *greetings = [helloFunction callWithArguments:@[@"bytedancers"]];

Hermes Engine

Hermes, released by Facebook in 2019, is a lightweight JavaScript engine optimized for Android, reducing app start‑up time, memory usage, and bundle size compared with JavaScriptCore and V8.

Bridge

The Bridge connects the embedded JavaScript engine with native modules, exposing native functionality to JavaScript and vice‑versa. All native capabilities—storage, networking, UI rendering, etc.—are accessed through Bridge‑wrapped JS interfaces.

Example of creating an RCTRootView (iOS) that loads a React Native app:

// RCTRootView.m
- (void)javaScriptDidLoad:(NSNotification *)notification {
  RCTAssertMainQueue();
  RCTBridge *bridge = notification.userInfo[@"bridge"];
  if (bridge != _contentView.bridge) {
    [self bundleFinishedLoading:bridge];
  }
}

- (void)bundleFinishedLoading:(RCTBridge *)bridge {
  // … create RCTRootContentView …
  [self runApplication:bridge];
}

- (void)runApplication:(RCTBridge *)bridge {
  NSString *moduleName = _moduleName ?: @"";
  NSDictionary *appParameters = @{
    @"rootTag": _contentView.reactTag,
    @"initialProps": _appProperties ?: @{},
  };
  [bridge enqueueJSCall:@"AppRegistry"
                 method:@"runApplication"
                   args:@[moduleName, appParameters]
              completion:NULL];
}

Virtual DOM

React Native uses a platform‑agnostic Virtual DOM to describe UI components as data structures, which are then mapped to native UI elements by the UI Manager via the Bridge.

Example of a Virtual DOM element representation:

var ele = {
  type: type,          // element type
  key: key,            // key identifier
  ref: ref,            // reference
  props: props,        // properties including children
  ...
};

Thread Model

React Native operates with three main threads:

JS thread : Executes JavaScript code and handles async communication with native code.

Shadow thread : Performs layout calculations using the Yoga engine.

UI thread : Renders UI components and processes user interactions.

Hot Update Mechanism

The bundle file contains both the JavaScript logic and the React Native runtime. At launch, the app fetches the latest bundle from the server, enabling over‑the‑air updates without reinstalling the app.

Practical React Native Development

Environment Setup (macOS)

iOS: Node, Watchman, Xcode, CocoaPods. Android: Node, Watchman, JDK, Android Studio. Refer to the official React Native documentation for detailed steps.

Project Structure

├── android   # Android runtime
├── iOS       # iOS runtime
├── node_modules
├── app.json  # App metadata
├── App.js    # React Native code
├── index.js  # Entry file (registers the root component)
├── package.json
└── ...

Implementing a Modal Animation

Key components: View, Text, TouchableOpacity, StyleSheet, Dimensions, Animated.

State handling for modal visibility:

// Control modal visibility
const [visible, setVisible] = useState(false);

<View style={styles.container}>
  <Header />
  <View style={styles.buttonWrap}>
    <TouchableOpacity style={styles.button} onPress={() => setVisible(true)}>
      <Text style={styles.buttonText}>Button</Text>
    </TouchableOpacity>
  </View>
  <Modal visible={visible} onClose={() => setVisible(false)} />
</View>

Animated background and scaling using an Animated.Value:

const [fade] = useState(new Animated.Value(0));

Animated.timing(fade, {
  toValue: 100,
  duration: 400,
  useNativeDriver: false,
}).start();

let back = fade.interpolate({
  inputRange: [0, 100],
  outputRange: ['rgba(0,0,0,0)', 'rgba(0,0,0,.8)'],
});
let content = fade.interpolate({
  inputRange: [0, 100],
  outputRange: [0, 1],
});

Summary & Outlook

Limitations

Because React Native relies on a single Bridge and asynchronous communication, heavy real‑time native interactions (e.g., complex animations) may suffer performance drawbacks compared with pure native implementations.

Future – JSI (JavaScript Interface)

JSI is a lightweight C++‑based API that replaces the traditional Bridge, allowing direct calls between JavaScript and native modules without JSON serialization, improving performance and enabling easy swapping of JavaScript engines (e.g., JavaScriptCore, Hermes, V8).

Comparison with Other Cross‑Platform Solutions

Flutter, developed by Google, uses a widget‑based UI framework and compiles to native code, while React Native keeps a JavaScript‑centric workflow and relies on native UI components via the Bridge. Both have similar state‑management concepts, but React Native generally offers better native integration at the cost of slightly lower performance.

Overall, React Native remains a viable choice for building cross‑platform mobile apps, especially when leveraging existing React knowledge and when rapid iteration via hot updates is valuable.

Follow ByteFE for more technical content and contact [email protected] for recruitment.