What is the best practice to avoid Inputs with FormSheet presentation?

[itsramiel]

Hi,

I have an app that uses react-native-screen's formsheet presentation.

on iOS the formsheet seems to entirely avoid the keyboard which is interesting. I still have to dig around if it breaks later.
On Android, the keyboard goes over the Formsheet. What is the recommended approach here.

Example Code

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

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

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ padding: 16 }}>
      <TextInput
        placeholder="Type here"
        style={{ padding: 12, borderWidth: 1, borderColor: 'black' }}
      />
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Settings: {
      screen: SettingsScreen,
      options: {
        presentation: 'formSheet',
        sheetAllowedDetents: 'fitToContents',
      },
    },
  },
});

type RootStackParamList = StaticParamList<typeof RootStack>;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}
const Navigation = createStaticNavigation(RootStack);

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

Repo

Keyboard Closed

Android	iOS

Keyboard Opened

Android	iOS

[itsramiel]

@kirillzyusko any insights here?

[itsramiel]

Unfortunately it doesnt work. The screen itself doesnt go up

[kirillzyusko]

Ah, got it! Cloning your repo to see why it doesn't work 👀

[itsramiel]

Hmm I guess the main issue is from react-native-screens:
https://github.com/software-mansion/react-native-screens/issues/2774
https://github.com/software-mansion/react-native-screens/issues/2560

There are some promising prs but unfortunately been held for quite a while:

https://github.com/software-mansion/react-native-screens/pull/2570
https://github.com/software-mansion/react-native-screens/pull/2923

Hope they get sorted out soon 🤞

But if you have a workaround I would love to know

[kirillzyusko]

I investigated a little bit. It looks like KeyboardStickyView actually works, but somehow it doesn't move inner content. Or maybe it's moving, but maybe sheet has kind of overflow: hidden so that all inner content gets pushed above and becomes invisible 🤷‍♂️

Need to investigate more 😊

[itsramiel]

Thanks for the investigation. Hope we can have it work soon!

[slavkolukic]

@itsramiel

Keyboard avoiding will have difficult time adjusting in screens with dynamic and unpredictable heights, one way I solved similar problem was forcing form sheet height to '100%'.
Anyways when keyboard is open, it will go to top of the screen even if you don't want it at 100% so why just not fix it at 100%?