Эксперт по анимации React Native

Цель состоит в том, чтобы разработать пользовательский список с возможностью масштабирования, используя react-native-gesture-handler и react-native-reanimated (или Animated из React Native), не полагаясь на дополнительные внешние пакеты. Функциональность масштабирования должна быть реализована с использованием жеста сжатия из react-native-gesture-handler или аналогичного пользовательского подхода.

Требования:

• Список должен находиться внутри ScrollView и не должен выходить за его пределы во время или после масштабирования. Ожидаемое поведение должно максимально соответствовать функциональности масштабирования в Apple и Google Calendar на мобильных устройствах.
• Реализация должна обеспечивать плавную работу как на iOS, так и на Android.
• После масштабирования содержимое должно оставаться в правильном положении и быть готовым к дальнейшему масштабированию из последнего состояния.
• Высота отдельных элементов списка должна оставаться неизменной — только высота родительского контейнера должна изменяться.
• Методы прокрутки не должны использоваться во время масштабирования, чтобы избежать неожиданного поведения и ненужной сложности.

Ниже приведен пример запуска:

import React from "react";

import { View, ScrollView, Text, StyleSheet, Dimensions } from "react-native";

import {

    GestureHandlerRootView,

    GestureDetector,

    Gesture,

} from "react-native-gesture-handler";

const elementHeight = 50;

const list = Array.from({length: 50});

export default function PinchToZoomList() {

    const pinchRef = useRef(Gesture.Pinch())

    const pinchGesture = Gesture.Pinch()

        .onBegin(() => {

        //... некоторые изменения

        })

        .onUpdate((e) => {

        //... некоторые изменения

        })

        .onFinalize(() => {

        //... некоторые изменения

        })

        .runOnJS(true)

        .withRef(pinchRef);

    return (

        <GestureHandlerRootView>

            <GestureDetector gesture={pinchGesture}>

                <ScrollView simultaneousHandlers={pinchRef}>

                    {list.map((_, index) => (

                        <View key={index} style={styles.item}>

                            <Text>{index}</Text>

                        </View>

                    ))}

                </ScrollView>

            </GestureDetector>

        </GestureHandlerRootView>

    );

}

const styles = StyleSheet.create({

    item: {

        height: elementHeight,

        justifyContent: "center",

        alignItems: "center",

        borderBottomWidth: 1,

        borderColor: "#ccc",

    },

});