how to make modal to center in react native - react-native

Question

How I make my box to center like justify content center but with position absolute ?
top: '50%' is too close to the bottom its not centered.
Modal.tsx
import React, { useEffect } from 'react';
import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
interface IModalCenter {
children: React.ReactNode;
onPress: () => void;
style?: StyleProp<ViewStyle>;
}
const ModalCenter = ({ children, onPress, style }: IModalCenter) => {
const x = useSharedValue(0);
useEffect(() => {
x.value = 1;
}, []);
const aView = useAnimatedStyle(() => {
const scale = withSpring(x.value);
return {
transform: [{ scale }]
}
});
return (
<GestureHandlerRootView style={s.container}>
<Animated.View style={{flexGrow: 1, backgroundColor: 'rgba(0,0,0,0.4)',}} />
<Animated.View style={[style, aView]}>
{ children }
</Animated.View>
</GestureHandlerRootView>
)
};
const s = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
flex: 1,
zIndex: 600,
margin: 'auto'
}
})
export default ModalCenter;
app.tsx
<ModalCenter style={{backgroundColor: '#fff', position: 'absolute', margin: 'auto', alignSelf: 'center', height: 200, width: 300, borderRadius: 8, elevation: 4}} onPress={handleToggleModalMessage}>
<Text>Hello</Text>
</ModalCenter>
how can i make it center ? ........................................................................................................................................................................................

Answer 1

You need to add 'justify-content' property to the container:
container: {
...StyleSheet.absoluteFillObject,
flex: 1,
zIndex: 600,
margin: 'auto',
justify-content: 'center' <---- add this
}