App Crashes When Scrolling with FlatList

[ZThwood]

Description

While using the React Native Skia library, it was observed that the application crashes abruptly when scrolling with a FlatList component on the screen. This crash seems to be caused by issues within the Skia drawing engine or library itself, as the problem does not occur when Skia library is not used, and FlatList scrolling works fine.

Version

0.1.237

React Native Skia Version: 0.1.237 React Native Version: 0.69.12 Operating System: Android 8.0 Device Model: MI 5

Steps to reproduce

step

1. Use the React Native Skia library in the application.
2. Create a screen containing a FlatList component.
3. Launch the application and attempt to scroll within the FlatList.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {Text, FlatList, SafeAreaView, View} from 'react-native';
import {Canvas, Blur, RoundedRect} from '@shopify/react-native-skia';
const testCardNum = 200;
const DEFAULT_SHOW_AMOUNT = 30;

let array = [];

for (let i = 0; i < testCardNum; i++) {
  let obj = {
    id: i,
    name: 'test name ' + i,
  };
  array.push(obj);
}

const BlurImageFilter = () => {
  return (
    <Canvas style={{width: 158, height: 158}}>
      <RoundedRect
        x={0}
        y={0}
        width={256}
        height={256}
        r={25}
        color="lightblue"
      />
      <Blur blur={4} />
    </Canvas>
  );
};
const App = () => {
  const [showAmount, sethSowAmount] = useState(DEFAULT_SHOW_AMOUNT);

  const data = array.slice(0, showAmount);

  const LoadMoreData = () => {
    if (showAmount > array.length) {
      return;
    }
    sethSowAmount(num => {
      const result = (num += DEFAULT_SHOW_AMOUNT);
      return result;
    });
  };

  const renderItem = ({item, index}) => {
    return (
      <View>
        <BlurImageFilter />
        <Text style={{fontSize: 16, color: '#FDFDFD', marginTop: 5}}>
          {item.name}
        </Text>
      </View>
    );
  };
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: 'orange',
      }}>
      <FlatList
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          width: '100%',
          marginTop: 20,
          paddingBottom: 120,
          flexDirection: 'column',
        }}
        numColumns={4}
        data={data}
        renderItem={renderItem}
        onEndReached={LoadMoreData}
      />
    </SafeAreaView>
  );
};

export default App;

Snack, code example, screenshot, or link to a repository

code example:
https://github.com/ZThwood/rn72VersionTest/tree/main

[ZThwood]

App Crashes info:

[wcandillon]

@ZThwood sorry for the late reply here. Is this still happening? And You are 100% sure that the crash is Skia related? Do you get more information if you run the example in debug mode?