Work in progress

kirillzyusko · Dec 10, 2023 · 3080d97 · 3080d97
1 parent 64dc299
commit 3080d97
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 6 deletions.
diff --git a/...ple/android/app/src/main/java/com/example/reactnativekeyboardcontroller/MainActivity.java b/...ple/android/app/src/main/java/com/example/reactnativekeyboardcontroller/MainActivity.java
@@ -1,6 +1,14 @@
 package com.example.reactnativekeyboardcontroller;
 
+import android.graphics.Color;
+import android.os.Build;
 import android.os.Bundle;
+import android.view.View;
+import android.view.Window;
+import android.view.WindowManager;
+
+import androidx.core.view.WindowCompat;
+import androidx.core.view.WindowInsetsControllerCompat;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -34,5 +42,45 @@ protected ReactActivityDelegate createReactActivityDelegate() {
   @Override
   public void onCreate(Bundle savedInstanceState) {
     super.onCreate(null);
+
+    // set up the edge-to-edge display
+    final boolean darkContentBars = true;
+    final Window window = getWindow();
+    final View view = window.getDecorView();
+
+    final WindowInsetsControllerCompat insetsController =
+      new WindowInsetsControllerCompat(window, view);
+
+    WindowCompat.setDecorFitsSystemWindows(window, false);
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O_MR1) {
+      window.clearFlags(
+        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS |
+          WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION
+      );
+
+      window.setStatusBarColor(Color.TRANSPARENT);
+      window.setNavigationBarColor(Color.TRANSPARENT);
+
+      insetsController.setAppearanceLightStatusBars(darkContentBars);
+      insetsController.setAppearanceLightNavigationBars(darkContentBars);
+
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+        window.setStatusBarContrastEnforced(false);
+        window.setNavigationBarContrastEnforced(false);
+      }
+    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+      window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+      window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+
+      window.setStatusBarColor(Color.TRANSPARENT);
+
+      insetsController.setAppearanceLightStatusBars(darkContentBars);
+    } else {
+      window.addFlags(
+        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS |
+          WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION
+      );
+    }
   }
 }
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -759,4 +759,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 45614159967e4f036f83a709a2537d9ed3694b03
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.14.3
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -39,7 +39,7 @@ export default function App() {
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <GestureHandlerRootView style={styles.root}>
-        <KeyboardProvider statusBarTranslucent>
+        <KeyboardProvider statusBarTranslucent navigationBarTranslucent>
           <NavigationContainer linking={linking} fallback={spinner}>
             <RootStack />
           </NavigationContainer>

diff --git a/example/src/components/KeyboardAnimation/index.tsx b/example/src/components/KeyboardAnimation/index.tsx
@@ -5,10 +5,12 @@ import {
   useKeyboardAnimationReplica,
 } from 'react-native-keyboard-controller';
 import styles from './styles';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function KeyboardAnimation() {
   const { height, progress } = useKeyboardAnimation();
   const { height: heightReplica } = useKeyboardAnimationReplica();
+  const { bottom: bottomInset } = useSafeAreaInsets();
 
   return (
     <View style={styles.container}>
@@ -47,7 +49,9 @@ export default function KeyboardAnimation() {
               height: 50,
               backgroundColor: 'red',
               borderRadius: 25,
-              transform: [{ translateY: height }],
+              transform: [
+                { translateY: Animated.subtract(height, bottomInset) },
+              ],
             }}
           />
           <Animated.View
@@ -56,7 +60,9 @@ export default function KeyboardAnimation() {
               height: 50,
               backgroundColor: 'blue',
               borderRadius: 25,
-              transform: [{ translateY: heightReplica }],
+              transform: [
+                { translateY: Animated.subtract(heightReplica, bottomInset) },
+              ],
             }}
           />
         </View>

diff --git a/example/src/screens/Examples/ReanimatedChat/index.tsx b/example/src/screens/Examples/ReanimatedChat/index.tsx
@@ -13,6 +13,7 @@ import styles from './styles';
 
 import type { StackScreenProps } from '@react-navigation/stack';
 import type { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
 
@@ -35,9 +36,11 @@ function ReanimatedChat({ navigation }: Props) {
 
   const { height: telegram } = useTelegramTransitions();
   const { height: platform } = useReanimatedKeyboardAnimation();
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
   const height = useDerivedValue(
-    () => (isTGTransition ? telegram.value : platform.value),
-    [isTGTransition]
+    () => (isTGTransition ? telegram.value : platform.value) - bottomInset,
+    [isTGTransition, bottomInset]
   );
 
   const scrollViewStyle = useAnimatedStyle(