Verified Commit dbfb6cb5 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Fix i18next-react and iPhone X notch support

parent 4fe269da
......@@ -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')
......
......@@ -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(),
......
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'
......
......@@ -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);
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);
......@@ -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>
);
}
......
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,
......
......@@ -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);
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) {
......
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: {
......
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);
......@@ -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));
......@@ -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);
......@@ -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);
......@@ -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));
......@@ -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);
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);
......@@ -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));
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);
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);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment