incorrect paths rendering

[doublelam]

Hi, I am facing a very strange issue, when I change the state of paths, the canvas renders them incorrectly.

here is the demo:
https://github.com/user-attachments/assets/31602b1c-95f9-4208-9bc2-00b9e2e9f2f7

and here is the code:

import { Text, SafeAreaView, StyleSheet, Button, View } from 'react-native';
import {useState, useCallback} from 'react';
import { Canvas, Path } from '@shopify/react-native-skia';
const initPath = new Array(10).fill('').map((p, i) => `M50 ${(i + 1) * 20} L300 ${(i + 1) * 20}`);
export default function App() {
  const [paths, setPaths] = useState(initPath);
  const onPress = useCallback(() => {
    setPaths(ps => ps.slice(0, -1))
  }, []);

  const onAdd = useCallback(() => {
    setPaths((ps) => {
      return ps.concat(`M50 ${(ps.length + 1) * 20} L300 ${(ps.length + 1) * 20}`);
    });
  }, []);
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>
        Paths not rendered correctly by set state
      </Text>
      <Text style={styles.paragraph}>
        Paths count: {paths.length}
      </Text>
      <Canvas style={{flex: 1}}>
        {
          paths.map(path => <Path 
            strokeWidth={10}
            strokeJoin="round"
            strokeCap="round"
            color="#222" 
            key={path} 
            style="stroke" 
            path={path} />)
        }
      </Canvas>
      <View style={{padding: 10, gap: 10}}>
      <Button onPress={onAdd} title="increase 1 path" />
      <Button onPress={onPress} title="decrease 1 path" />
      <Button onPress={() => setPaths(initPath)} title="reset" />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  
});

The weird part is that when I test it on Expo https://snack.expo.dev/@loom2023/react-native-skia-path , it works properly. I am not sure if it's my code issue or package issue, can you help?

[wcandillon]

My apologies but I couldn't spot the problem from the video recording?

[doublelam]

My apologies but I couldn't spot the problem from the video recording?

Hi, for example:

you can see that when I set the state to 4 paths, the canvas only renders 3 paths, and some times when I decrease it to 1 path, it still renders 2, it only happens in bare react native project, actually I am not sure if it's my project issue or skia issue because I can not reproduce it on Expo,

[doublelam]

@wcandillon Hi, I find that when comment/delete this.tick() in SkiaDomView, it works properly

[wcandillon]

yes I think this is a nice catch, thank you for investigating this, I should have a fix for it soon hopefully.

[wcandillon]

@doublelam thank you again for catching this, I hadn't realized such race condition was possible.

[github-actions]

🎉 This issue has been resolved in version 1.7.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀