React Native Vertical Slider - react-native

Question

I am Tring to make a screen in react native in which height of upper view is resizable via dragging from the bottom.enter image description here
Size of (1) increases on dragging (2)
So far I tried two approaches
1. PanResponder
const Chat = (props) => {
const orders = [
//Some Array
]
const Height = Dimensions.get('window').height
const boxHeight = useRef(new Animated.Value(Height / 3)).current
const panResponder = useRef(PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
const nextValue = boxHeight+gestureState.dy
let newVal = nextValue >= maxHeight?maxHeight:nextValue
newVal = newVal <= minHeight?minHeight:newVal
boxHeight.setValue(newVal)
},
}
)).current;
return (
<Container>
<Animated.View style={[{ borderBottomColor: '#ccc', borderBottomWidth: 3 }, { height:boxHeight }]}>
<FlatList
data={orders}
renderItem={({ item, index }) => <List item={item} index={index} />}
/>
<View {...panResponder.panHandlers} style={{backgroundColor:'#000',height:20}}></View >
</Animated.View>
<ChatScreen />
</Container>
)
}
Pan-gesture- handler
const Chat = (props) => {
const orders = [
//some array
]
const Height = Dimensions.get('window').height
const boxHeight = useRef(new Animated.Value(Height / 3)).current
const minHeight = 10
const maxHeight = Height - 100
const onPanGestureEvent = (event) => {
boxHeight.setValue(
Animated.diffClamp(
Animated.add(
orderBoxHeight, Animated.multiply(
event.nativeEvent.translationY, Animated.diffClamp(
event.nativeEvent.velocityY, 0, 1
)
)
)
), minHeight, maxHeight
)
}
return (
<Container>
<Animated.View style={[{ borderBottomColor: '#ccc', borderBottomWidth: 3 }, { height: boxHeight }]}>
<FlatList
data={orders}
renderItem={({ item, index }) => <OrderList item={item} index={index} />}
/>
<PanGestureHandler
onGestureEvent={(event) => onPanGestureEvent(event)}
>
<Animated.View style={{ backgroundColor: '#000', height: 20 }}></Animated.View >
</PanGestureHandler>
</Animated.View>
<ChatScreen />
</Container>
)
}
But none Worked... I have also tried few other variations of both but none of them worked as desired either it slides too fast or does not move at all