chore(📚): Remove references of the opaque property in the documentation (#3157)

Author: wcandillon

apps/docs/docs/canvas/canvas.md

@@ -13,7 +13,6 @@ Behind the scenes, it is using its own React renderer.
 |:-----|:---------|:-----------------|
 | style?   | `ViewStyle` | View style |
 | ref?   | `Ref<SkiaView>` | Reference to the `SkiaView` object |
-| opaque?   | `boolean` | By default, the canvas is transparent but on Android, you can make it opaque to improve performance. |
 | onSize? | `SharedValue<Size>` | Reanimated value to which the canvas size will be assigned  (see [canvas size](/docs/animations/hooks#canvas-size)) |
 | onLayout? | `NativeEvent<LayoutEvent>` | Invoked on mount and on layout changes (see [onLayout](https://reactnative.dev/docs/view#onlayout)) |
 

apps/example/src/Examples/Breathe/Breathe.tsx

@@ -68,7 +68,7 @@ export const Breathe = () => {
 
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={styles.container} testID="breathe-canvas" opaque>
+      <Canvas style={styles.container} testID="breathe-canvas">
         <Fill color="rgb(36,43,56)" />
         <Group origin={center} transform={transform} blendMode="screen">
           <BlurMask style="solid" blur={40} />

apps/example/src/Examples/Breathe/TestReconciller.tsx

@@ -79,7 +79,7 @@ export const Breathe = () => {
         <Button onPress={add} title="add" />
         <Button onPress={remove} title="remove" />
       </View>
-      <Canvas style={styles.container} opaque>
+      <Canvas style={styles.container}>
         <Fill color="rgb(36,43,56)" />
         <Group origin={center} transform={transform} blendMode="screen">
           <BlurMask style="solid" blur={40} />

apps/example/src/Examples/Chat/ChatScreen/ChatScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Animated, {
   runOnUI,
   useAnimatedScrollHandler,
@@ -170,7 +170,7 @@ function OffscreenCanvas({ render }: CanvasProps) {
   const [texture] = useOffscreenCanvas(render);
 
   return (
-    <Canvas opaque={Platform.OS === "android"} style={StyleSheet.absoluteFill}>
+    <Canvas style={StyleSheet.absoluteFill}>
       <Image image={texture} width={WINDOW_WIDTH} height={WINDOW_HEIGHT} />
     </Canvas>
   );

apps/example/src/Examples/Glassmorphism/Glassmorphism.tsx

@@ -40,7 +40,7 @@ export const Glassmorphism = () => {
   );
 
   return (
-    <Canvas style={{ flex: 1 }} opaque>
+    <Canvas style={{ flex: 1 }}>
       <Fill color="black" />
       <Circle c={c} r={radius}>
         <LinearGradient

apps/example/src/Examples/Matrix/Matrix.tsx

@@ -41,7 +41,7 @@ export const Matrix = () => {
   }
   const symbols = font.getGlyphIDs("abcdefghijklmnopqrstuvwxyz");
   return (
-    <Canvas style={{ flex: 1 }} opaque>
+    <Canvas style={{ flex: 1 }}>
       <Fill color="black" />
       <Group>
         <BlurMask blur={4} style="solid" />

apps/example/src/Examples/Severance/Severance.tsx

@@ -29,7 +29,7 @@ export const Severance = () => {
   return (
     <View style={{ flex: 1 }}>
       <GestureDetector gesture={gesture}>
-        <Canvas style={{ flex: 1 }} opaque>
+        <Canvas style={{ flex: 1 }}>
           <CRT>
             <Group>
               <Fill color={BG} />

apps/example/src/Examples/Stickers/Stickers.tsx

@@ -24,7 +24,7 @@ export const Stickers = () => {
   }
   return (
     <View>
-      <Canvas style={{ width, height }} opaque>
+      <Canvas style={{ width, height }}>
         <Picture matrix={pictureMatrix} image={image} />
         <HelloSticker matrix={helloMatrix} />
         <LocationSticker font={font} matrix={locationMatrix} />

apps/example/src/Examples/Video/Video.tsx

@@ -37,7 +37,7 @@ export const Video = () => {
         style={{ flex: 1 }}
         onPress={() => (paused.value = !paused.value)}
       >
-        <Canvas style={{ flex: 1 }} opaque>
+        <Canvas style={{ flex: 1 }}>
           <Fill>
             <ImageShader
               image={currentFrame}