Crash when a <Drawing /> component is unmounted / re-mounted

[RCNNT-Industries]

Hello people!

I've got a hard time to make a reproducible demo of this, but I get a crash when a Drawing gets mounted, or possibly unmounted.

The results is this iOS simulator stacktrace:

Thread 12 Crashed::  Dispatch queue: com.apple.network.connections
0   libxpc.dylib                  	       0x1800a7ba8 _xpc_serializer_cleanup.cold.1 + 28
1   libxpc.dylib                  	       0x180094418 _xpc_serializer_cleanup + 176
2   libxpc.dylib                  	       0x18009bbf4 _xpc_pipe_mach_msg + 216
3   libxpc.dylib                  	       0x18009b54c _xpc_send_serializer + 84
4   libxpc.dylib                  	       0x18009b330 _xpc_pipe_simpleroutine + 124
5   libsystem_trace.dylib         	       0x180065be0 ___os_activity_stream_reflect_block_invoke_3 + 36
6   libdispatch.dylib             	       0x180134708 _dispatch_client_callout + 16
7   libdispatch.dylib             	       0x180138644 _dispatch_block_invoke_direct + 376
8   libdispatch.dylib             	       0x1801384bc dispatch_block_perform + 108
9   libsystem_trace.dylib         	       0x18006559c _os_activity_stream_reflect + 668
10  libsystem_trace.dylib         	       0x180073470 _os_log_impl_stream + 516
11  libsystem_trace.dylib         	       0x180072f70 _os_log_impl_flatten_and_send + 6924
12  libsystem_trace.dylib         	       0x18007144c _os_log + 148
13  libsystem_trace.dylib         	       0x180073b50 _os_log_impl + 16
14  libboringssl.dylib            	       0x184ad77a4 boringssl_context_evaluate_trust_async + 872
15  libboringssl.dylib            	       0x184ad1144 boringssl_context_certificate_verify_callback + 620
16  libboringssl.dylib            	       0x184af2258 bssl::ssl_verify_peer_cert(bssl::SSL_HANDSHAKE*) + 368
17  libboringssl.dylib            	       0x184aa4474 bssl::tls13_client_handshake(bssl::SSL_HANDSHAKE*) + 1352
18  libboringssl.dylib            	       0x184ae803c bssl::ssl_client_handshake(bssl::SSL_HANDSHAKE*) + 2484
19  libboringssl.dylib            	       0x184af2af0 bssl::ssl_run_handshake(bssl::SSL_HANDSHAKE*, bool*) + 360
20  libboringssl.dylib            	       0x184abf16c SSL_do_handshake + 76
21  libboringssl.dylib            	       0x184a72bf0 boringssl_session_handshake_continue + 104
22  libboringssl.dylib            	       0x184a7b5c4 nw_protocol_boringssl_handshake_negotiate + 116
23  libboringssl.dylib            	       0x184a7c5a4 nw_boringssl_read + 3108
24  libboringssl.dylib            	       0x184a7cab8 nw_protocol_boringssl_input_available + 320
25  Network                       	       0x1854a9654 nw_socket_update_input_source(void*) + 176
26  libdispatch.dylib             	       0x180134708 _dispatch_client_callout + 16
27  libdispatch.dylib             	       0x180138018 _dispatch_continuation_pop + 644
28  libdispatch.dylib             	       0x18014d0d4 _dispatch_source_invoke + 1568
29  libdispatch.dylib             	       0x18013e788 _dispatch_workloop_invoke + 2024
30  libdispatch.dylib             	       0x180149608 _dispatch_workloop_worker_thread + 768
31  libsystem_pthread.dylib       	       0x1b1834878 _pthread_wqthread + 284
32  libsystem_pthread.dylib       	       0x1b183363c start_wqthread + 8

Attempting to update to the next Expo SDK (49), and porting to Reanimated 3, so there are a fair amount of changes in my code 😅
I'm using Reanimated 3 useSharedValue instead of Skias useValue inside 10-ish <Drawing />, perhaps that's an issue?

The Skia bit is a custom interactive graph with virtualized scrolling, rendering inside a bunch of gesture handlers. The data lives JS-side in redux, but gets useSharedValue'd into a simplified array, then another smaller one that's dependent on the scroll (the virtualized bit).

If I remove the Skia Drawing bits, then it doesn't crash at all, so it feels like that's the culprit. Any ideas? 😅

[wcandillon]

Drawing is a special component because it calls back into the JS thread, any change you can rewrite your code to not use it? Let us know what you are trying to achieve here.

[wcandillon]

if by use drawing you mean using the <Drawing /> component, we expect the performance hit to be substantial.
I really think there is a way to structure the code for such example where the performance will be awesome even on a low-end device. There might be some advanced optimisations that would need to be done but not using <Drawing /> would be 1.

looks good by way ;-)

[RCNNT-Industries]

I'll give it a go (it's gonna take a while though). Should I mainly be using Reanimated3s useSharedValue or Skias own useValue?

[wcandillon]

I would recommend to only use Reanimated 3 and <Canvas> components except Drawing then everything will be nicely on the UI thread

[RCNNT-Industries]

There is something fundamental I'm not getting I think 😅

If I put my graph data from React into useSharedValue, then how do I dynamically create the <Canvas> content in React?

On the other hand, if I just create the <Canvas> content in React, how do I handle the scrolling that do live on the UI-thread?

––––

This is a bit simplified — but let's pretend it's 100k entries and I want to let Skia render only what should be on screen.

At some point I need to shorten the JS-land data from 100k down to say 10 — should I just let the gesture recognizer call back to JS-land and do it all there?
Or can I somehow from reanimated shared values tell Skia what to render? (and how is that done?)

function ExampleScrollableGraph({reduxGraphData}) {

const scroll  = useSharedValue(0)
const allData = useSharedValue([]);
const screenWidth = useSharedValue(0);
const visibleData = useDerivedValue(() => {
   start = calcStart(scroll.value)
   end = start + int(screenWidth.value / 50) + 1;
   return allData.value.slice(start, end);
});

useEffect(() => {
   allData.value = reduxGraphData;
}, [allData, reduxGraphData])

return (
   <GestureHandler scroll={scroll}>
      <Chart data={visibleData} scroll={scroll} />
      <Canvas transformX={scroll % 50}>
         { 
           allData.value.map(row => 
             <Group>
              <Rect stuff here />
             </Group>
           )  
         }
      </Canvas>
   </GestureHandler>
);
}

Thanks for your patience,
E

[wcandillon]

There is a way you could have dynamic drawing while staying on the animation thread by using the Picture component: https://shopify.github.io/react-native-skia/docs/pictures. However you probably don't need that. Creating a new render when you drawing elements are needed is probably the best solution.