View Flattening on iOS

[sammy-SC]

View Flattening on iOS

View Flattening was Android only optimisation to avoid deep layout trees. The new React Native renderer, with shared C++ core, brings this feature to iOS. This optimisation is automatic and does not require a setup. Understanding of this article is not needed to make use of View Flattening.

The React API is designed to be declarative and reusable through composition. This is great for
intuitive development but it leads to deep React Element Trees
where component affect the layout but don’t paint anything on the screen.
We call these types of components Layout-Only. Flatter view hierarchy has lower memory usage and faster drawing times.

Some requirements for a component to be Layout-Only:

• Pure <View />, not a subclass.
• No event listeners.
• nativeID is not defined.
• Is not accessible element.
• Full opacity.
• No background colour.
• Rest of the requirements

Common sources of Layout-Only components

Adding padding/margin to components

Let's take an example of component that shows image with a title and call it ImageWithTitle.
We would like to add some space between the component and the surrounding content.

function ImageWithTitle(props) {
    return (
        <View style={{padding: 10}}>
            <Image source={{uri: props.image}} />
            <Text>{props.title}</Text>
        </View>
    );
}

The top most <View />, which adds padding, doesn't paint anything to the screen. If we delete host view representing the top most <View />, it will not affect what is drawn on the screen. Framework applies padding to its children to make sure they are correctly positioned on the screen.

Components in a row

A common requirement is to place elements in a row or column.
For this example, we want to display names of two people with company name under the name, NameList.
To group person's name with company name, it has to be wrapped in a <View /> component to create new flex container.

<View style={{flexDirection:'row'}}>
    <View>
        <Text>Alice</Text>
        <Text>Company A</Text>
    </View>
    <View>
        <Text>Bob</Text>
        <Text>Company B</Text>
    </View>
</View>

There are three <View /> components. One is setting flexDirection: row and the other two group components into separate flex containers.
Neither of them paint anything to the screen.

Positioning components in a flat list item

For a more complex example, we are going to build an item in a flat list showing movie screening details.
The component, called Movie, will display name, genre, thumbnail, place and time of a screening.

Movie component

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View, Image} from 'react-native';

function Movie(props) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.movieInfo}>
        <View style={styles.thumbnail} />
        <View style={styles.movieNameAndGenre}>
          <Text>{props.title}</Text>
          <Text style={styles.subtitle}>{props.genre}</Text>
        </View>
      </View>
      <View style={styles.eventInfo}>
        <Text>{props.time}</Text>
        <Text>{props.place}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
    wrapper: { 
        padding: 10, 
        flexDirection: 'row', 
        alignItems: 'center',
    },
    subtitle: {
        color: 'grey',
    },
    movieNameAndGenre: {
        marginLeft: 10,
    },
    thumbnail: {
        width: 60,
        height: 60,
        backgroundColor: 'blue',
    },
    eventInfo: {
        marginLeft: 'auto',
    },
    movieInfo: {
        flexDirection: 'row', 
        alignItems:'center', 
    }
});

The following screenshot show what view hierarchy is painted without flattening. All views have red border to
make "Layout-Only" components visible.

The second screenshot shows what view hierarchy is painted with with flattening enabled. Four Layout-Only views were removed without affecting visual appearance.

All examples are available here.

RNTester

Here are screenshots of what the view hierarchy looks like in RNTester with and without view flattening.
This is closer to a real world app.

View hierarchy without flattening.

View hierarchy with flattening.

[kelset]

couple of thoughts:

1. can we merge this upstream into the docs, since there's already a dedicated view flattening page? https://reactnative.dev/architecture/view-flattening
2. is there any requirements for users of React Native to turn on view flattening? ex. do they need to add some flag somewhere? Do they need to be on a specific version of React Native? etc.

[sammy-SC]

1. The idea behind architecture overview was to be more of a high level overview and to be platform agnostic. This piece is to show what the new architecture brings and to put it into more specific terms (screenshots that show differences and code examples where you commonly run into deep view hierarchies). In this case, previously Android only feature to iOS. I will update it so it reflects that this had previously existed on Android the new architecture brings it to iOS.
2. Good question, let me clarify this in the post that this is automatic and happens under the hood.

@kelset let me know what you think.

[troZee]

I don't know why but the below links do not work on my end:

• https://github.com/reactwg/react-native-new-architecture/discussions/AwesomeApp/ImageWithTitle.tsx
• https://github.com/reactwg/react-native-new-architecture/discussions/AwesomeApp/MovieDetails.tsx
• https://github.com/reactwg/react-native-new-architecture/discussions/AwesomeApp/NameList.tsx

[kelset]

mmm I wonder if the links should be pointing to https://github.com/react-native-community/RNNewArchitectureApp/tree/view-flattening-ios

[sammy-SC]

thanks @kelset. You are right, they should be pointing to https://github.com/react-native-community/RNNewArchitectureApp/tree/view-flattening-ios.

I fixed the links.