Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the meaning of 'layout-only view removal' in react native [duplicate]

Tags:

react-native

React native exposes certain props on View like testID that are super useful for native testing, but have following note attached to them

This disables the 'layout-only view removal' optimization for this view!

After searching for a while I was not able to find information that describes what this optimisation is. Is it significant? If it viable to only set these tests id's in dev mode / dev target? i.e. they will be undefined otherwise?

like image 476
Ilja Avatar asked Nov 27 '18 18:11

Ilja


People also ask

What is layout in react native?

Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default, React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right.

What is the correct statement about view in react native?

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView , <div> , android.view , etc.

What is overflow in react native?

Introduction to React native overflow. Overflow is majorly a failure in while writing a code or developing a website or application. Overflow occurs when the input is too large to be stored.

What is aspect ratio in react native?

Use aspectRatio wherever you can and avoid grabbing the window width using the Dimensions API. aspectRatio can make your components better adapt to change and in turn make your UI more stable. There is one caveat - this doesn't (yet) work with react-native-web, so if you're using that, it's best to avoid it.


1 Answers

When RN creates the native views from the shadow nodes tree - it performs some optimizations. Views that do not actually show on screen (don't draw anything or just used in JSX to contain and layout their children) can be removed when constructing the native hierarchy. This is why they're called "layout-only" views.

As this warning suggests, a view with the testID prop will not be removed even if it's a "layout-only" view so it will actually be there when you're performing e2e tests.

Generally speaking, rendering a lot of views can cause performance issues, but using testID on some views won't make a noticeable difference in performance because:

  1. You probably don't have a lot of views with a testID
  2. Most of the views with a testID are probably not "layout-only" views so it makes no difference if you use this prop or not regarding the optimizations.

In case you do have "layout-only" views with a testID, it would be easier to move the testID to a more suitable view.

like image 185
Artal Avatar answered Sep 20 '22 23:09

Artal