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

+7
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

+2-2
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

+7
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

+1-2
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

+4-2
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

+10-3
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

+7
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

+7
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

+8-5
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

+7
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

‎src/utils/device-helpers.js

-3
This file was deleted.

‎src/utils/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export * from './loading-animation';
44
export * from './text-helper';
55
export * from './method-helpers';
66
export * from './color-helpers';
7-
export * from './device-helpers';
87
export * from './event-helpers';
98
export * from './localization-helper';
109
export * from './migration-helper';

‎yarn.lock

+18-18
Original file line numberDiff line numberDiff line change
@@ -9091,10 +9091,10 @@ react-is@^16.3.1, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4:
90919091
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
90929092
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
90939093

9094-
react-lifecycles-compat@^1.0.2:
9095-
version "1.0.2"
9096-
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
9097-
integrity sha512-uyYuXIt73odE9MQM9vFemhYI8AOiBr2TC0/Q8Dx0T27mLt20cRwauafXYul2l6hqSyoGsz4G+AepeFiyoEqVaQ==
9094+
react-lifecycles-compat@^3.0.2:
9095+
version "3.0.4"
9096+
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
9097+
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
90989098

90999099
react-native-actionsheet@^2.2.0:
91009100
version "2.3.0"
@@ -9148,10 +9148,10 @@ react-native-cookies@^3.2.0:
91489148
dependencies:
91499149
invariant "^2.1.0"
91509150

9151-
react-native-device-info@^0.15.2:
9152-
version "0.15.3"
9153-
resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-0.15.3.tgz#c6bb5ed6cb27b9ac239d6fb1a50d20e00d95f71c"
9154-
integrity sha512-MxNmGXPptMtrXw/vP3XhULswAyFxxHdpvbF70OOMpK9zyaXyMlso1ESdHuZFE+pNcfY/3ibPZqx3QlATK8rahw==
9151+
react-native-device-info@^2.2.1:
9152+
version "2.2.1"
9153+
resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-2.2.1.tgz#0c14285927fc7beeaf9241ea1ded90f5d5ebf836"
9154+
integrity sha512-MKhr6Tti9cPJXbTMOV+QuX7an2QGXtcMi/OQ6NdWDhbAmOF+ImW2rxGvD6thwLk+2Xk8rs920k0qibKMnNeZ8A==
91559155

91569156
[email protected]:
91579157
version "1.0.0"
@@ -9242,10 +9242,10 @@ react-native-safari-view@^2.0.0:
92429242
resolved "https://registry.yarnpkg.com/react-native-safari-view/-/react-native-safari-view-2.1.0.tgz#1e0cd12c62bce79bc1759c7e281646b08b61c959"
92439243
integrity sha1-HgzRLGK855vBdZx+KBZGsIthyVk=
92449244

9245-
react-native-safe-area-view@^0.7.0:
9246-
version "0.7.0"
9247-
resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
9248-
integrity sha512-SjLdW/Th0WVMhyngH4O6yC21S+O4U4AAG3QxBr7fZ2ftgjXSpKbDHAhEpxBdFwei6HsnsC2h9oYMtPpaW9nfGg==
9245+
react-native-safe-area-view@0.11.0:
9246+
version "0.11.0"
9247+
resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.11.0.tgz#4f3dda43c2bace37965e7c6aef5fc83d4f19d174"
9248+
integrity sha512-N3nElaahu1Me2ltnfc9acpgt1znm6pi8DSadKy79kvdzKwvVIzw0IXueA/Hjr51eCW1BsfNw7D1SgBT9U6qEkA==
92499249
dependencies:
92509250
hoist-non-react-statics "^2.3.1"
92519251

@@ -9374,18 +9374,18 @@ [email protected]:
93749374
xmldoc "^0.4.0"
93759375
yargs "^9.0.0"
93769376

9377-
react-navigation@^1.0.0-beta.27:
9378-
version "1.5.8"
9379-
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.5.8.tgz#f04bec1a39af8cfcf651337d351e8d0a144f1b6d"
9380-
integrity sha512-R1LkER1N8uGj6ZM1nMvRybswnIy3DKdT2Vs3+8ECiOuGOxMy1NSGppEpCJqvM0aeRZfk+PWY1oGgbDEdaYw+sg==
9377+
react-navigation@^1.0.0:
9378+
version "1.6.1"
9379+
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.6.1.tgz#f08b560637edb5517f375bbd9bae3123e3027206"
9380+
integrity sha512-18qvuGEMorsYAtedvcDvrWi6eqdTOC7T2u1mSLddWCXKIwGsC44d4PfAzKtnd6JtMpvbCd+livTGyylfRHT2fA==
93819381
dependencies:
93829382
clamp "^1.0.1"
93839383
hoist-non-react-statics "^2.2.0"
93849384
path-to-regexp "^1.7.0"
93859385
prop-types "^15.5.10"
9386-
react-lifecycles-compat "^1.0.2"
9386+
react-lifecycles-compat "^3.0.2"
93879387
react-native-drawer-layout-polyfill "^1.3.2"
9388-
react-native-safe-area-view "^0.7.0"
9388+
react-native-safe-area-view "0.11.0"
93899389
react-native-tab-view "github:react-navigation/react-native-tab-view"
93909390

93919391
react-proxy@^1.1.7:

0 commit comments

Comments
 (0)