Fix i18next-react and iPhone X notch support

android/app/build.gradle

@@ -76,6 +76,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-device-info')
     implementation project(':react-native-screens')
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-sentry')

android/app/src/main/java/com/thaliapp/MainApplication.java

@@ -3,6 +3,7 @@ package com.thaliapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import cl.json.ShareApplication;
@@ -37,6 +38,7 @@ public class MainApplication extends Application implements ShareApplication, Re
     protected List<ReactPackage> getPackages() {
       return Arrays.asList(
             new MainReactPackage(),
+            new RNDeviceInfo(),
             new RNScreensPackage(),
             new RNGestureHandlerPackage(),
             new RNSharePackage(),

android/settings.gradle

 rootProject.name = 'ThaliApp'
+include ':react-native-device-info'
+project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':react-native-screens'
 project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
 include ':react-native-gesture-handler'

app/app.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import { applyMiddleware, createStore } from 'redux';
 import { Provider } from 'react-redux';
-import { I18nextProvider, translate } from 'react-i18next';
+import { I18nextProvider, withTranslation } from 'react-i18next';
 import createSagaMiddleware from 'redux-saga';
 import firebase from 'react-native-firebase';
 import locale from 'react-native-locale-detector';
@@ -124,4 +124,4 @@ Main.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('app/App')(Main);
+export default withTranslation('app/App')(Main);

app/ui/components/errorScreen/ErrorScreen.js

 import React from 'react';
 import { Image, Text, View } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
 import styles from './style/ErrorScreen';
@@ -29,4 +29,4 @@ ErrorScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('components/errorScreen/ErrorScreen')(ErrorScreen);
+export default withTranslation('components/errorScreen/ErrorScreen')(ErrorScreen);

app/ui/components/searchHeader/SearchHeader.js

@@ -9,6 +9,7 @@ import {
   TextInput,
   TouchableOpacity,
   View,
+  SafeAreaView,
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -154,17 +155,19 @@ class SearchHeader extends Component {
           animated
           barStyle={isSearching ? 'dark-content' : 'light-content'}
         />
-        <View style={styles.appBar}>
-          {isAnimating && (
-            <Animated.View
-              style={[
-                styles.animationView, { transform: [{ scale: scaleValue }] }]}
-            />
-          )}
-          {this.getLeftIcon()}
-          {this.getCenter()}
-          {this.getRightIcon()}
-        </View>
+        <SafeAreaView style={styles.safeArea}>
+          <View style={styles.appBar}>
+            {isAnimating && (
+              <Animated.View
+                style={[
+                  styles.animationView, { transform: [{ scale: scaleValue }] }]}
+              />
+            )}
+            {this.getLeftIcon()}
+            {this.getCenter()}
+            {this.getRightIcon()}
+          </View>
+        </SafeAreaView>
       </View>
     );
   }

app/ui/components/searchHeader/style/SearchHeader.js

 import { Dimensions } from 'react-native';
+import Colors from '../../../style/Colors';
 
 import StyleSheet from '../../../style/StyleSheet';
-import Colors from '../../../style/Colors';
-import { STATUSBAR_HEIGHT, APPBAR_HEIGHT }
-  from '../../standardHeader/style/StandardHeader';
+import { APPBAR_HEIGHT, STATUSBAR_HEIGHT } from '../../standardHeader/style/StandardHeader';
 
 const windowWidth = Dimensions.get('window').width;
 
 const styles = StyleSheet.create({
+  safeArea: {
+    backgroundColor: Colors.magenta,
+    android: {
+      elevation: 4,
+    },
+    ios: {
+      borderStyle: 'solid',
+      borderBottomColor: Colors.darkMagenta,
+      borderBottomWidth: 1,
+    },
+  },
   appBar: {
     backgroundColor: Colors.magenta,
-    height: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
-    paddingTop: STATUSBAR_HEIGHT,
     justifyContent: 'flex-start',
     alignItems: 'center',
     flexWrap: 'wrap',
     flexDirection: 'row',
-    elevation: 4,
+    android: {
+      height: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
+      paddingTop: STATUSBAR_HEIGHT,
+    },
+    ios: {
+      height: APPBAR_HEIGHT,
+    },
   },
   title: {
     color: Colors.white,

app/ui/components/sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import {
   Alert, Image, ImageBackground, Text, TouchableHighlight, View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import styles from './style/Sidebar';
 import Colors from '../../style/Colors';
@@ -125,4 +125,4 @@ Sidebar.propTypes = {
   openMemberList: PropTypes.func.isRequired,
 };
 
-export default translate('components/sidebar/Sidebar')(Sidebar);
+export default withTranslation('components/sidebar/Sidebar')(Sidebar);

app/ui/components/standardHeader/StandardHeader.js

 import React from 'react';
 import {
-  StatusBar, Text, TouchableOpacity, View,
+  StatusBar, Text, TouchableOpacity, View, SafeAreaView
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
@@ -43,24 +43,26 @@ const StandardHeader = props => (
         barStyle="light-content"
       />
     </View>
-    <View style={styles.appBar}>
-      <TouchableOpacity
-        style={styles.iconButton}
-        onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
-      >
-        <Icon
-          name={props.menu ? 'menu' : 'arrow-back'}
-          style={styles.icon}
-          size={24}
-        />
-      </TouchableOpacity>
-      <Text style={styles.title}>
-        {sceneToTitle(props.navigation.state.routeName, props.t)}
-      </Text>
-      <View style={styles.rightView}>
-        {props.rightView}
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.appBar}>
+        <TouchableOpacity
+          style={styles.iconButton}
+          onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
+        >
+          <Icon
+            name={props.menu ? 'menu' : 'arrow-back'}
+            style={styles.icon}
+            size={24}
+          />
+        </TouchableOpacity>
+        <Text style={styles.title}>
+          {sceneToTitle(props.navigation.state.routeName, props.t)}
+        </Text>
+        <View style={styles.rightView}>
+          {props.rightView}
+        </View>
       </View>
-    </View>
+    </SafeAreaView>
   </View>
 );
 
@@ -76,7 +78,7 @@ StandardHeader.defaultProps = {
   menu: false,
 };
 
-const StandardHeaderContainer = withNavigation(translate('components/standardHeader/StandardHeader')(StandardHeader));
+const StandardHeaderContainer = withNavigation(withTranslation('components/standardHeader/StandardHeader')(StandardHeader));
 export default StandardHeaderContainer;
 
 export function withStandardHeader(Component, menu) {

app/ui/components/standardHeader/style/StandardHeader.js

 import { Platform, StatusBar } from 'react-native';
+import DeviceInfo from 'react-native-device-info';
 
 import StyleSheet from '../../../style/StyleSheet';
 import Colors from '../../../style/Colors';
 
-export const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
+
+// eslint-disable-next-line no-nested-ternary
+export const STATUSBAR_HEIGHT = Platform.OS === 'ios'
+  ? DeviceInfo.hasNotch() ? 44 : 20 : StatusBar.currentHeight;
 export const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
 
 export const TOTAL_BAR_HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
@@ -19,13 +23,8 @@ const styles = StyleSheet.create({
       elevation: 4,
     },
   },
-  appBar: {
+  safeArea: {
     backgroundColor: Colors.magenta,
-    height: APPBAR_HEIGHT,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    flexWrap: 'wrap',
     android: {
       height: APPBAR_HEIGHT,
       elevation: 4,
@@ -36,6 +35,14 @@ const styles = StyleSheet.create({
       borderBottomWidth: 1,
     },
   },
+  appBar: {
+    backgroundColor: Colors.magenta,
+    height: APPBAR_HEIGHT,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+  },
   title: {
     color: Colors.white,
     android: {

app/ui/screens/events/CalendarItem.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, TouchableHighlight, View } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Moment from 'moment';
 
 import styles from './style/CalendarItem';
@@ -57,4 +57,4 @@ CalendarItem.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screen/events/CalendarItem')(CalendarItem);
+export default withTranslation('screen/events/CalendarItem')(CalendarItem);

app/ui/screens/events/CalendarScreen.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   RefreshControl, ScrollView, SectionList, Text, View,
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Moment from 'moment';
 import locale from 'react-native-locale-detector';
 import CalendarItem from './CalendarItemConnector';
@@ -205,4 +205,4 @@ CalendarScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/events/CalendarScreen')(withStandardHeader(CalendarScreen, true));
+export default withTranslation('screens/events/CalendarScreen')(withStandardHeader(CalendarScreen, true));

app/ui/screens/events/EventAdminScreen.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight,
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Snackbar from 'react-native-snackbar';
@@ -340,4 +340,4 @@ EventAdminScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/events/EventAdminScreen')(EventAdminScreen);
+export default withTranslation('screens/events/EventAdminScreen')(EventAdminScreen);

app/ui/screens/events/EventScreen.js

@@ -11,7 +11,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Moment from 'moment';
 import HTML from 'react-native-render-html';
 import Share from 'react-native-share';
@@ -556,4 +556,4 @@ EventScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/events/EventScreen')(EventScreen);
+export default withTranslation('screens/events/EventScreen')(EventScreen);

app/ui/screens/events/RegistrationScreen.js

@@ -9,7 +9,7 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import HTML from 'react-native-render-html';
 
@@ -218,4 +218,4 @@ RegistrationScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/events/RegistrationScreen')(withStandardHeader(RegistrationScreen));
+export default withTranslation('screens/events/RegistrationScreen')(withStandardHeader(RegistrationScreen));

app/ui/screens/login/LoginScreen.js

@@ -9,7 +9,7 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { url } from '../../../utils/url';
 import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView';
 import Button from '../../components/button/Button';
@@ -119,4 +119,4 @@ LoginScreen.propTypes = {
   status: PropTypes.string.isRequired,
 };
 
-export default translate(['screens/user/LoginScreen'])(LoginScreen);
+export default withTranslation(['screens/user/LoginScreen'])(LoginScreen);

app/ui/screens/memberList/MemberListScreen.js

 import React, { Component } from 'react';
 import { FlatList, View } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
 import MemberView from '../../components/memberView/MemberViewConnector';
@@ -115,4 +115,4 @@ MemberListScreen.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/memberList/MemberListScreen')(MemberListScreen);
+export default withTranslation('screens/memberList/MemberListScreen')(MemberListScreen);

app/ui/screens/pizza/PizzaScreen.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   RefreshControl, ScrollView, Text, TouchableHighlight, View,
 } from 'react-native';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Moment from 'moment';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
@@ -277,4 +277,4 @@ PizzaScreen.defaultProps = {
   order: null,
 };
 
-export default translate('screens/pizza/PizzaScreen')(withStandardHeader(PizzaScreen));
+export default withTranslation('screens/pizza/PizzaScreen')(withStandardHeader(PizzaScreen));

app/ui/screens/profile/AchievementSection.js

 import PropTypes from 'prop-types';
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 import Moment from 'moment';
 import CardSection from '../../components/cardSection/CardSection';
@@ -73,4 +73,4 @@ AchievementSection.propTypes = {
   type: PropTypes.string.isRequired,
 };
 
-export default translate('screens/profile/AchievementSection')(AchievementSection);
+export default withTranslation('screens/profile/AchievementSection')(AchievementSection);

app/ui/screens/profile/DescriptionSection.js

 import PropTypes from 'prop-types';
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Text } from 'react-native';
 import CardSection from '../../components/cardSection/CardSection';
 import styles from './style/Profile';
@@ -31,4 +31,4 @@ DescriptionSection.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default translate('screens/profile/DescriptionSection')(DescriptionSection);
+export default withTranslation('screens/profile/DescriptionSection')(DescriptionSection);