Why does the formsheet appear on top of keyboard when disabling library after being enabled on Android?

[itsramiel]

Hi,

I would like to understand the behaviour of something I am encountering. I have a screen which uses the presentation formsheet from react-native-screens v4 and react-navigation v7 which has a text input.

The code looks like this:

import {View, Text, TextInput} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {StaticParamList, createStaticNavigation, useNavigation} from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text onPress={() => navigation.navigate('Formsheet')}>Home Screen</Text>
    </View>
  );
}

function FormsheetScreen() {
  return (
    <View>
      <TextInput
        placeholder="Type something"
        style={{
          margin: 16,
          borderWidth: 1,
          borderColor: 'black',
          borderRadius: 8,
        }}
      />
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Formsheet: {
      screen: FormsheetScreen,
      options: {
        presentation: 'formSheet',
        sheetAllowedDetents: 'fitToContents',
        headerShown: false,
      },
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

type RootStackParamList = StaticParamList<typeof RootStack>;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

The behaviour so far is(iOS seems to have the formsheet above the keyboard while on Android the keyboard covers the input):

iOS	Android
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.12.33.48.mp4	Screen.Recording.2025-01-31.at.12.34.18.PM.mov

Now If I wrap the app with the KeyboardNavigator like so:

// code before...
export default function App() {
  return (
    <KeyboardProvider>
      <Navigation />
    </KeyboardProvider>
  );
}
// code after...

Then I still get the same behaviour as shown in the previous screen recording.

Weird Part

Now if I add the following code to the HomeScreen(not FormSheetScreen), which enables the lib on focus and disables it on blur:

  useFocusEffect(
    useCallback(() => {
      setEnabled(true);

      return () => {
        setEnabled(false);
      };
    }, []),
  );

then the SECOND time I navigate to the formsheet screen, the formsheet becomes above the keyboard.

iOS(unchanged)	Android
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.12.52.55.mp4	Screen.Recording.2025-01-31.at.12.52.07.PM.mov

My question

Why did the formsheet appear on top of the keyboard but only the second time I disabled the library? Note that the desired behavior is to have the formsheet appear on top of the keyboard but I dont understand why it happened when I disabled the library. Also why only on the second disabling?

[kirillzyusko]

It looks like edge-to-edge mode might be disabled 🤔

Would you mind quickly try to specify preserveEdgeToEdge prop on KeyboardProvider level and try again? In this case the keyboard-controller will not disable edge-to-edge after disabling a module 👀 (you'll need to use 1.16+ lib version)

If it still doesn't resolve the problem, then I'll try to clone your repo and see what happens there!

[itsramiel]

Hi @kirillzyusko,

Here I added the preserveEdgeToEdge prop, but what I see is that it is worse now:

Screen.Recording.2025-02-01.at.10.57.53.PM.mov

My issue mainly is that I want the formsheet to appear over the keyboard but I dont know why it happens when I disable the module but also more weirdly why only the second time I disable the module. Clearly disabling the module still does something which produces the expected behavior.

[kirillzyusko]

Oh, yeah, I see now @itsramiel what are you talking about

I'll look into your issue!

[wcastand]

is a solution was found for this one?

[FCalvesCodes]

Screenrecorder-2025-05-31-20-43-26-876.mp4

✅ I faced the same issue where the formSheet modal was overlapping with the keyboard on Android. The sheet didn't move up when the keyboard appeared.

To fix it, I used KeyboardStickyView from react-native-keyboard-controller and adjusted the screen options to remove shadows and force transparency.

✅ Working setup

<RootStack.Screen
  name="SimpleCalculatorScreen"
  component={SimpleCalculatorScreen}
  options={() => ({
    presentation: 'formSheet',
    contentStyle: { backgroundColor: 'transparent' },
    sheetElevation: 0,
    headerShown: false,
    sheetCornerRadius: 20,
    sheetAllowedDetents: [1],
  })}
/>

💡 Inside the screen component

import { KeyboardStickyView } from 'react-native-keyboard-controller';

return (
  <Box className="flex-1 justify-end">
    <KeyboardStickyView>
      <Box className="rounded-t-3xl bg-white">
        {/* content */}
      </Box>
    </KeyboardStickyView>
  </Box>
);

With this setup, the sheet behaves correctly: it floats above the keyboard and maintains a smooth experience on both Android.