fix header supaya ganteng

view/Account.js

@@ -10,7 +10,8 @@ import {
     Alert,
     Button,
     ImageBackground,
-    ActivityIndicator
+    ActivityIndicator,
+    Platform
 } from 'react-native';
 
 import { StackActions } from '@react-navigation/native';
@@ -30,6 +31,7 @@ import Toast from 'react-native-tiny-toast';
 import i18n from 'i18n-js';
 import NumberFormat from 'react-number-format';
 import requestParams from '../helper/requestParams';
+import CustomIosStatusBar from './CustomIosStatusBar';
 
 class Account extends React.Component {
     constructor(props) {
@@ -251,7 +253,8 @@ class Account extends React.Component {
         const navigation = this.props.navigation
         return (
             <View style={styles.container}>
-                <ScrollView style={{paddingTop: StatusBar.currentHeight}}>
+            {Platform.OS === 'ios' && <CustomIosStatusBar color='#CFB368'/>}
+                <ScrollView>
 
                     <View style={{ flex: 1, height: 90 }}>
                         <View style={{ alignSelf: 'center' }}>

view/Auth.js

 import * as React from 'react';
 import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
 import { connect } from 'react-redux';
-import { View, Text, Image, Alert, TouchableOpacity } from 'react-native';
+import { View, Text, Image, Alert, TouchableOpacity, Platform } from 'react-native';
 import ActionType from '../redux/globalActionType';
 import MenuSelection from './MenuSelection';
 import { FontAwesome } from '@expo/vector-icons';
@@ -70,8 +70,12 @@ const Tab = createBottomTabNavigator();
 
 const BottomNavigation = ({ state, descriptors, navigation }) => {
   const insets = useSafeArea();
+  let paddingBottom = 0;
+  if (Platform.OS === 'ios') {
+    paddingBottom = insets.bottom;
+  }
   return (
-    <View style={{ flexDirection: 'row', paddingBottom: insets.bottom }}>
+    <View style={{ flexDirection: 'row', paddingBottom: paddingBottom }}>
       {state.routes.map((route, index) => {
         const { options } = descriptors[route.key];
         const label =

view/CustomIosStatusBar.js

+import React from 'react'
+import { View } from 'react-native';
+import { useSafeArea } from 'react-native-safe-area-context';
+
+const CustomIosStatusBar = ({color}) => {
+    const insets = useSafeArea();
+    return (
+        <View style={{paddingTop: insets.top, backgroundColor: color}}>
+        </View>
+    )
+}
+
+export default CustomIosStatusBar;

view/Home.js

@@ -4,7 +4,7 @@ import * as Device from 'expo-device';
 import * as Location from 'expo-location';
 import * as Permissions from 'expo-permissions';
 import * as React from 'react';
-import { ActivityIndicator, Alert, Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View, SafeAreaView, StatusBar } from 'react-native';
+import { ActivityIndicator, Alert, Dimensions, ScrollView, StyleSheet, Platform, Text, TouchableOpacity, View, SafeAreaView, StatusBar } from 'react-native';
 import { SliderBox } from "react-native-image-slider-box";
 import { Card } from 'react-native-shadow-cards';
 import { connect } from 'react-redux';
@@ -19,6 +19,7 @@ import NumberFormat from 'react-number-format';
 import { Button } from 'native-base';
 import Constants from 'expo-constants';
 import requestParams from '../helper/requestParams';
+import CustomIosStatusBar from './CustomIosStatusBar';
 
 
 class Home extends React.Component {
@@ -53,6 +54,7 @@ class Home extends React.Component {
 
     this.CheckInbox()
     const screenWidth = Math.round(Dimensions.get('window').width);
+
     this.setState({
       slider_height: screenWidth
     })
@@ -322,7 +324,11 @@ class Home extends React.Component {
     return (
 
       <View style={styles.container}>
-        <StatusBar backgroundColor='#CFB368' />
+        {Platform.OS === 'ios' ? (
+          <CustomIosStatusBar color='#CFB368'/>
+        ) : (
+          <StatusBar backgroundColor='#CFB368'/>
+        )}
         <ScrollView>
           <View style={{ flex: 6 }}>
             <View style={styles.header}>
@@ -688,7 +694,7 @@ const styles = StyleSheet.create({
     flex: 0.1,
     flexDirection: 'row',
     backgroundColor: '#CFB368',
-    paddingTop: StatusBar.currentHeight
+    // paddingTop: StatusBar.currentHeight
     // justifyContent: 'space-between',
     // alignItems: 'center'
   },

view/MenuSelection.js

 import React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, FlatList, Button, StatusBar, ActivityIndicator, Alert,Modal } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity, Image, FlatList, Button, StatusBar, ActivityIndicator, Alert,Modal } from 'react-native';
 import Axios from 'axios';
 import Item from './Item';
 import { connect } from 'react-redux';
@@ -14,6 +14,7 @@ import NumberFormat from 'react-number-format';
 import i18n from 'i18n-js';
 import Constants from 'expo-constants';
 import requestParams from '../helper/requestParams';
+import CustomIosStatusBar from './CustomIosStatusBar';
 
 class MenuSelection extends React.Component {
   constructor(props) {
@@ -302,8 +303,12 @@ class MenuSelection extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <StatusBar backgroundColor='#CFB368'/>
-        <View style={{ flex: 0.5, height: 50, flexDirection: 'row', paddingTop: StatusBar.currentHeight }}>
+          {Platform.OS === 'ios' ? (
+          <CustomIosStatusBar color='#CFB368'/>
+          ) : (
+          <StatusBar backgroundColor='#CFB368' />
+          )}
+        <View style={{ flex: 0.5, height: 50, flexDirection: 'row', paddingTop: 14 }}>
           <FlatList horizontal={true} style={{ flexDirection: 'row' }}
             showsHorizontalScrollIndicator={false}
             data={this.state.listCategory}

view/OrderHistory.js

 import React from 'react';
-import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator, StatusBar } from 'react-native';
+import { View, Text, TextInput, StyleSheet, ScrollView, Alert, Platform, TouchableOpacity, ActivityIndicator, StatusBar } from 'react-native';
 import { Card } from 'react-native-shadow-cards'
 import { connect } from 'react-redux';
 import Axios from 'axios';
@@ -7,6 +7,7 @@ import session from '../function/session';
 import moment from 'moment'
 import { Divider } from 'react-native-elements';
 import i18n from 'i18n-js';
+import CustomIosStatusBar from './CustomIosStatusBar';
 
 class OrderHistory extends React.Component {
 
@@ -85,7 +86,11 @@ class OrderHistory extends React.Component {
         // console.log(this.state.order_list)
         return (
             <View style={styles.container}>
+                {Platform.OS === 'ios' ? (
+                <CustomIosStatusBar color='#CFB368'/>
+                ) : (
                 <StatusBar backgroundColor='#CFB368' />
+                )}
                 <View style={styles.header}>
                     <Text style={{ color: 'white', textAlign: 'center', fontSize: 20, fontFamily: 'Gotham-Black' }}>{i18n.t('orderhistory')}</Text>
                 </View>
@@ -134,7 +139,7 @@ const styles = StyleSheet.create({
     },
     header: {
         flex: 0.1,
-        paddingTop: StatusBar.currentHeight,
+        // paddingTop: StatusBar.currentHeight,
         backgroundColor: '#ccb46c',
         justifyContent: 'center'
     },

view/Outlets.js

 import React from 'react';
-import { View, Text, StyleSheet, FlatList, TextInput, Alert, Linking, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, FlatList, TextInput, Alert, Linking, Platform, ActivityIndicator } from 'react-native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { CheckBox } from 'react-native-elements';
@@ -16,6 +16,7 @@ import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
 import { Icon } from 'react-native-elements';
 import i18n from 'i18n-js';
 import requestParams from '../helper/requestParams';
+import CustomIosStatusBar from './CustomIosStatusBar';
 
 
 class Outlets extends React.Component {
@@ -270,6 +271,7 @@ class Outlets extends React.Component {
                     textContent={'Loading...'}
                     textStyle={styles.spinnerTextStyle}
                 /> */}
+                {Platform.OS === 'ios' && <CustomIosStatusBar color='#CFB368'/>}
                 <View style={{ flex: 1 }}>
                     <MapView style={{ flex: 1, marginRight: 10, marginLeft: 10 }}
                         region={{

view/RewardsList.js

 import React from 'react';
-import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator, StatusBar } from 'react-native';
+import { View, Text, Image, StyleSheet, Platform, ScrollView, Alert, TouchableOpacity, ActivityIndicator, StatusBar } from 'react-native';
 import { Card } from 'react-native-shadow-cards'
 import { connect } from 'react-redux';
 import Axios from 'axios';
 import moment from 'moment'
 import i18n from 'i18n-js';
 import requestParams from '../helper/requestParams';
+import CustomIosStatusBar from './CustomIosStatusBar';
 
 class RewardsList extends React.Component {
     constructor(props) {
@@ -58,7 +59,11 @@ class RewardsList extends React.Component {
     render() {
         return (
             <View style={styles.container}>
+                {Platform.OS === 'ios' ? (
+                <CustomIosStatusBar color='#CFB368'/>
+                ) : (
                 <StatusBar backgroundColor='#CFB368' />
+                )}
                 <View style={styles.header}>
                     <Text style={{ color: 'white', textAlign: 'center', fontSize: 20, fontFamily: 'Gotham-Black' }}>{i18n.t('titlerewardhistory')}</Text>
                 </View>
@@ -113,7 +118,7 @@ const styles = StyleSheet.create({
     },
     header: {
         flex: 0.1,
-        paddingTop: StatusBar.currentHeight,
+        // paddingTop: StatusBar.currentHeight,
         backgroundColor: '#CFB368',
         justifyContent: 'center'
     },