Replies: 3 comments 4 replies
-
couple of thoughts:
|
Beta Was this translation helpful? Give feedback.
1 reply
-
I don't know why but the below links do not work on my end: |
Beta Was this translation helpful? Give feedback.
2 replies
-
What is a way to disable view flattening if it creates errors? According to the docs, collapsable={false} only works for Android. Also, does it work for only the current component or also the children? |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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:
<View />
, not a subclass.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.
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.There are three
<View />
components. One is settingflexDirection: 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
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.
Beta Was this translation helpful? Give feedback.
All reactions