Use safe area insets to adjust keyboard offset

mhoran · Dec 17, 2024 · 4c317b7 · 4c317b7
1 parent d343e66
commit 4c317b7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 49 deletions.
diff --git a/src/usecase/settings/ConnectionSettings.tsx b/src/usecase/settings/ConnectionSettings.tsx
@@ -103,7 +103,7 @@ class ConnectionSettings extends React.PureComponent<Props, State> {
     return (
       <View style={styles.container}>
         <SafeAreaView edges={['right', 'bottom', 'left']}>
-          <StatusBar barStyle="dark-content" />
+          <StatusBar barStyle="dark-content" translucent={true} />
           <Text style={styles.text}>
             WeechatRN is a relay client for the WeeChat IRC client. WeechatRN
             supports the WebSocket connection method only. Configure your relay

diff --git a/src/usecase/settings/UploadSettings.tsx b/src/usecase/settings/UploadSettings.tsx
@@ -1,4 +1,3 @@
-import { useHeaderHeight } from '@react-navigation/elements';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { memo, useCallback, useEffect, useReducer, useRef } from 'react';
 import {
@@ -29,7 +28,6 @@ const mergeState = <T,>(oldState: T, newState: Partial<T>): T => ({
 
 const UploadSettings: React.FC<NavigationProps> = ({ navigation }) => {
   const dispatch = useAppDispatch();
-  const headerHeight = useHeaderHeight();
 
   const uploadOptions = useAppSelector(
     (state) => state.connection.mediaUploadOptions
@@ -91,12 +89,9 @@ const UploadSettings: React.FC<NavigationProps> = ({ navigation }) => {
 
   return (
     <SafeAreaView style={styles.container} edges={['right', 'bottom', 'left']}>
-      <KeyboardAvoidingView
-        keyboardVerticalOffset={headerHeight}
-        behavior="padding"
-      >
+      <KeyboardAvoidingView behavior="padding">
         <ScrollView alwaysBounceVertical={false}>
-          <StatusBar barStyle="dark-content" />
+          <StatusBar barStyle="dark-content" translucent={true} />
           <Text style={styles.text}>
             Use the form below to configure media upload settings. This allows
             for uploading media to hosting provider and will automatically paste

diff --git a/src/usecase/shared/KeyboardAvoidingView.tsx b/src/usecase/shared/KeyboardAvoidingView.tsx
@@ -1,62 +1,28 @@
-import { useCallback } from 'react';
-import type { LayoutChangeEvent, LayoutRectangle } from 'react-native';
-import { Platform, useWindowDimensions, type ViewStyle } from 'react-native';
+import { type ViewStyle } from 'react-native';
 import Animated, {
   KeyboardState,
-  runOnUI,
   useAnimatedKeyboard,
-  useAnimatedStyle,
-  useSharedValue
+  useAnimatedStyle
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface Props {
   style?: ViewStyle;
   behavior?: string;
-  keyboardVerticalOffset?: number;
 }
 
 export const KeyboardAvoidingView: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   style,
-  behavior,
-  keyboardVerticalOffset = 0
+  behavior
 }) => {
   const keyboard = useAnimatedKeyboard({
     isStatusBarTranslucentAndroid: true
   });
-  const currentFrame = useSharedValue<LayoutRectangle | null>(null);
-  const { height: screenHeight } = useWindowDimensions();
   const safeAreaInsets = useSafeAreaInsets();
-  const topInset = Platform.OS === 'android' ? safeAreaInsets.top : 0;
-
-  const setCurrentFrame = useCallback(
-    (layout: LayoutRectangle) => {
-      'worklet';
-      currentFrame.value = layout;
-    },
-    [currentFrame]
-  );
-
-  const onLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      runOnUI(setCurrentFrame)(event.nativeEvent.layout);
-    },
-    [setCurrentFrame]
-  );
 
   const animatedStyles = useAnimatedStyle(() => {
-    if (!currentFrame.value) return {};
-
-    const offset = Math.max(
-      currentFrame.value.y +
-        currentFrame.value.height -
-        (screenHeight +
-          topInset -
-          keyboard.height.value -
-          keyboardVerticalOffset),
-      0
-    );
+    const offset = Math.max(keyboard.height.value - safeAreaInsets.bottom, 0);
 
     if (behavior === 'padding') {
       return { paddingBottom: offset };
@@ -71,8 +37,6 @@ export const KeyboardAvoidingView: React.FC<React.PropsWithChildren<Props>> = ({
   });
 
   return (
-    <Animated.View onLayout={onLayout} style={[style, animatedStyles]}>
-      {children}
-    </Animated.View>
+    <Animated.View style={[style, animatedStyles]}>{children}</Animated.View>
   );
 };