Fix bottom insets being affected by the keyboard on Android

th3rdwave · May 22, 2020 · 67c8a39 · 67c8a39
1 parent 93568d0
commit 67c8a39
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaUtils.java b/android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaUtils.java
@@ -19,7 +19,11 @@
       return new EdgeInsets(
           insets.getSystemWindowInsetTop(),
           insets.getSystemWindowInsetRight(),
-          insets.getSystemWindowInsetBottom(),
+          // System insets are more reliable to account for notches but the
+          // system inset for bottom includes the soft keyboard which we don't
+          // want to be consistent with iOS. In practice it should always be
+          // correct since there cannot be a notch on this edge.
+          insets.getStableInsetBottom(),
           insets.getSystemWindowInsetLeft());
     } else {
       Rect visibleRect = new Rect();

diff --git a/example/src/HooksExample.tsx b/example/src/HooksExample.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text, StatusBar, ScrollView } from 'react-native';
+import { View, Text, StatusBar, ScrollView, TextInput } from 'react-native';
 
 import {
   SafeAreaProvider,
@@ -63,6 +63,9 @@ function SimpleExampleScreen() {
         }}
       >
         <ScrollView style={{ flex: 1, backgroundColor: '#eee' }}>
+          <Card title="Input">
+            <TextInput style={{ backgroundColor: '#eee', borderRadius: 3 }} />
+          </Card>
           <Card title="Provider insets">
             <DataView data={insets} />
           </Card>