title: how to make modal to center in react native
body: <p>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.</p>
  <p>Modal.tsx</p>
  <pre><code>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: () =&gt; void;
    style?: StyleProp&lt;ViewStyle&gt;;
  }
  
  const ModalCenter = ({ children, onPress, style }: IModalCenter) =&gt; {
    const x = useSharedValue(0);
  
    useEffect(() =&gt; {
      x.value = 1;
    }, []);
  
    const aView = useAnimatedStyle(() =&gt; {
      const scale = withSpring(x.value);
      return {
        transform: [{ scale }]
      }
    });
    return (
      &lt;GestureHandlerRootView style={s.container}&gt;
  
        &lt;Animated.View style={{flexGrow: 1, backgroundColor: 'rgba(0,0,0,0.4)',}} /&gt;
  
        &lt;Animated.View style={[style, aView]}&gt;
          { children }
        &lt;/Animated.View&gt;
      &lt;/GestureHandlerRootView&gt;
    )
  };
  
  const s = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      flex: 1,
      zIndex: 600,
      margin: 'auto'
    }
  })
  
  export default ModalCenter;
  </code></pre>
  <p>app.tsx</p>
  <pre><code>        &lt;ModalCenter style={{backgroundColor: '#fff', position: 'absolute', margin: 'auto', alignSelf: 'center', height: 200, width: 300, borderRadius: 8, elevation: 4}} onPress={handleToggleModalMessage}&gt;
            &lt;Text&gt;Hello&lt;/Text&gt;
          &lt;/ModalCenter&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/oPx0C.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oPx0C.jpg" alt="enter image description here" /></a></p>
  <p>how can i make it center ? ........................................................................................................................................................................................</p>