android system bar fix

src/components/RegionPopup/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { Text, TouchableOpacity, View, Image, Animated, Dimensions } from 'react-native';
+import { Text, TouchableOpacity, View, Image, Animated, Dimensions, Platform } from 'react-native';
 import MarkIcon from 'assets/icons/mark.svg';
 import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
 import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
@@ -12,6 +12,7 @@ import React from 'react';
 import { Colors } from 'src/theme';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { NAVIGATION_PAGES } from 'src/types';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface Region {
   id: number;
@@ -45,6 +46,7 @@ const RegionPopup: React.FC<RegionPopupProps> = ({
 }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
 
   useEffect(() => {
     Animated.timing(fadeAnim, {
@@ -83,7 +85,13 @@ const RegionPopup: React.FC<RegionPopupProps> = ({
   const isSmallScreen = Dimensions.get('window').width < 383;
 
   return (
-    <Animated.View style={[styles.popupContainer, { opacity: fadeAnim }]}>
+    <Animated.View
+      style={[
+        styles.popupContainer,
+        { opacity: fadeAnim },
+        Platform.OS === 'android' ? { bottom: insets.bottom + 22 } : {}
+      ]}
+    >
       <TouchableOpacity
         onPress={() => {
           if (userData?.type === 'countries') {