How to implement GestureHandler on a state of array through map?

[anovius]

Goal

The goal is to achieve a dynamic GestureHandler on a state having multiple text values stored on a button press.

Problem

Currently, GestureHandler is not rendering on loop (map)

Code

`

          const [texts, setTexts] = useState([]);
          
          const onAddTextPress = () => {
              let x = widthPercentageToDP(100) / 2 - text.length * 4
              let y = heightPercentageToDP(100)/2
              setTexts([...texts,
                  {
                      text: text,
                      x: x,
                      y: y,
                      matrix: makeMutable(Skia.Matrix()),
                      dimensions: rect(x, y, width, height)
                  }
              ])
              setActiveTool('')
              setText('')
          }
          
          <GestureDetector gesture={pan}>
              <Canvas ref={canvas} style={styles.photo}>
                  <Group matrix={pictureMatrix}>
                      <SKImage image={file} fit="cover" height={heightPercentageToDP(100)} width={widthPercentageToDP(100)} />
                  </Group>
          
                  {texts.map((t, index) => (
                      <Group transform={[{ translateX: 32 }, { translateY: 200 }]}  key={index}>
                      <Group matrix={t.matrix}>
                          <SKText x={200} y={300} text={t.text} font={defaultFont}/>
                      </Group>
                      </Group>
                  ))}
                  
              </Canvas>
          </GestureDetector>
          
          {texts.map((t, index) => {
              <GestureHandler key={index} matrix={t.matrix} dimensions={t.dimensions} />
          })}

`

[anovius]

I have resolved this by making a matrix in the child component using useValue(Skia.Matrix()) hook and passing and setting up a state of an array of matrixes in the parent component. Here are some codes snippets that might help.

Canvas.jsx

`

      const [texts, setTexts] = useState([]);
      const [textMatrixes, setTextMatrixes] = useState([]);
      const [text, setText] = useState('');

      const addMatrixes = (mat) => {
          setTextMatrixes([...textMatrixes, mat]);
      }

      const onAddTextPress = () => {
          setTexts([...texts, {text}])
          setText('')
          setActiveTool('')
      }

      <Canvas ref={canvas} style={styles.photo}>
          {texts.map((t, index) => (
              <TextSticker font={defaultFont} text={t.text} addMatrixes={addMatrixes} />
          ))}
      </Canvas>

      {textMatrixes.map((mat, index) => (
          <GestureHandler matrix={mat} dimensions={TextStickerDimensions} key={index}/>
      ))}
      
      
       <TouchableOpacity onPress={onAddTextPress}>
            <View style={styles.miniButton}>
                <Text style={styles.miniButtonText}>Done</Text>
            </View>
        </TouchableOpacity>

`

TextSticker.jsx

`

        const matrix = useValue(Skia.Matrix())
      
        useEffect(() => {
          if(matrix){
            addMatrixes(matrix);
          }
        }, [matrix])
        
        
        <Group transform={[{ translateX: x }, { translateY: y }]}>
          <Group matrix={matrix}>
            <Group transform={[{ translateX: 15 }, { translateY: 12.5 }]}>
              <Text text={text} font={font} x={50} y={45} />
            </Group>
          </Group>
        </Group>

`

[Andromeda606]

Where do the x and y in TextSticker come from?