Canvas not responding to colorScheme Hook on dark/light transition

[psquizzle]

I am trying to get the canvas to rerender on a transition between light and dark mode and can't get anything to work?

I have tried:

• Putting the components that need to be rerendered eg SkiaImage and BoxSkia within the body of the component
• Using useSharedContext hook
• trying to for rerender using ref.current.redraw() and ref.current.forceUpdate()

 <Canvas style={{ height: "100%", width: "100%" }} ref={ref} >
      <ContextBridge>

      <Group>{image && imageDark && (
          <SkiaImage
            image={theme === "light" ? image : imageDark}
            fit="contain"
            x={SkiaX}
            y={SkiaY}
            width={Info.mapWidth}
            height={Info.mapHeight}
          />
        )}</Group>
        {BoxSkia}
        <BackdropBlur blur={windowBlur} clip={roundedRect}>
          <Fill color="rgba(0, 0, 0, 1)" opacity={windowOpacity} />
          <Group>
            {bt && (
              <SkiaImage
                image={bt}
                fit="contain"
                x={padding}
                y={padding * 4}
                opacity={0}
                width={Info.mapUnitX * 3}
                height={Info.mapUnitX * 2}
              />
            )}
          </Group>
        </BackdropBlur>
        </ContextBridge>
      </Canvas> 

[chrfalch]

ref.current.redraw() is the correct way to programmatically rerender a Skia View. Remember that rerendering a Skia View through the redraw() method is not the same as rendering through React - it just passes a message down to the underlying native views and ask them to repaint the Skia canvas. To rerender the component you'll need to update state or props like in regular React.

In addition if a Skia component has a Skia Value as one of its properties, any change to this value will cause the Skia View to rerender as well.

[psquizzle]

Nothing seems to change the image from 'light' to 'dark'. Apart from other rerender actions such as scrolling my animated gesture handler. I even tried conditionally rendering two separate Skia canvases. The change still doesn't occur until another animated event changes something else.

[wcandillon]

@psquizzle ContextBridge is broken in the latest release, we have a PR open for it (#947), we will ship it soon. In the meantime we can recommend to rewrite your code without the use of context bridge or use your own implementation as seen in #947 or use something like https://www.npmjs.com/package/its-fine (which we might end-up using ourselves). Stay tuned.

…

On Thu, Jan 12, 2023 at 6:10 PM psquizzle ***@***.***> wrote: Nothing seems to change the image from 'light' to 'dark'. Apart from other rerender actions such as scrolling my animated gesture handler. I even tried conditionally rendering two separate Skia canvases. The change still doesn't occur until another animated event changes something else. — Reply to this email directly, view it on GitHub <#1269 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVU3PRRAYBAQYAC4V2DWSA3GRANCNFSM6AAAAAATVWT2QE> . You are receiving this because you are subscribed to this thread.Message ID: <Shopify/react-native-skia/repo-discussions/1269/comments/4669895@ github.com>

[wcandillon]

if you look at the diff in #1281 you can see how to access RN contextes from skia using its-fine.

[psquizzle]

using its-fine Context Bridge doesn't seem to solve the problem in my use case. The changes still don't occur until I scroll which animates SkiaX und SkiaY in the code sample provided. Only then does the theme change take effect. All react-native Views and Text components switch instantly on the theme change. I have tried using const theme = useColorScheme() directly and also passing it through a context, but neither makes any difference. Only the animation causes the change.

[ealmiladi]

Possibly related to #1288?

[chrfalch]

React components "react" to the theme change immediately, that is true. The "problem" with RN Skia is that on iOS we're rendering using Metal which is not that happy about being called when the app is not in the foreground - the fix to #1288 helps a bit, but it is still not instant in the preview in the task switcher.