Repository navigation
feat(馃): name the Android backing view explicitly - #574
Merged
Merged
Conversation
Same model as react-native-skia: the `opaque` prop was a shortcut to get a SurfaceView on Android, consumed nowhere else on native (the web view only painted a white background from it). It moves under `android` as a compositing hint, applied in place on whichever view backs the canvas, and the view itself is named by `android.backingView` (replacing `surfaceType`), with `TextureView` as the default whatever the opacity. - `android` is a discriminated union: a TextureView takes `opaque` (translucent by default), a SurfaceView takes `opaque` (opaque by default), `zOrderOnTop` and the new `zOrderMediaOverlay`, which composites it above the other SurfaceViews below the window; both z-order options apply in place on Android 11 and later. A HardwareBufferView takes no option: it always composites with alpha, and falls back to a TextureView below Android 10, with a warning in development. - Nothing derives the backing view from another prop any more, so the JS and Java rules collapse to reading `backingView`; the pure rules live in BackingViewKind. - On the web, `alphaMode` alone decides how the canvas composites, as in a browser: the white background `opaque` used to paint is gone. - The docs describe the model, including what a remount through a key costs (a frame or two off screen) and that keeping the canvas on screen through a swap is possible but needs per-release logic (#563). Verified on the Pixel 8 (Android 17) with the Android View Props diagnostic: opaque applies in place on both views, the on-top and media overlay z-orders move a mounted SurfaceView without a remount, and the HardwareBufferView composites with alpha; no warning, error or crash in logcat.
This was referenced Oct 18, 2026
|
馃帀 This PR is included in version 0.17.0 馃帀 The release is available on:
Your semantic-release bot 馃摝馃殌 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Mirror of react-native-skia's change, so both canvases take the same Android options.
opaquewas a shortcut to get aSurfaceViewon Android; on native it was consumed nowhere else, and on the web it only painted a white background. It moves underandroidas a compositing hint, and the backing view gets a name of its own.The model
androidis a discriminated union. ATextureViewtakesopaque(false by default). ASurfaceViewtakesopaque(true by default: a translucent one blends against black below the window),zOrderOnTopand the newzOrderMediaOverlay, which composites it above the otherSurfaceViews below the window; both z-orders apply in place on Android 11 and later and are read at mount before that. AHardwareBufferViewtakes no option, and falls back to aTextureViewbelow Android 10 with a warning in development.BackingViewKindholds the pure rules andCanvas.tsxmirrors them for the development warnings.alphaModealone decides how the canvas composites, as in a browser; the white background is gone.keycosts rather than claiming Android cannot hand a canvas over (fix(馃): keep a canvas on screen while it swaps its backing view in place聽#563 shows it can, at the price of per-release logic).Migration
The top-level
opaqueprop is gone (TypeScript flags it) andandroid.surfaceTypeisandroid.backingView. The default moves from an opaqueSurfaceViewto a translucentTextureView: a full-screen scene that wants the compositor fast path asks for it withandroid={{ backingView: "SurfaceView" }}. Per the discussion, this lands as a plain feature commit, not a major.Verification
opaqueapplies in place on both views, the on-top and media overlay z-orders move a mountedSurfaceViewwithout a remount, the hardware buffer view composites with alpha; no warning, error or crash in logcat. Screenshots of each state were checked.yarn tscandyarn lintin the package, the example and the docs app (the docs app's two pre-existingTS2698errors inTransparencyDemo.tsxare untouched), the Android build of the example, and the package's Jest suite against the Pixel 8 (44 suites, 222 tests).