Image Scroll Zoom in React Native - image

Question

when creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list. This could be to showcase the content of the page. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs.
import React, { Component } from 'react';
import {
View,Text,StyleSheet,ScrollView,Image, Animated, Dimensions
} from 'react-native';
HEADER_MAX_HEIGHT = Dimensions.get("window").height*0.4;
HEADER_MIN_HEIGHT = 70;
PROFILE_IMAGE_MAX_HEIGHT = 80;
PROFILE_IMAGE_MIN_HEIGHT = 40;
const IMAGE_SCALE_MAX = 20;
const LABEL_HEADER_MARGIN = 48;
import FastImage, { FastImageProps } from 'react-native-fast-image';
const AnimFastImage = Animated.createAnimatedComponent(FastImage);
class App extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0),
pan: new Animated.ValueXY()
};
}
render() {
return (
<ScrollView style={{
flex: 1,
width: '100%',
height: '100%',
backgroundColor: 'white'
}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
contentContainerStyle={{ padding: 0 }}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.pan.y } } }],
{
useNativeDriver: false,
},
)}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="never"
scrollEventThrottle={1}
>
<AnimFastImage
animStyle={{
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [-100, 0],
extrapolate: 'clamp',
}),
},
{
scale: this.state.pan.y.interpolate({
inputRange: [-3000, 0],
outputRange: [IMAGE_SCALE_MAX, 1],
extrapolate: 'clamp',
}),
},
],
}}
source={{ uri: 'https://i.picsum.photos/id/1/400/400.jpg?hmac=lOytrN6lDOH_Yx7NwwGIaCtxp6pyuH2V4hD6Eac-VI0', priority: 'high' }}
style={styles.img}
resizeMode="cover"
/>
<Animated.View
style={{
paddingHorizontal: 16,
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [LABEL_HEADER_MARGIN * IMAGE_SCALE_MAX, -80],
extrapolate: 'clamp',
}),
},
],
}}>
<Text style={{ fontWeight: 'bold', fontSize: 20}}>
Trần thanh tung
</Text>
<View style={{ height: 700 }} />
</Animated.View>
</ScrollView>
)}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
img: {
backgroundColor: '#ccc',
width: '100%',
height: 350,
justifyContent: 'flex-end',
padding: 0,
},
});
But it doesn't work as I want it to. I want it to be like the user part of the telegram
what I want