React Native

https://reactnative.dev/architecture/
Admin
React Native is an open-source framework developed by Meta for building cross-platform native mobile...
Tokens:5,266
Snippets:87
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install CocoaPods dependencies

Source: https://reactnative.dev/architecture/landing-page

Run this command after modifying the Podfile to apply changes.

```bash
bundle exec pod install
```

--------------------------------

### Define React JSX structure

Source: https://reactnative.dev/architecture/render-pipeline

A basic example of a React JSX tree containing a View and a Text component.

```jsx
<View>

  <Text>Hello, World</Text>

</View>
```

--------------------------------

### Define a component with nested layout-only views

Source: https://reactnative.dev/architecture/view-flattening

Example of a React component structure that creates deep element trees containing layout-only nodes.

```jsx
function MyComponent() {

  return (

    <View>                          // ReactAppComponent

      <View style={{margin: 10}} /> // ContainerComponent

        <View style={{margin: 10}}> // TitleComponent

          <Image {...} />

          <Text {...}>This is a title</Text>

        </View>

      </View>

    </View>

  );

}
```

--------------------------------

### Implement Tooltip Positioning with useLayoutEffect

Source: https://reactnative.dev/architecture/landing-page

Uses useLayoutEffect to perform synchronous measurements and state updates, ensuring the tooltip positions correctly in a single commit.

```jsx
function ViewWithTooltip() {

  // ...



  useLayoutEffect(() => {

    // The measurement and state update for `targetRect` happens in a single commit

    // allowing Tooltip to position itself without intermediate paints

    targetRef.current?.measureInWindow((x, y, width, height) => {

      setTargetRect({x, y, width, height});

    });

  }, [setTargetRect]);



  return (

    <>

      <View ref={targetRef}>

        <Text>Some content that renders a tooltip above</Text>

      </View>

      <Tooltip targetRect={targetRect} />

    </>

  );

}
```

--------------------------------

### Define Initial React Component

Source: https://reactnative.dev/architecture/render-pipeline

Initial component structure used to demonstrate the render pipeline before a state update.

```jsx
function MyComponent() {

  return (

    <View>

      <View

        style={{backgroundColor: 'red', height: 20, width: 20}}

      />

      <View

        style={{backgroundColor: 'blue', height: 20, width: 20}}

      />

    </View>

  );

}
```

--------------------------------

### Implement Tooltip Positioning with onLayout

Source: https://reactnative.dev/architecture/landing-page

Uses the legacy onLayout event to measure view dimensions, which may cause visual jumps due to asynchronous state updates.

```jsx
function ViewWithTooltip() {

  // ...



  // We get the layout information and pass to Tooltip to position itself

  const onLayout = React.useCallback(event => {

    targetRef.current?.measureInWindow((x, y, width, height) => {

      // This state update is not guaranteed to run in the same commit

      // This results in a visual "jump" as the Tooltip repositions itself

      setTargetRect({x, y, width, height});

    });

  }, []);



  return (

    <>

      <View ref={targetRef} onLayout={onLayout}>

        <Text>Some content that renders a tooltip above</Text>

      </View>

      <Tooltip targetRect={targetRect} />

    </>

  );

}
```

--------------------------------

### Build Hermes Engine via Gradle

Source: https://reactnative.dev/architecture/bundled-hermes

Commands to trigger debug or release builds of the Hermes engine from the React Native main branch.

```bash
# Build a debug version of Hermes

./gradlew :ReactAndroid:hermes-engine:assembleDebug

# Build a release version of Hermes

./gradlew :ReactAndroid:hermes-engine:assembleRelease
```

--------------------------------

### Define a React Component

Source: https://reactnative.dev/architecture/render-pipeline

A basic React functional component structure used to demonstrate the initial render process.

```javascript
function MyComponent() {

  return (

    <View>

      <Text>Hello, World</Text>

    </View>

  );

}



// <MyComponent />
```

--------------------------------

### Disable New Architecture on iOS

Source: https://reactnative.dev/architecture/landing-page

Add the environment variable to the Podfile to disable the New Architecture.

```ruby
+ ENV['RCT_NEW_ARCH_ENABLED'] = '0'

# Resolve react_native_pods.rb with node to allow for hoisting

require Pod::Executable.execute_command('node', ['-p',

  'require.resolve(
```

--------------------------------

### Perform Structural Sharing Clone Operations

Source: https://reactnative.dev/architecture/render-pipeline

Sequence of operations performed by the renderer to create a new tree while sharing unchanged nodes.

```text
1. CloneNode(Node 3, {backgroundColor: 'yellow'}) → Node 3'
2. CloneNode(Node 2) → Node 2'
3. AppendChild(Node 2', Node 3')
4. AppendChild(Node 2', Node 4)
5. CloneNode(Node 1) → Node 1'
6. AppendChild(Node 1', Node 2')
```

--------------------------------

### Disable New Architecture on Android

Source: https://reactnative.dev/architecture/landing-page

Modify the gradle.properties file to toggle the newArchEnabled flag.

```properties
# Use this property to enable support to the new architecture.

# This will allow you to use TurboModules and the Fabric render in

# your application. You should enable this flag either if you want

# to write custom TurboModules/Fabric components OR use libraries that

# are providing them.

-newArchEnabled=true

+newArchEnabled=false
```

--------------------------------

### Implement Transitions with useTransition

Source: https://reactnative.dev/architecture/landing-page

Uses useTransition to mark state updates as interruptible, allowing React to prioritize higher-priority UI tasks during heavy rendering.

```javascript
function TileSlider({value, onValueChange}) {

  const [isPending, startTransition] = useTransition();



  return (

    <>

      <View>

        <Text>

          Render {value} Tiles

        </Text>

        <ActivityIndicator animating={isPending} />

      </View>

      <Slider

        value={1}

        minimumValue={1}

        maximumValue={1000}

        step={1}

        onValueChange={newValue => {

          startTransition(() => {

            onValueChange(newValue);

          });

        }}

      />

    </>

  );

}



function ManyTiles() {

  const [value, setValue] = useState(1);

  const tiles = generateTileViews(value);

  return (

      <TileSlider onValueChange={setValue} value={value} />

      <View>

        {tiles}

      </View>

  )

}
```

--------------------------------

### Exclude fbjni group in Gradle

Source: https://reactnative.dev/architecture/bundled-hermes

Configuration line required in the template to resolve conflicts between non-prefab and prefab fbjni consumption.

```groovy
exclude group:'com.facebook.fbjni'
```

--------------------------------

### Update Android build.gradle dependencies for Hermes

Source: https://reactnative.dev/architecture/bundled-hermes

Modify the dependencies block in android/app/build.gradle to switch from local AAR files to the bundled hermes-engine artifact.

```gradle
dependencies {

    // ...



    if (enableHermes) {

+       implementation("com.facebook.react:hermes-engine:+") {

+           exclude group:'com.facebook.fbjni'

+       }

-       def hermesPath = "../../node_modules/hermes-engine/android/";

-       debugImplementation files(hermesPath + "hermes-debug.aar")

-       releaseImplementation files(hermesPath + "hermes-release.aar")

    } else {

        implementation jscFlavor

    }

}
```

--------------------------------

### Define Updated React Element Tree

Source: https://reactnative.dev/architecture/render-pipeline

The resulting React Element Tree after a state update changes the background color of the first View to yellow.

```jsx
<View>

  <View

    style={{backgroundColor: 'yellow', height: 20, width: 20}}

  />

  <View

    style={{backgroundColor: 'blue', height: 20, width: 20}}

  />

</View>
```
Tokens:
Raw