How do I add multiple stickers that can have gestures？

[quirkybird]

Recently I just started to learn the react native, starting from the expo tutorials, Create your first app， I done everything well, but I want to add some functions, for example, multiple map, Of course, they have the same gestures, and there are difficulties in this. When I finished adding one tile, and then wanted to add the second one, the program completely stuck, I think it is the problem of adding gestures in the tile component, but I don't know how to solve it.

• Expo SDK version：52.0.20
• demo video（I was as helpless as the expression in the video）：

db42b6c53de2f5e245e84b8c5ec29c47.mp4

The relevant code is as follows:

EmojiSticker.tsx

import { type ImageSource } from 'expo-image';
import { memo } from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { Dimensions, StyleSheet } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

import { clamp } from '@/utils';

type Props = {
  imageSize: number;
  stickerSource: ImageSource;
};

const { width, height } = Dimensions.get('screen');

const EmojiSticker = memo(({ imageSize, stickerSource }: Props) => {
  const scaleImage = useSharedValue(imageSize);
  const startScale = useSharedValue(0);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const scale = Gesture.Pinch()
    .onStart(() => {
      startScale.value = scaleImage.value;
    })
    .onUpdate((e) => {
      const newScale = startScale.value * e.scale;
      const maxScale = Math.min(width / 2, height / 2);
      scaleImage.value = clamp(newScale, imageSize / 2, maxScale);
    })
    .runOnJS(true);

  const drag = Gesture.Pan().onChange((event) => {
    translateX.value += event.changeX;
    translateY.value += event.changeY;
  });

  const imageStyle = useAnimatedStyle(() => ({
    width: withSpring(scaleImage.value),
    height: withSpring(scaleImage.value),
  }));

  const containerStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));

  const composed = Gesture.Simultaneous(drag, scale);

  return (
    <GestureDetector gesture={composed}>
      <Animated.View style={[containerStyle, styles.imageContainer]}>
        <Animated.Image
          source={stickerSource}
          resizeMode="contain"
          style={[imageStyle, { width: imageSize, height: imageSize }]}
        />
      </Animated.View>
    </GestureDetector>
  );
});

const styles = StyleSheet.create({
  imageContainer: {
    position: 'absolute',
    top: '50%',
    left: '50%',
  },
});

export default EmojiSticker;

index.tsx

```typescript
import { View, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { useState, useRef } from 'react';
import { type ImageSource } from 'expo-image';
import * as MediaLibrary from 'expo-media-library';
import { captureRef } from 'react-native-view-shot';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import ImageViewer from '@/components/ImageViewer';
import Button from '@/components/Button';
import IconButton from '@/components/IconButton';
import CircleButton from '@/components/CircleButton';
import EmojiPicker from '@/components/EmojiPicker';
import EmojiList from '@/components/EmojiList';
import EmojiSticker from '@/components/EmojiSticker';

const PlaceholderImage = require('@/assets/images/background-image.png');

export default function Index() {
  const imageRef = useRef<View>(null);
  const [selectedImage, setSelectedImage] = useState<string | undefined>(
    undefined
  );
  const [showAppOptions, setShowAppOptions] = useState<boolean>(false);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [pickedEmojis, setPickedEmojis] = useState<ImageSource[]>([]);
  const [status, requestPermission] = MediaLibrary.usePermissions();
  if (status === null) {
    requestPermission();
  }

  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
      setShowAppOptions(true);
    } else {
      alert('You did not select any image.');
    }
  };


  function onReset() {
    setSelectedImage(undefined);
    setShowAppOptions(false);
    setPickedEmojis([]);
  }

  function onAddStiker() {
    setIsModalVisible(true);
  }

  function onModalClose() {
    setIsModalVisible(false);
  }

  async function onSaveImageAsync() {
    try {
      const localUri = await captureRef(imageRef, {
        quality: 1,
      });
      await MediaLibrary.saveToLibraryAsync(localUri);
      if (localUri) {
        alert('Saved!');
      }
    } catch (error) {
      alert(error);
    }
  }

  return (
    <View style={styles.container}>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <View style={styles.imageContainer}>
+          <View ref={imageRef} collapsable={false}>
+           <ImageViewer
+             imgSource={PlaceholderImage}
+              selectedImage={selectedImage}
+            />
+            {pickedEmojis.length > 0 && (
+              <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+                {pickedEmojis.map((emoji, index) => (
+                  <EmojiSticker
+                    imageSize={80}
+                    key={`sticker-${index}`}
+                    stickerSource={emoji}
+                  />
+               ))}
+              </View>
+            )}
+          </View>
+        </View>
+      </GestureHandlerRootView>
      {showAppOptions ? (
        <View style={styles.optionsContainer}>
          <View style={styles.optionsRow}>
            <IconButton icon="refresh" label="Reset" onPress={onReset} />
            <CircleButton onPress={onAddStiker} />
            <IconButton
              icon="save-alt"
              label="Save"
              onPress={onSaveImageAsync}
            />
          </View>
        </View>
      ) : (
        <View style={styles.footerContainer}>
          <Button
            theme="primary"
            label="Choose a photo"
            onPress={pickImageAsync}
          />
          <Button
            label="Use this photo"
            onPress={() => setShowAppOptions(true)}
          />
        </View>
      )}
      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        <EmojiList
+          onSelect={(emoji) => {
+            onModalClose();
+            setPickedEmojis((prev) => [...prev, emoji]);
+           console.log(pickedEmojis.length);
+          }}
+         selectedEmojis={pickedEmojis}
+         onCloseModal={onModalClose}
+       />
      </EmojiPicker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
  },
  footerContainer: {
    flex: 1 / 3,
    alignItems: 'center',
  },
  optionsContainer: {
    position: 'absolute',
    bottom: 80,
  },
  optionsRow: {
    alignItems: 'center',
    flexDirection: 'row',
  },
});