How to create instagram story text feature?

[anovius]

How can I add multiple texts dynamically on an image canvas when the user finishes adding text?

1. Text should be moveable
2. Text should be able to resize by pinching or zooming
3. Delete text when goes to a specific area

This is the code currently I am using

`

const onAddTextPress = () => {
    setTexts([...texts,
        {
            text: text,
            x: widthPercentageToDP(100) / 2 - text.length * 4,
            y: heightPercentageToDP(100)/2,
            matrix: textMatrix,
            dimensions: rect(0, 0, widthPercentageToDP(100), heightPercentageToDP(100))
        }
    ])
    setActiveTool('')
    setText('')
}

---

  <Canvas ref={canvas} style={styles.photo}>
      <SKImage image={file} fit="cover" height={heightPercentageToDP(100)} width={widthPercentageToDP(100)} />
      


      {texts.map((t, index) => (
          <Group matrix={t.matrix} key={index}>
              <SKText x={t.x} y={t.y} text={t.text} font={defaultFont}/>
          </Group>
      ))}
      
  </Canvas>

{texts.map((t, index) => {
    <GestureHandler key={index} matrix={t.matrix} dimensions={t.dimensions} />
})}

---

Problem now I am facing is text is appearing on the screen but unable to move or pinch it.