Keyboard handling does not work in edgeToEdge mode

[teivienn]

When using edge to edge mode TrueSheet does not handle the keyboard state in any way

I also tried using the react-native-keyboard-controller add-on library for keyboard handling but it doesn't work inside TrueSheet

env

• new arch
• expo 52
• react native 0.76.6

Example to reproduce

import { Button, View, Text, TextInput } from 'react-native';

import { TrueSheet } from '@lodev09/react-native-true-sheet';
import { useRef } from 'react';

export default function App() {
  const sheet = useRef<TrueSheet>(null);

  return (
    <View
      style={{
        paddingTop: 100,
        paddingHorizontal: 20,
        backgroundColor: 'white',
        flex: 1,
      }}
    >
      <Button title="Open Sheet" onPress={() => sheet.current?.present()} />

      <TrueSheet ref={sheet} cornerRadius={25} edgeToEdge>
        <View style={{ height: 100, backgroundColor: 'white', padding: 20 }}>
          <Text>Input</Text>
          <TextInput
            placeholder="placeholder"
            style={{ borderWidth: 1, height: 50 }}
          />
        </View>
      </TrueSheet>
    </View>
  );
}

screenshots

disabled	enabled

[teivienn]

I think we should use imePadding for such cases. I unfortunately don't understand how to use it outside of “android compose”

[shovel-kun]

It seems setting these flags breaks keyboard soft input layouting.

react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt

Lines 108 to 112 in 798a1f0

	window?.apply {
	setFlags(
	WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
	WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
	)

[shovel-kun]

I've managed to fix keyboard handling in edge to edge. The changes are quite simple, except for one annoying thing: as stated in #103, I've had to fork the original material-components-android source code to remove the bottom and top padding of RootSheetView. If I don't do this, RootSheetView will not take up the entire screen and will have insets applied for navigation and systembar, causing Footer view to be cut off. I will describe the changes I've made below.

1. Create TrueSheetDialog style so BottomSheet knows to handle EdgeToEdge mode:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="TrueSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
      <item name="enableEdgeToEdge">true</item>
      <item name="paddingBottomSystemWindowInsets">true</item>
      <item name="paddingLeftSystemWindowInsets">true</item>
      <item name="paddingRightSystemWindowInsets">true</item>
      <item name="paddingTopSystemWindowInsets">true</item>
  </style>
</resources>

2. In TrueSheetDialog.kt, add the following code:

class TrueSheetDialog(private val reactContext: ThemedReactContext, private val rootSheetView: RootSheetView) :
  BottomSheetDialog(ContextThemeWrapper(reactContext, R.style.TrueSheetDialog)) {

...

  override fun onStart() {
    super.onStart()

    if (edgeToEdge) {
      window?.let {
        it.statusBarColor = Color.TRANSPARENT
        it.navigationBarColor = Color.TRANSPARENT
        it.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
      }
    }
  }

...

3. Now the tricky part, in your forked material-components-android, in com/google/android/material/bottomsheet/BottomSheetDialog.java, comment out top and bottom padding to be zero:

    private void setPaddingForPosition(View bottomSheet) {
      if (bottomSheet.getTop() < insetsCompat.getSystemWindowInsetTop()) {
        // If the bottomsheet is light, we should set light status bar so the icons are visible
        // since the bottomsheet is now under the status bar.
        if (window != null) {
          EdgeToEdgeUtils.setLightStatusBar(
              window, lightBottomSheet == null ? lightStatusBar : lightBottomSheet);
        }
        // Smooth transition into status bar when drawing edge to edge.
        bottomSheet.setPadding(
            bottomSheet.getPaddingLeft(),
            0, // (insetsCompat.getSystemWindowInsetTop() - bottomSheet.getTop()),
            bottomSheet.getPaddingRight(),
            0); // bottomSheet.getPaddingBottom());
      } else if (bottomSheet.getTop() != 0) {
        // Reset the status bar icons to the original color because the bottomsheet is not under the
        // status bar.
        if (window != null) {
          EdgeToEdgeUtils.setLightStatusBar(window, lightStatusBar);
        }
        bottomSheet.setPadding(
            bottomSheet.getPaddingLeft(),
            0,
            bottomSheet.getPaddingRight(),
            0); // bottomSheet.getPaddingBottom());
      }
    }
  }

If anyone knows how to 'patch' or to disable the paddings for step 3 without forking, that would be a great help in resolving this issue. @lodev09 thoughts?

Screen_recording_20250504_154956.mp4