fix: provide real safe area view (#911)

* fix(android): set SafeAreaView insets explicitly

* chore(dep): force to use [email protected]

* chore: not need to use forceInset

* fix: use the fork to support pre-AndroidX

* fix: lint

* fix: ignore the line

Author: chinesedfan

App.js

@@ -7,10 +7,9 @@ import {
   StatusBar,
   Platform,
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
-import DeviceInfo from 'react-native-device-info';
 import codePush from 'react-native-code-push';
 import { PersistGate } from 'redux-persist/integration/react';
+import { SafeAreaProvider } from 'react-native-safe-area-context'; // eslint-disable-line
 import { colors, getStatusBarConfig } from 'config';
 import { getCurrentLocale, configureLocale } from 'utils';
 import { GitPoint } from './routes';
@@ -32,11 +31,6 @@ if (console) {
   console.disableYellowBox = true; // eslint-disable-line no-console
 }
 
-if (Platform.OS === 'android' && DeviceInfo.hasNotch()) {
-  // FIXME: real value for status bar height + notch height
-  SafeAreaView.setStatusBarHeight(44);
-}
-
 class App extends Component {
   static async initLocale() {
     const locale = await getCurrentLocale();
@@ -107,9 +101,11 @@ class App extends Component {
     return (
       <Provider store={configureStore}>
         <PersistGate loading={this.renderLogo} persistor={persistor}>
-          <GitPoint onNavigationStateChange={this.statusBarHandler}>
-            <StatusBar />
-          </GitPoint>
+          <SafeAreaProvider>
+            <GitPoint onNavigationStateChange={this.statusBarHandler}>
+              <StatusBar />
+            </GitPoint>
+          </SafeAreaProvider>
         </PersistGate>
       </Provider>
     );

android/app/build.gradle

@@ -148,6 +148,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-safe-area-context')
     implementation project(':react-native-webview')
     implementation project(':@react-native-community_async-storage')
     compile project(':react-native-svg')

android/app/src/main/java/com/gitpoint/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.horcrux.svg.SvgPackage;
@@ -40,6 +41,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new SafeAreaContextPackage(),
             new RNCWebViewPackage(),
             new AsyncStoragePackage(),
             new SvgPackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'GitPoint'
+include ':react-native-safe-area-context'
+project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':@react-native-community_async-storage'

ios/GitPoint.xcodeproj/project.pbxproj

@@ -82,6 +82,7 @@
     "react-native-parallax-scroll-view": "^0.20.1",
     "react-native-photo-view": "^1.5.2",
     "react-native-safari-view": "^2.0.0",
+    "react-native-safe-area-context": "chinesedfan/react-native-safe-area-context#git-point",
     "react-native-search-bar": "^3.3.1",
     "react-native-simple-toast": "^0.0.8",
     "react-native-svg": "^6.3.1",
@@ -153,6 +154,7 @@
     "stylelint-processor-styled-components": "^1.0.0"
   },
   "resolutions": {
+    "react-native-safe-area-view": "1.0.0",
     "react-native-tab-view": "chinesedfan/react-native-tab-view#git-point"
   },
   "jest": {

package.json

@@ -19,7 +19,7 @@ import {
   UserListItem,
   EntityInfo,
 } from 'components';
-import { colors, fonts, normalize } from 'config';
+import { colors, fonts, normalize, getHeaderForceInset } from 'config';
 import { getUser, getOrgs, getStarCount } from 'auth';
 import { emojifyText, openURLInView, t } from 'utils';
 
@@ -44,7 +44,7 @@ const mapDispatchToProps = dispatch =>
   );
 
 const StyledSafeAreaView = styled(SafeAreaView).attrs({
-  forceInset: { top: 'always', bottom: 'never' },
+  forceInset: getHeaderForceInset('MyProfile'),
 })`
   background-color: ${colors.primaryDark};
 `;

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

@@ -50,7 +50,7 @@ const ModalWrapper = styled.View`
 const StyledSafeAreaView = styled(SafeAreaView).attrs({
   forceInset: Platform.select({
     ios: { top: 'always', bottom: 'never' },
-    android: {},
+    android: { top: 'never', bottom: 'never' },
   }),
 })`
   background-color: ${colors.githubDark};

src/auth/screens/login.screen.js

@@ -60,7 +60,6 @@ class Welcome extends Component {
       CookieManager.clearAll().then(() => {
         auth(code, state).then(() => {
           getUser().then(() => {
-            console.log('resetNavigationTo Main');
             resetNavigationTo('Main', navigation);
           });
         });

src/auth/screens/welcome.screen.js

@@ -26,4 +26,6 @@ export const getStatusBarConfig = routeName =>
     : darkStatusBar;
 
 export const getHeaderForceInset = routeName =>
-  lightScreens.includes(routeName) ? { top: 'always', bottom: 'never' } : {};
+  lightScreens.includes(routeName)
+    ? { top: 'always', bottom: 'never' }
+    : {};