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 { ...@@ -76,6 +76,7 @@ android {
} }
dependencies { dependencies {
implementation project(':react-native-device-info')
implementation project(':react-native-screens') implementation project(':react-native-screens')
implementation project(':react-native-gesture-handler') implementation project(':react-native-gesture-handler')
implementation project(':react-native-sentry') implementation project(':react-native-sentry')
......
...@@ -3,6 +3,7 @@ package com.thaliapp; ...@@ -3,6 +3,7 @@ package com.thaliapp;
import android.app.Application; import android.app.Application;
import com.facebook.react.ReactApplication; import com.facebook.react.ReactApplication;
import com.learnium.RNDeviceInfo.RNDeviceInfo;
import com.swmansion.rnscreens.RNScreensPackage; import com.swmansion.rnscreens.RNScreensPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import cl.json.ShareApplication; import cl.json.ShareApplication;
...@@ -37,6 +38,7 @@ public class MainApplication extends Application implements ShareApplication, Re ...@@ -37,6 +38,7 @@ public class MainApplication extends Application implements ShareApplication, Re
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
return Arrays.asList( return Arrays.asList(
new MainReactPackage(), new MainReactPackage(),
new RNDeviceInfo(),
new RNScreensPackage(), new RNScreensPackage(),
new RNGestureHandlerPackage(), new RNGestureHandlerPackage(),
new RNSharePackage(), new RNSharePackage(),
......
rootProject.name = 'ThaliApp' 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' include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android') project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
include ':react-native-gesture-handler' include ':react-native-gesture-handler'
......
...@@ -4,7 +4,7 @@ import { ...@@ -4,7 +4,7 @@ import {
} from 'react-native'; } from 'react-native';
import { applyMiddleware, createStore } from 'redux'; import { applyMiddleware, createStore } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { I18nextProvider, translate } from 'react-i18next'; import { I18nextProvider, withTranslation } from 'react-i18next';
import createSagaMiddleware from 'redux-saga'; import createSagaMiddleware from 'redux-saga';
import firebase from 'react-native-firebase'; import firebase from 'react-native-firebase';
import locale from 'react-native-locale-detector'; import locale from 'react-native-locale-detector';
...@@ -124,4 +124,4 @@ Main.propTypes = { ...@@ -124,4 +124,4 @@ Main.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
export default translate('app/App')(Main); export default withTranslation('app/App')(Main);
import React from 'react'; import React from 'react';
import { Image, Text, View } from 'react-native'; import { Image, Text, View } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './style/ErrorScreen'; import styles from './style/ErrorScreen';
...@@ -29,4 +29,4 @@ ErrorScreen.propTypes = { ...@@ -29,4 +29,4 @@ ErrorScreen.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
export default translate('components/errorScreen/ErrorScreen')(ErrorScreen); export default withTranslation('components/errorScreen/ErrorScreen')(ErrorScreen);
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
TextInput, TextInput,
TouchableOpacity, TouchableOpacity,
View, View,
SafeAreaView,
} from 'react-native'; } from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
...@@ -154,17 +155,19 @@ class SearchHeader extends Component { ...@@ -154,17 +155,19 @@ class SearchHeader extends Component {
animated animated
barStyle={isSearching ? 'dark-content' : 'light-content'} barStyle={isSearching ? 'dark-content' : 'light-content'}
/> />
<View style={styles.appBar}> <SafeAreaView style={styles.safeArea}>
{isAnimating && ( <View style={styles.appBar}>
<Animated.View {isAnimating && (
style={[ <Animated.View
styles.animationView, { transform: [{ scale: scaleValue }] }]} style={[
/> styles.animationView, { transform: [{ scale: scaleValue }] }]}
)} />
{this.getLeftIcon()} )}
{this.getCenter()} {this.getLeftIcon()}
{this.getRightIcon()} {this.getCenter()}
</View> {this.getRightIcon()}
</View>
</SafeAreaView>
</View> </View>
); );
} }
......
import { Dimensions } from 'react-native'; import { Dimensions } from 'react-native';
import Colors from '../../../style/Colors';
import StyleSheet from '../../../style/StyleSheet'; import StyleSheet from '../../../style/StyleSheet';
import Colors from '../../../style/Colors'; import { APPBAR_HEIGHT, STATUSBAR_HEIGHT } from '../../standardHeader/style/StandardHeader';
import { STATUSBAR_HEIGHT, APPBAR_HEIGHT }
from '../../standardHeader/style/StandardHeader';
const windowWidth = Dimensions.get('window').width; const windowWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
safeArea: {
backgroundColor: Colors.magenta,
android: {
elevation: 4,
},
ios: {
borderStyle: 'solid',
borderBottomColor: Colors.darkMagenta,
borderBottomWidth: 1,
},
},
appBar: { appBar: {
backgroundColor: Colors.magenta, backgroundColor: Colors.magenta,
height: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
paddingTop: STATUSBAR_HEIGHT,
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
flexDirection: 'row', flexDirection: 'row',
elevation: 4, android: {
height: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
paddingTop: STATUSBAR_HEIGHT,
},
ios: {
height: APPBAR_HEIGHT,
},
}, },
title: { title: {
color: Colors.white, color: Colors.white,
......
...@@ -4,7 +4,7 @@ import { ...@@ -4,7 +4,7 @@ import {
Alert, Image, ImageBackground, Text, TouchableHighlight, View, Alert, Image, ImageBackground, Text, TouchableHighlight, View,
} from 'react-native'; } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; 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 Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './style/Sidebar'; import styles from './style/Sidebar';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
...@@ -125,4 +125,4 @@ Sidebar.propTypes = { ...@@ -125,4 +125,4 @@ Sidebar.propTypes = {
openMemberList: PropTypes.func.isRequired, openMemberList: PropTypes.func.isRequired,
}; };
export default translate('components/sidebar/Sidebar')(Sidebar); export default withTranslation('components/sidebar/Sidebar')(Sidebar);
import React from 'react'; import React from 'react';
import { import {
StatusBar, Text, TouchableOpacity, View, StatusBar, Text, TouchableOpacity, View, SafeAreaView
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
...@@ -43,24 +43,26 @@ const StandardHeader = props => ( ...@@ -43,24 +43,26 @@ const StandardHeader = props => (
barStyle="light-content" barStyle="light-content"
/> />
</View> </View>
<View style={styles.appBar}> <SafeAreaView style={styles.safeArea}>
<TouchableOpacity <View style={styles.appBar}>
style={styles.iconButton} <TouchableOpacity
onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())} style={styles.iconButton}
> onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
<Icon >
name={props.menu ? 'menu' : 'arrow-back'} <Icon
style={styles.icon} name={props.menu ? 'menu' : 'arrow-back'}
size={24} style={styles.icon}
/> size={24}
</TouchableOpacity> />
<Text style={styles.title}> </TouchableOpacity>
{sceneToTitle(props.navigation.state.routeName, props.t)} <Text style={styles.title}>
</Text> {sceneToTitle(props.navigation.state.routeName, props.t)}
<View style={styles.rightView}> </Text>
{props.rightView} <View style={styles.rightView}>
{props.rightView}
</View>
</View> </View>
</View> </SafeAreaView>
</View> </View>
); );
...@@ -76,7 +78,7 @@ StandardHeader.defaultProps = { ...@@ -76,7 +78,7 @@ StandardHeader.defaultProps = {
menu: false, menu: false,
}; };
const StandardHeaderContainer = withNavigation(translate('components/standardHeader/StandardHeader')(StandardHeader)); const StandardHeaderContainer = withNavigation(withTranslation('components/standardHeader/StandardHeader')(StandardHeader));
export default StandardHeaderContainer; export default StandardHeaderContainer;
export function withStandardHeader(Component, menu) { export function withStandardHeader(Component, menu) {
......
import { Platform, StatusBar } from 'react-native'; import { Platform, StatusBar } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import StyleSheet from '../../../style/StyleSheet'; import StyleSheet from '../../../style/StyleSheet';
import Colors from '../../../style/Colors'; 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 APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
export const TOTAL_BAR_HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT; export const TOTAL_BAR_HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
...@@ -19,13 +23,8 @@ const styles = StyleSheet.create({ ...@@ -19,13 +23,8 @@ const styles = StyleSheet.create({
elevation: 4, elevation: 4,
}, },
}, },
appBar: { safeArea: {
backgroundColor: Colors.magenta, backgroundColor: Colors.magenta,
height: APPBAR_HEIGHT,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
android: { android: {
height: APPBAR_HEIGHT, height: APPBAR_HEIGHT,
elevation: 4, elevation: 4,
...@@ -36,6 +35,14 @@ const styles = StyleSheet.create({ ...@@ -36,6 +35,14 @@ const styles = StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
}, },
appBar: {
backgroundColor: Colors.magenta,
height: APPBAR_HEIGHT,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
flexWrap: 'wrap',
},
title: { title: {
color: Colors.white, color: Colors.white,
android: { android: {
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Text, TouchableHighlight, View } from 'react-native'; import { Text, TouchableHighlight, View } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import styles from './style/CalendarItem'; import styles from './style/CalendarItem';
...@@ -57,4 +57,4 @@ CalendarItem.propTypes = { ...@@ -57,4 +57,4 @@ CalendarItem.propTypes = {
t: PropTypes.func.isRequired, 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'; ...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { import {
RefreshControl, ScrollView, SectionList, Text, View, RefreshControl, ScrollView, SectionList, Text, View,
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import locale from 'react-native-locale-detector'; import locale from 'react-native-locale-detector';
import CalendarItem from './CalendarItemConnector'; import CalendarItem from './CalendarItemConnector';
...@@ -205,4 +205,4 @@ CalendarScreen.propTypes = { ...@@ -205,4 +205,4 @@ CalendarScreen.propTypes = {
t: PropTypes.func.isRequired, 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'; ...@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { import {
View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight, View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight,
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import Snackbar from 'react-native-snackbar'; import Snackbar from 'react-native-snackbar';
...@@ -340,4 +340,4 @@ EventAdminScreen.propTypes = { ...@@ -340,4 +340,4 @@ EventAdminScreen.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
export default translate('screens/events/EventAdminScreen')(EventAdminScreen); export default withTranslation('screens/events/EventAdminScreen')(EventAdminScreen);
...@@ -11,7 +11,7 @@ import { ...@@ -11,7 +11,7 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import Moment from 'moment'; import Moment from 'moment';
import HTML from 'react-native-render-html'; import HTML from 'react-native-render-html';
import Share from 'react-native-share'; import Share from 'react-native-share';
...@@ -556,4 +556,4 @@ EventScreen.propTypes = { ...@@ -556,4 +556,4 @@ EventScreen.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };
export default translate('screens/events/EventScreen')(EventScreen); export default withTranslation('screens/events/EventScreen')(EventScreen);
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
TextInput, TextInput,
View, View,
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import HTML from 'react-native-render-html'; import HTML from 'react-native-render-html';
...@@ -218,4 +218,4 @@ RegistrationScreen.propTypes = { ...@@ -218,4 +218,4 @@ RegistrationScreen.propTypes = {
t: PropTypes.func.isRequired, 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 { ...@@ -9,7 +9,7 @@ import {
TextInput, TextInput,
View, View,
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { url } from '../../../utils/url'; import { url } from '../../../utils/url';
import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView'; import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView';
import Button from '../../components/button/Button'; import Button from '../../components/button/Button';
...@@ -119,4 +119,4 @@ LoginScreen.propTypes = { ...@@ -119,4 +119,4 @@ LoginScreen.propTypes = {
status: PropTypes.string.isRequired, status: PropTypes.string.isRequired,
}; };
export default translate(['screens/user/LoginScreen'])(LoginScreen); export default withTranslation(['screens/user/LoginScreen'])(LoginScreen);
import React, { Component } from 'react'; import React, { Component } from 'react';
import { FlatList, View } from 'react-native'; import { FlatList, View } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import MemberView from '../../components/memberView/MemberViewConnector'; import MemberView from '../../components/memberView/MemberViewConnector';
...@@ -115,4 +115,4 @@ MemberListScreen.propTypes = { ...@@ -115,4 +115,4 @@ MemberListScreen.propTypes = {
t: PropTypes.func.isRequired, 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'; ...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { import {
RefreshControl, ScrollView, Text, TouchableHighlight, View, RefreshControl, ScrollView, Text, TouchableHighlight, View,
} from 'react-native'; } from 'react-native';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import Moment from 'moment'; import Moment from 'moment';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
...@@ -277,4 +277,4 @@ PizzaScreen.defaultProps = { ...@@ -277,4 +277,4 @@ PizzaScreen.defaultProps = {
order: null, order: null,
}; };
export default translate('screens/pizza/PizzaScreen')(withStandardHeader(PizzaScreen)); export default withTranslation('screens/pizza/PizzaScreen')(withStandardHeader(PizzaScreen));
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import Moment from 'moment'; import Moment from 'moment';
import CardSection from '../../components/cardSection/CardSection'; import CardSection from '../../components/cardSection/CardSection';
...@@ -73,4 +73,4 @@ AchievementSection.propTypes = { ...@@ -73,4 +73,4 @@ AchievementSection.propTypes = {
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
}; };
export default translate('screens/profile/AchievementSection')(AchievementSection); export default withTranslation('screens/profile/AchievementSection')(AchievementSection);
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { translate } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { Text } from 'react-native'; import { Text } from 'react-native';
import CardSection from '../../components/cardSection/CardSection'; import CardSection from '../../components/cardSection/CardSection';
import styles from './style/Profile'; import styles from './style/Profile';
...@@ -31,4 +31,4 @@ DescriptionSection.propTypes = { ...@@ -31,4 +31,4 @@ DescriptionSection.propTypes = {
t: PropTypes.func.isRequired, 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