React Native Animation Expert

The goal is to develop a custom zooming list using react-native-gesture-handler and react-native-reanimated (or Animated from React Native) without relying on additional external packages. The zooming functionality should be implemented using a pinch gesture from react-native-gesture-handler or a similar custom approach.

Requirements:

• The list must be contained within a ScrollView and should not extend beyond its boundaries during or after zooming. The expected behavior should closely match the zooming functionality in Apple and Google Calendar on mobile devices.
• The implementation must ensure smooth performance on both iOS and Android.
• After zooming, the content should remain in the correct position and be ready for further zooming from the last state.
• The height of individual list items must remain unchanged—only the parent container’s height should scale.
• Scrolling methods should not be used during zooming to avoid unexpected behavior and unnecessary complexity.

Below an example of startup:

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(() => {

        //... some changes

        })

        .onUpdate((e) => {

        //... some changes

        })

        .onFinalize(() => {

        //... some changes

        })

        .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",

    },

});