status bar android fix

app.config.ts

@@ -48,6 +48,11 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     resizeMode: 'cover',
     backgroundColor: '#ffffff'
   },
+  androidStatusBar: {
+    backgroundColor: 'transparent',
+    translucent: true,
+    barStyle: 'dark-content'
+  },
   notification: {
     icon: './assets/notification-android-icon.png',
     color: '#FFFFFF'

src/components/FlatList/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { FlatList as List, SafeAreaView, View } from 'react-native';
+import { FlatList as List, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { Input } from '../Input';
 import { styles } from './styles';
 import { Item, ItemData } from './item';

src/components/PageWrapper/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ReactNode } from 'react';
-import { SafeAreaView, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { styles } from './styles';
 

src/components/SplashSpinner/index.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { ActivityIndicator, ImageBackground } from 'react-native';
+import { ActivityIndicator, ImageBackground, StatusBar, View } from 'react-native';
 import { Colors } from 'src/theme';
 
 export const Splash = () => {
   return (
-    <ImageBackground
-      source={require('../../../assets/loading-screen.png')}
-      style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}
-    >
-      <ActivityIndicator size={'large'} color={Colors.WHITE} style={{ paddingTop: '70%' }} />
-    </ImageBackground>
+    <View style={{ flex: 1 }}>
+      <StatusBar translucent backgroundColor="transparent" />
+      <ImageBackground
+        source={require('../../../assets/loading-screen.png')}
+        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+      >
+        <ActivityIndicator size={'large'} color={Colors.WHITE} style={{ paddingTop: '70%' }} />
+      </ImageBackground>
+    </View>
   );
 };

src/screens/InAppScreens/TravelsScreen/AddRegionsScreen/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { SafeAreaView, View, Text, Platform, TouchableOpacity } from 'react-native';
+import { View, Text, Platform, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import MapView, { Geojson, UrlTile } from 'react-native-maps';
 import * as turf from '@turf/turf';
 import { Feature } from '@turf/turf';

src/screens/InAppScreens/TravelsScreen/EarthScreen/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, Platform, SafeAreaView, Text, TouchableOpacity } from 'react-native';
+import { View, Platform, Text, StatusBar } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import MapView, { Geojson, UrlTile } from 'react-native-maps';
 
 import kye from '../../../../../assets/geojson/kye.json';
@@ -172,7 +173,7 @@ const EarthScreen = () => {
         )}
       </View>
 
-      <View style={styles.container}>
+      <View style={[styles.container, { paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }]}>
         <MapView
           style={styles.map}
           showsMyLocationButton={false}

src/screens/InAppScreens/TravelsScreen/SuggestSeriesScreen/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  SafeAreaView,
   View,
   Text,
   TouchableOpacity,
@@ -9,6 +8,7 @@ import {
   Keyboard,
   ScrollView
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import MapView, { Marker } from 'react-native-maps';
 import ReactModal from 'react-native-modal';
 import axios from 'axios';

src/screens/WelcomeScreen/index.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { ImageBackground, SafeAreaView, View, Text } from 'react-native';
+import { ImageBackground, View, Text, StatusBar } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import type { NavigationProp } from '@react-navigation/native';
 
 import { Button } from '../../components/';
@@ -14,9 +15,10 @@ type Props = {
 
 const WelcomeScreen: FC<Props> = ({ navigation }) => {
   return (
-    <View>
+    <View style={{ flex: 1 }}>
+      <StatusBar translucent backgroundColor="transparent" />
       <ImageBackground
-        style={{ height: '100%' }}
+        style={{ flex: 1 }}
         source={require('../../../assets/images/welcome-background.png')}
       >
         <View style={styles.overlay} />