Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
thalia
ThaliApp
Commits
9d7f406c
Commit
9d7f406c
authored
May 29, 2019
by
Sébastiaan Versteeg
Browse files
Merge branch 'fix/i18next-iphonex' into 'master'
Fix i18next-react and iPhone X notch support See merge request
!258
parents
4fe269da
aa64df30
Changes
35
Show whitespace changes
Inline
Side-by-side
__mocks__/react-i18next-mock.js
View file @
9d7f406c
...
...
@@ -3,8 +3,8 @@ import React from 'react';
const
reacti18next
=
jest
.
genMockFromModule
(
'
react-i18next
'
);
const
t
ranslat
e
=
()
=>
Component
=>
props
=>
<
Component
t
=
{
s
=>
s
}
{...
props
}
/>
;
const
withT
ranslat
ion
=
()
=>
Component
=>
props
=>
<
Component
t
=
{
s
=>
s
}
{...
props
}
/>
;
reacti18next
.
t
ranslat
e
=
t
ranslat
e
;
reacti18next
.
withT
ranslat
ion
=
withT
ranslat
ion
;
module
.
exports
=
reacti18next
;
__tests__/setup.js
View file @
9d7f406c
...
...
@@ -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
View file @
9d7f406c
...
...
@@ -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
View file @
9d7f406c
...
...
@@ -2,7 +2,7 @@ import i18n from '../../app/utils/i18n';
jest
.
mock
(
'
react-i18next
'
,
()
=>
({
r
eactI18next
Module
:
{},
initR
eactI18next
:
{},
}));
describe
(
'
i18n helper
'
,
()
=>
{
...
...
android/app/build.gradle
View file @
9d7f406c
...
...
@@ -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
View file @
9d7f406c
...
...
@@ -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
View file @
9d7f406c
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
View file @
9d7f406c
...
...
@@ -4,7 +4,7 @@ import {
}
from
'
react-native
'
;
import
{
applyMiddleware
,
createStore
}
from
'
redux
'
;
import
{
Provider
}
from
'
react-redux
'
;
import
{
I18nextProvider
,
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
I18nextProvider
,
withT
ranslat
ion
}
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
t
ranslat
e
(
'
app/App
'
)(
Main
);
export
default
withT
ranslat
ion
(
'
app/App
'
)(
Main
);
app/ui/components/errorScreen/ErrorScreen.js
View file @
9d7f406c
import
React
from
'
react
'
;
import
{
Image
,
Text
,
View
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
(
'
components/errorScreen/ErrorScreen
'
)(
ErrorScreen
);
export
default
withT
ranslat
ion
(
'
components/errorScreen/ErrorScreen
'
)(
ErrorScreen
);
app/ui/components/searchHeader/SearchHeader.js
View file @
9d7f406c
...
...
@@ -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
View file @
9d7f406c
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
View file @
9d7f406c
...
...
@@ -4,7 +4,7 @@ import {
Alert
,
Image
,
ImageBackground
,
Text
,
TouchableHighlight
,
View
,
}
from
'
react-native
'
;
import
LinearGradient
from
'
react-native-linear-gradient
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
(
'
components/sidebar/Sidebar
'
)(
Sidebar
);
export
default
withT
ranslat
ion
(
'
components/sidebar/Sidebar
'
)(
Sidebar
);
app/ui/components/standardHeader/StandardHeader.js
View file @
9d7f406c
import
React
from
'
react
'
;
import
{
StatusBar
,
Text
,
TouchableOpacity
,
View
,
StatusBar
,
Text
,
TouchableOpacity
,
View
,
SafeAreaView
,
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
(
t
ranslat
e
(
'
components/standardHeader/StandardHeader
'
)(
StandardHeader
));
const
StandardHeaderContainer
=
withNavigation
(
withT
ranslat
ion
(
'
components/standardHeader/StandardHeader
'
)(
StandardHeader
));
export
default
StandardHeaderContainer
;
export
function
withStandardHeader
(
Component
,
menu
)
{
...
...
app/ui/components/standardHeader/style/StandardHeader.js
View file @
9d7f406c
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
View file @
9d7f406c
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
Text
,
TouchableHighlight
,
View
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
from
'
react-i18next
'
;
import
Moment
from
'
moment
'
;
import
styles
from
'
./style/CalendarItem
'
;
...
...
@@ -57,4 +57,4 @@ CalendarItem.propTypes = {
t
:
PropTypes
.
func
.
isRequired
,
};
export
default
t
ranslat
e
(
'
screen/events/CalendarItem
'
)(
CalendarItem
);
export
default
withT
ranslat
ion
(
'
screen/events/CalendarItem
'
)(
CalendarItem
);
app/ui/screens/events/CalendarScreen.js
View file @
9d7f406c
...
...
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import
{
RefreshControl
,
ScrollView
,
SectionList
,
Text
,
View
,
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
(
'
screens/events/CalendarScreen
'
)(
withStandardHeader
(
CalendarScreen
,
true
));
export
default
withT
ranslat
ion
(
'
screens/events/CalendarScreen
'
)(
withStandardHeader
(
CalendarScreen
,
true
));
app/ui/screens/events/EventAdminScreen.js
View file @
9d7f406c
...
...
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import
{
View
,
Text
,
Switch
,
RefreshControl
,
ScrollView
,
FlatList
,
TouchableHighlight
,
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
(
'
screens/events/EventAdminScreen
'
)(
EventAdminScreen
);
export
default
withT
ranslat
ion
(
'
screens/events/EventAdminScreen
'
)(
EventAdminScreen
);
app/ui/screens/events/EventScreen.js
View file @
9d7f406c
...
...
@@ -11,7 +11,7 @@ import {
TouchableOpacity
,
View
,
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
(
'
screens/events/EventScreen
'
)(
EventScreen
);
export
default
withT
ranslat
ion
(
'
screens/events/EventScreen
'
)(
EventScreen
);
app/ui/screens/events/RegistrationScreen.js
View file @
9d7f406c
...
...
@@ -9,7 +9,7 @@ import {
TextInput
,
View
,
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
(
'
screens/events/RegistrationScreen
'
)(
withStandardHeader
(
RegistrationScreen
));
export
default
withT
ranslat
ion
(
'
screens/events/RegistrationScreen
'
)(
withStandardHeader
(
RegistrationScreen
));
app/ui/screens/login/LoginScreen.js
View file @
9d7f406c
...
...
@@ -9,7 +9,7 @@ import {
TextInput
,
View
,
}
from
'
react-native
'
;
import
{
t
ranslat
e
}
from
'
react-i18next
'
;
import
{
withT
ranslat
ion
}
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
t
ranslat
e
([
'
screens/user/LoginScreen
'
])(
LoginScreen
);
export
default
withT
ranslat
ion
([
'
screens/user/LoginScreen
'
])(
LoginScreen
);
Prev
1
2
Next
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment