fix(🤖): fix android warmup bug (#3565)

Author: wcandillon

apps/docs/docs/canvas/canvas.md

@@ -14,6 +14,7 @@ Behind the scenes, it is using its own React renderer.
 | style?   | `ViewStyle` | View style |
 | ref?   | `Ref<SkiaView>` | Reference to the `SkiaView` object |
 | onSize? | `SharedValue<Size>` | Reanimated value to which the canvas size will be assigned  (see [canvas size](#canvas-size)) |
+| androidWarmup? | `boolean` | Draw the first frame directly on the Android compositor. Use it for static icons or fully opaque drawings—animated or translucent canvases can misrender, so it remains opt-in. |
 
 ## Canvas size
 
@@ -124,4 +125,4 @@ export const Demo = () => {
 
 The Canvas component supports the same properties as a View component including its [accessibility properties](https://reactnative.dev/docs/accessibility#accessible).
 You can make elements inside the canvas accessible as well by overlaying views on top of your canvas.
-This is the same recipe used for [applying gestures on specific canvas elements](https://shopify.github.io/react-native-skia/docs/animations/gestures/#element-tracking).
+This is the same recipe used for [applying gestures on specific canvas elements](https://shopify.github.io/react-native-skia/docs/animations/gestures/#element-tracking).

apps/example/src/Examples/API/FirstFrame.tsx

@@ -1,11 +1,24 @@
 import React, { useState, useEffect } from "react";
-import { Button, StyleSheet, Text, View } from "react-native";
+import {
+  Button,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import {
   Canvas,
   Circle,
   Skia,
   SkiaPictureView,
 } from "@shopify/react-native-skia";
+import { ScrollView } from "react-native-gesture-handler";
+
+import { AnimationWithTouchHandler } from "../Reanimated/AnimationWithTouchHandler";
+
+import type { Routes } from "./Routes";
 
 const red = Skia.PictureRecorder();
 const canvas = red.beginRecording(Skia.XYWHRect(0, 0, 200, 200));
@@ -15,35 +28,60 @@ canvas.drawCircle(100, 100, 50, paint);
 const picture = red.finishRecordingAsPicture();
 
 export const FirstFrame = () => {
+  const { width } = useWindowDimensions();
   const [count, setCount] = useState(0);
   const [isRunning, setIsRunning] = useState(true);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<Routes, "FirstFrame">>();
 
   useEffect(() => {
     if (isRunning) {
       const interval = setInterval(() => {
         setCount((value) => value + 1);
-      }, 50);
+      }, 200);
 
       return () => clearInterval(interval);
     }
     return undefined;
   }, [isRunning]);
 
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+        <Button
+          onPress={() => setIsRunning((prev) => !prev)}
+          title={isRunning ? "PAUSE" : "START"}
+        />
+        <Text>{count}</Text>
+        <SkiaPictureView
+          key={`picture-${count}`}
+          picture={picture}
+          style={styles.canvas}
+          androidWarmup
+        ></SkiaPictureView>
+        <Canvas style={styles.canvas} key={`canvas-${count}`} androidWarmup>
+          <Circle cx={100} cy={100} r={50} color="red" />
+        </Canvas>
+        <View style={{ width, height: 100 }}>
+          <AnimationWithTouchHandler />
+        </View>
+        <Button
+          title="Go to empty screen"
+          onPress={() => navigation.navigate("FirstFrameEmpty")}
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+export const FirstFrameEmpty = () => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<Routes, "FirstFrameEmpty">>();
+
   return (
     <View style={styles.container}>
-      <Button
-        onPress={() => setIsRunning((prev) => !prev)}
-        title={isRunning ? "PAUSE" : "START"}
-      />
-      <Text>{count}</Text>
-      <SkiaPictureView
-        key={`picture-${count}`}
-        picture={picture}
-        style={styles.canvas}
-      ></SkiaPictureView>
-      <Canvas style={styles.canvas} key={`canvas-${count}`}>
-        <Circle cx={100} cy={100} r={50} color="red" />
-      </Canvas>
+      <Text>Empty screen</Text>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
 };

apps/example/src/Examples/API/Icons/index.tsx

@@ -74,7 +74,7 @@ interface IconProps {
 const style = { width: 48, height: 48 };
 
 const Icon = ({ icon }: IconProps) => {
-  return <SkiaPictureView picture={icon} style={style} />;
+  return <SkiaPictureView picture={icon} style={style} androidWarmup />;
 };
 
 type Props = { color: string };
@@ -96,7 +96,7 @@ const Screen: React.FC<Props> = ({ color }) => {
         <Icon icon={stackExchange} />
         <Icon icon={overflow} />
         <Text>React Native Skia Canvas</Text>
-        <Canvas style={{ width: 50, height: 50 }}>
+        <Canvas style={{ width: 50, height: 50 }} androidWarmup>
           <Rect x={0} y={0} width={50} height={50} color={color} />
         </Canvas>
       </View>

apps/example/src/Examples/API/Routes.ts

@@ -33,4 +33,5 @@ export type Routes = {
   StressTest3: undefined;
   StressTest4: undefined;
   FirstFrame: undefined;
+  FirstFrameEmpty: undefined;
 };

apps/example/src/Examples/API/index.tsx

@@ -35,7 +35,7 @@ import { StressTest } from "./StressTest";
 import { StressTest2 } from "./StressTest2";
 import { StressTest3 } from "./StressTest3";
 import { StressTest4 } from "./StressTest4";
-import { FirstFrame } from "./FirstFrame";
+import { FirstFrame, FirstFrameEmpty } from "./FirstFrame";
 import { ZIndexExample } from "./ZIndex";
 
 const Stack = createNativeStackNavigator<Routes>();
@@ -282,6 +282,13 @@ export const API = () => {
           title: "🎬 First Frame",
         }}
       />
+      <Stack.Screen
+        name="FirstFrameEmpty"
+        component={FirstFrameEmpty}
+        options={{
+          title: "⬜️ Empty Screen",
+        }}
+      />
     </Stack.Navigator>
   );
 };

apps/example/src/Examples/Reanimated/AnimationWithTouchHandler.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, useWindowDimensions } from "react-native";
-import { Canvas, Circle, Fill } from "@shopify/react-native-skia";
+import { Canvas, Circle } from "@shopify/react-native-skia";
 import { GestureDetector, Gesture } from "react-native-gesture-handler";
 import { useSharedValue, withDecay } from "react-native-reanimated";
 
@@ -28,7 +28,6 @@ export const AnimationWithTouchHandler = () => {
     <AnimationDemo title={"Decay animation with touch handler"}>
       <GestureDetector gesture={gesture}>
         <Canvas style={styles.canvas}>
-          <Fill color="white" />
           <Circle cx={translateX} cy={40} r={20} color="#3E3E" />
           <Circle cx={translateX} cy={40} r={15} color="#AEAE" />
         </Canvas>

packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureView.java

@@ -4,6 +4,9 @@
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Paint;
+import android.graphics.PorterDuff;
+import android.graphics.SurfaceTexture;
+import android.view.Surface;
 
 import com.facebook.jni.HybridData;
 import com.facebook.jni.annotations.DoNotStrip;
@@ -14,17 +17,17 @@ public class SkiaPictureView extends SkiaBaseView {
     private HybridData mHybridData;
     private Paint paint = new Paint();
 
-    private boolean coldStart = false;
+    private boolean androidWarmup = false;
 
     public SkiaPictureView(Context context) {
         super(context);
         RNSkiaModule skiaModule = ((ReactContext) context).getNativeModule(RNSkiaModule.class);
         mHybridData = initHybrid(skiaModule.getSkiaManager());
     }
 
-    public void setColdStart(boolean coldStart) {
-        this.coldStart = coldStart;
-        setWillNotDraw(coldStart);
+    public void setAndroidWarmup(boolean androidWarmup) {
+        this.androidWarmup = androidWarmup;
+        setWillNotDraw(!androidWarmup);
     }
 
     @Override
@@ -37,9 +40,9 @@ protected void finalize() throws Throwable {
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
 
-        // Skip the warming up feature if coldStart is true or running on software renderer
-        if (coldStart) {
-            return; // Skip warmup on cold start or software rendering
+        // Skip the warming up feature if it is disabled or already cleared.
+        if (!androidWarmup) {
+            return;
         }
 
         // Get the view dimensions
@@ -79,4 +82,24 @@ protected void onDraw(Canvas canvas) {
     protected native void unregisterView();
 
     protected native int[] getBitmap(int width, int height);
+
+    @Override
+    public void onSurfaceTextureCreated(SurfaceTexture surface, int width, int height) {
+        super.onSurfaceTextureCreated(surface, width, height);
+    }
+
+    @Override
+    public void onSurfaceTextureChanged(SurfaceTexture surface, int width, int height) {
+        super.onSurfaceTextureChanged(surface, width, height);
+    }
+
+    @Override
+    public void onSurfaceCreated(Surface surface, int width, int height) {
+        super.onSurfaceCreated(surface, width, height);
+    }
+
+    @Override
+    public void onSurfaceChanged(Surface surface, int width, int height) {
+        super.onSurfaceChanged(surface, width, height);
+    }
 }

packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureViewManager.java

@@ -38,7 +38,7 @@ public void setColorSpace(SkiaPictureView view, @Nullable String value) {
     }
 
     @Override
-    public void setColdStart(SkiaPictureView view, boolean value) {
-        view.setColdStart(value);
+    public void setAndroidWarmup(SkiaPictureView view, boolean value) {
+        view.setAndroidWarmup(value);
     }
-}
+}

packages/skia/android/src/paper/java/com/facebook/react/viewmanagers/SkiaPictureViewManagerDelegate.java

@@ -31,8 +31,8 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "colorSpace":
         mViewManager.setColorSpace(view, value == null ? null : (String) value);
         break;
-      case "coldStart":
-        mViewManager.setColdStart(view, value != null && (boolean) value);
+      case "androidWarmup":
+        mViewManager.setAndroidWarmup(view, value != null && (boolean) value);
         break;
       default:
         super.setProperty(view, propName, value);

packages/skia/android/src/paper/java/com/facebook/react/viewmanagers/SkiaPictureViewManagerInterface.java

@@ -18,5 +18,5 @@ public interface SkiaPictureViewManagerInterface<T extends View> {
   void setDebug(T view, boolean value);
   void setOpaque(T view, boolean value);
   void setColorSpace(SkiaPictureView view, @Nullable String value);
-  void setColdStart(T view, boolean value);
+  void setAndroidWarmup(T view, boolean value);
 }