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",
},
});
