Skip to content

Commit df9cb65

Browse files
chinesedfanchinesedfan
authored
fix(navi): add SafeAreaView correctly (#884)
* fix: upgrade dep and wrap with SafeAreaView * fix: fix margin top * fix: add SafeAreaView in screen to fix top color * feat: prepare for Android notch
1 parent b8051b2 commit df9cb65

File tree

13 files changed

+78
-36
lines changed

13 files changed

+78
-36
lines changed

‎App.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
StatusBar,
88
Platform,
99
} from 'react-native';
10+
import { SafeAreaView } from 'react-navigation';
11+
import DeviceInfo from 'react-native-device-info';
1012
import codePush from 'react-native-code-push';
1113
import { PersistGate } from 'redux-persist/integration/react';
1214
import { colors, getStatusBarConfig } from 'config';
@@ -30,6 +32,11 @@ if (console) {
3032
console.disableYellowBox = true; // eslint-disable-line no-console
3133
}
3234

35+
if (Platform.OS === 'android' && DeviceInfo.hasNotch()) {
36+
// FIXME: real value for status bar height + notch height
37+
SafeAreaView.setStatusBarHeight(44);
38+
}
39+
3340
class App extends Component {
3441
static async initLocale() {
3542
const locale = await getCurrentLocale();

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"react-native-communications": "^2.2.1",
7373
"react-native-config": "^0.6.0",
7474
"react-native-cookies": "^3.2.0",
75-
"react-native-device-info": "^0.15.2",
75+
"react-native-device-info": "^2.2.1",
7676
"react-native-elements": "^0.18.2",
7777
"react-native-htmlview": "^0.12.0",
7878
"react-native-i18n": "^2.0.4",
@@ -89,7 +89,7 @@
8989
"react-native-syntax-highlighter": "^1.2.1",
9090
"react-native-table-component": "^1.1.0",
9191
"react-native-vector-icons": "^4.4.0",
92-
"react-navigation": "^1.0.0-beta.27",
92+
"react-navigation": "^1.0.0",
9393
"react-redux": "^5.0.2",
9494
"react-syntax-highlighter": "^5.6.2",
9595
"redux": "^3.6.0",

‎src/auth/screens/auth-profile.screen.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Dimensions,
1010
} from 'react-native';
1111
import { ListItem } from 'react-native-elements';
12+
import { SafeAreaView } from 'react-navigation';
1213

1314
import {
1415
ViewContainer,
@@ -42,6 +43,10 @@ const mapDispatchToProps = dispatch =>
4243
dispatch
4344
);
4445

46+
const StyledSafeAreaView = styled(SafeAreaView)`
47+
background-color: ${colors.primaryDark};
48+
`;
49+
4550
const Note = styled.Text`
4651
font-size: ${normalize(11)};
4752
color: ${colors.primaryDark};
@@ -108,6 +113,8 @@ class AuthProfile extends Component {
108113

109114
return (
110115
<ViewContainer>
116+
<StyledSafeAreaView />
117+
111118
<ParallaxScroll
112119
renderContent={() => (
113120
<UserProfile

‎src/components/parallax-scroll.component.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import { Icon } from 'react-native-elements';
55
import styled from 'styled-components';
66

77
import { colors, normalize, fonts } from 'config';
8-
import { isIphoneX } from 'utils';
98

10-
const STICKY_HEADER_HEIGHT = isIphoneX() ? 76 : 62;
9+
const STICKY_HEADER_HEIGHT = 44;
1110

1211
type Props = {
1312
renderContent: any,

‎src/components/repository-profile.component.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { StyleSheet, Text, View, Platform } from 'react-native';
33
import { Icon } from 'react-native-elements';
44

5-
import { emojifyText, abbreviateNumber, t, isIphoneX } from 'utils';
5+
import { emojifyText, abbreviateNumber, t } from 'utils';
66
import { colors, fonts, normalize } from 'config';
77

88
type Props = {
@@ -95,7 +95,9 @@ const styles = StyleSheet.create({
9595
},
9696
languageInfo: {
9797
flexDirection: 'row',
98-
top: isIphoneX() ? 46 : 35,
98+
alignItems: 'center',
99+
top: 0,
100+
height: 44,
99101
position: 'absolute',
100102
},
101103
languageInfoTitle: {

‎src/notifications/screens/notifications.screen.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import React, { Component } from 'react';
44
import styled from 'styled-components';
55
import { connect } from 'react-redux';
66
import { bindActionCreators } from 'redux';
7-
import { FlatList, View, ScrollView, Platform } from 'react-native';
7+
import { FlatList, View, ScrollView } from 'react-native';
88
import { ButtonGroup, Card, Icon } from 'react-native-elements';
9+
import { SafeAreaView } from 'react-navigation';
910

1011
import {
1112
Button,
@@ -14,7 +15,7 @@ import {
1415
NotificationListItem,
1516
} from 'components';
1617
import { colors, fonts, normalize } from 'config';
17-
import { isIphoneX, t } from 'utils';
18+
import { t } from 'utils';
1819
import {
1920
getUnreadNotifications,
2021
getParticipatingNotifications,
@@ -52,9 +53,13 @@ const mapDispatchToProps = dispatch =>
5253
dispatch
5354
);
5455

56+
const StyledSafeAreaView = styled(SafeAreaView)`
57+
background-color: ${colors.greyLight};
58+
`;
59+
5560
const ButtonGroupWrapper = styled.View`
5661
background-color: ${colors.greyLight};
57-
padding-top: ${Platform.OS === 'ios' ? (isIphoneX() ? 40 : 30) : 10};
62+
padding-top: 10;
5863
padding-bottom: 10;
5964
margin-bottom: 15;
6065
`;
@@ -441,6 +446,8 @@ class Notifications extends Component {
441446
return (
442447
<ViewContainer>
443448
<Container>
449+
<StyledSafeAreaView />
450+
444451
<ButtonGroupWrapper>
445452
<StyledButtonGroup
446453
onPress={this.switchType}

‎src/organization/screens/organization-profile.screen.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
44
import { RefreshControl, ActivityIndicator } from 'react-native';
55
import { ListItem } from 'react-native-elements';
66
import ActionSheet from 'react-native-actionsheet';
7+
import { SafeAreaView } from 'react-navigation';
78
import { RestClient } from 'api';
89
import {
910
ViewContainer,
@@ -17,6 +18,10 @@ import {
1718
import { emojifyText, t, openURLInView } from 'utils';
1819
import { colors, fonts } from 'config';
1920

21+
const StyledSafeAreaView = styled(SafeAreaView)`
22+
background-color: ${colors.primaryDark};
23+
`;
24+
2025
const DescriptionListItem = styled(ListItem).attrs({
2126
subtitleStyle: {
2227
color: colors.greyDark,
@@ -113,6 +118,8 @@ class OrganizationProfile extends Component {
113118

114119
return (
115120
<ViewContainer>
121+
<StyledSafeAreaView />
122+
116123
<ParallaxScroll
117124
renderContent={() => (
118125
<UserProfile

‎src/repository/screens/repository.screen.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styled from 'styled-components';
55
import { RefreshControl, Share, ActivityIndicator } from 'react-native';
66
import { ListItem } from 'react-native-elements';
77
import ActionSheet from 'react-native-actionsheet';
8+
import { SafeAreaView } from 'react-navigation';
89
import { v3, RestClient } from 'api';
910
import {
1011
ViewContainer,
@@ -62,6 +63,10 @@ const mapDispatchToProps = {
6263
getCommits,
6364
};
6465

66+
const StyledSafeAreaView = styled(SafeAreaView)`
67+
background-color: ${colors.primaryDark};
68+
`;
69+
6570
const LoadingMembersContainer = styled.View`
6671
padding: 5px;
6772
`;
@@ -269,6 +274,8 @@ class Repository extends Component {
269274

270275
return (
271276
<ViewContainer>
277+
<StyledSafeAreaView />
278+
272279
<ParallaxScroll
273280
renderContent={() => {
274281
if (isPendingRepository) {

‎src/search/screens/search.screen.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Platform,
1010
} from 'react-native';
1111
import { ButtonGroup } from 'react-native-elements';
12+
import { SafeAreaView } from 'react-navigation';
1213

1314
import {
1415
ViewContainer,
@@ -19,7 +20,7 @@ import {
1920
} from 'components';
2021
import styled from 'styled-components';
2122
import { colors, fonts, normalize } from 'config';
22-
import { isIphoneX, t } from 'utils';
23+
import { t } from 'utils';
2324
import { RestClient } from 'api';
2425

2526
const NAV_QUERY_PARAM = 'q';
@@ -68,12 +69,12 @@ const mapDispatchToProps = {
6869
searchUsers: RestClient.search.users,
6970
};
7071

72+
const StyledSafeAreaView = styled(SafeAreaView)`
73+
background-color: ${colors.white};
74+
`;
75+
7176
const SearchBarWrapper = styled.View`
7277
flex-direction: row;
73-
margin-top: ${Platform.select({
74-
ios: isIphoneX() ? 30 : 20,
75-
android: 5,
76-
})};
7778
`;
7879

7980
const SearchContainer = styled.View`
@@ -296,6 +297,8 @@ class Search extends Component {
296297

297298
return (
298299
<ViewContainer>
300+
<StyledSafeAreaView />
301+
299302
<SearchBarWrapper>
300303
<SearchContainer>
301304
<SearchBar

‎src/user/screens/profile.screen.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from 'react-native';
1212
import { ListItem } from 'react-native-elements';
1313
import ActionSheet from 'react-native-actionsheet';
14+
import { SafeAreaView } from 'react-navigation';
1415

1516
import {
1617
ViewContainer,
@@ -57,6 +58,10 @@ const mapDispatchToProps = dispatch =>
5758
dispatch
5859
);
5960

61+
const StyledSafeAreaView = styled(SafeAreaView)`
62+
background-color: ${colors.primaryDark};
63+
`;
64+
6065
const BioListItem = styled(ListItem).attrs({
6166
containerStyle: {
6267
borderBottomColor: colors.greyLight,
@@ -165,6 +170,8 @@ class Profile extends Component {
165170

166171
return (
167172
<ViewContainer>
173+
<StyledSafeAreaView />
174+
168175
<ParallaxScroll
169176
renderContent={() => (
170177
<UserProfile

0 commit comments

Comments
 (0)