View Props

View Props

View Accessibility and Performance Props

Beyond style, View props fall into three groups. Identification: testID for end-to-end tests, nativeID (or id) for native code and aria-labelledby. Touch: hitSlop extends the touchable area; pointerEvents ('auto', 'none', 'box-none', 'box-only') decides what can be touched. Accessibility: accessible groups a subtree into one screen-reader element, and role and aria-* take precedence over the older accessibility* props.

The performance props exist because the renderer creates as few native views as it can: a View that only arranges its children is layout-only and is removed from the native hierarchy. Dump the native views of the running BookCards screen to watch this:

Listing the native views of the running screenShell

adb -s emulator-5554 shell dumpsys activity top \
  | grep -E 'react\.views|safeareacontext' \
  | sed -E -e 's/com\.facebook\.react\.views\.[a-z]+\.//' \
      -e 's/com\.th3rdwave\.safeareacontext\.//' -e 's/\{[0-9a-f]+ /{/'

Output

                    SafeAreaView{V.E...... ........ 0,0-1080,2400 #da}
                      ReactViewGroup{V.E...... ........ 42,174-1038,458 #4c}
                      ReactViewGroup{V.E...... ........ 74,206-221,426 #32}
                      ReactTextView{V.ED..... ........ 252,206-1007,267 #36}
                      ReactTextView{V.ED..... ........ 252,267-1007,318 #3a}
                      ReactTextView{V.ED..... ........ 252,376-369,427 #40}
                      ReactTextView{V.ED..... ........ 912,376-1006,427 #46}
...

The first card's text column and price row, which only lay out, are gone, and the card and cover are flat siblings of the four texts. Made one accessible element (accessible, role="button", an aria-label) with collapsable={false} on the column, the same card dumps as focusable (VFE), holding its cover and column, and the texts sit inside the column. Use collapsable={false} only when native code needs a real view to measure or animate. renderToHardwareTextureAndroid and shouldRasterizeIOS cache a static subtree as a bitmap during an animation; needsOffscreenAlphaCompositing fixes colors of translucent overlapping children at the cost of an offscreen pass.

MENU