Merge branch 'fix/i18next-iphonex' into 'master'

Fix i18next-react and iPhone X notch support

See merge request !258

__mocks__/react-i18next-mock.js

@@ -3,8 +3,8 @@ import React from 'react';
 
 const reacti18next = jest.genMockFromModule('react-i18next');
 
-const translate = () => Component => props => <Component t={s => s} {...props} />;
+const withTranslation = () => Component => props => <Component t={s => s} {...props} />;
 
-reacti18next.translate = translate;
+reacti18next.withTranslation = withTranslation;
 
 module.exports = reacti18next;

__tests__/setup.js

@@ -7,3 +7,7 @@ NativeModules.RNFirebase = {
 NativeModules.RNShare = {
 
 };
+
+jest.mock('react-native-device-info', () => ({
+  hasNotch: () => false,
+}));

__tests__/ui/components/standardHeader/__snapshots__/StandardHeader.spec.js.snap

@@ -10,14 +10,22 @@ exports[`StandardHeader component renders correctly on Android 1`] = `
       }
     }
   />
-  <View
+  <RCTSafeAreaView
+    emulateUnlessSupported={true}
     style={
       Object {
-        "alignItems": "center",
         "backgroundColor": "#E62272",
         "borderBottomColor": "#C2185B",
         "borderBottomWidth": 1,
         "borderStyle": "solid",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#E62272",
           "flexDirection": "row",
           "flexWrap": "wrap",
           "height": 44,
@@ -92,6 +100,7 @@ exports[`StandardHeader component renders correctly on Android 1`] = `
         }
       />
     </View>
+  </RCTSafeAreaView>
 </View>
 `;
 
@@ -105,14 +114,22 @@ exports[`StandardHeader component renders correctly on iOS 1`] = `
       }
     }
   />
-  <View
+  <RCTSafeAreaView
+    emulateUnlessSupported={true}
     style={
       Object {
-        "alignItems": "center",
         "backgroundColor": "#E62272",
         "borderBottomColor": "#C2185B",
         "borderBottomWidth": 1,
         "borderStyle": "solid",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#E62272",
           "flexDirection": "row",
           "flexWrap": "wrap",
           "height": 44,
@@ -187,5 +204,6 @@ exports[`StandardHeader component renders correctly on iOS 1`] = `
         }
       />
     </View>
+  </RCTSafeAreaView>
 </View>
 `;

__tests__/utils/i18n.spec.js

@@ -2,7 +2,7 @@ import i18n from '../../app/utils/i18n';
 
 
 jest.mock('react-i18next', () => ({
-  reactI18nextModule: {},
+  initReactI18next: {},
 }));
 
 describe('i18n helper', () => {

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,6 +155,7 @@ class SearchHeader extends Component {
           animated
           barStyle={isSearching ? 'dark-content' : 'light-content'}
         />
+        <SafeAreaView style={styles.safeArea}>
           <View style={styles.appBar}>
             {isAnimating && (
               <Animated.View
@@ -165,6 +167,7 @@ class SearchHeader extends Component {
             {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,6 +43,7 @@ const StandardHeader = props => (
         barStyle="light-content"
       />
     </View>
+    <SafeAreaView style={styles.safeArea}>
       <View style={styles.appBar}>
         <TouchableOpacity
           style={styles.iconButton}
@@ -61,6 +62,7 @@ const StandardHeader = props => (
           {props.rightView}
         </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);