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?
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.
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.
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.
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.
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:
testID
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With