The KeyboardToolbar misbehaves on iPhones when wrapped by SafeAreaView

[Kreshnik]

Describe the bug There are two issues: the KeyboardToolbar is visible at the bottom of the view when the keyboard is closed, which I assume is caused by the SafeAreaView. Additionally, when the keyboard opens, the KeyboardToolbar is not completely docked to the keyboard but has an empty space in between.

Code snippet

  return (
    <SafeAreaView>
      <FlatList
          renderItem={({ item }) => {
            return (
              <Box w="100%">
                <item.component {...item.props} />
              </Box>
          )}}
          renderScrollComponent={(props) => (
            <KeyboardAwareScrollView {...props} style={{flex: 1}} />
          )}
        />
      <KeyboardToolbar doneText="Done" />
    </SafeAreaView>
  );

Repo for reproducing N/A

To Reproduce N/A

Expected behavior The KeyboardToolbar should not be visible when the keyboard is closed, and there should be no space between the KeyboardToolbar and the Keyboard.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max
• OS: iOS 17.0
• RN version: ^0.73.7
• RN architecture: new
• JS engine: default
• Library version: ^1.11.6

[kirillzyusko]

@Kreshnik hello 👋

Can you try to render KeyboardToolbar outside of SafeAreaView? Something like this:

return (
  <>
    <SafeAreaView>
      <FlatList
          renderItem={({ item }) => {
            return (
              <Box w="100%">
                <item.component {...item.props} />
              </Box>
          )}}
          renderScrollComponent={(props) => (
            <KeyboardAwareScrollView {...props} style={{flex: 1}} />
          )}
        />
    </SafeAreaView>
    <KeyboardToolbar doneText="Done" />
  </>
);

[kirillzyusko]

I'm going to close the issue.

KeyboardToolbar uses relative positioning, so it always must be in the end of the screen. If you can not put it in the end of the screen, then you can apply additional styles and wrap it within a view:

  return (
    <SafeAreaView>
      <FlatList
          renderItem={({ item }) => {
            return (
              <Box w="100%">
                <item.component {...item.props} />
              </Box>
          )}}
          renderScrollComponent={(props) => (
            <KeyboardAwareScrollView {...props} style={{flex: 1}} />
          )}
        />
      <View style={{paddingTop: 30 /* or any other value, like bottom tab bar height */}}>
        <KeyboardToolbar doneText="Done" />
      </View>
    </SafeAreaView>
  );