Blank space beneath KeyboardToolbar after switching from emoji to text keyboard

[RobertPetricevic]

Describe the bug
On clicking input field, keyboard and keyboard toolbar is working fine. If I switch to emoji keyboard and then come back, there is blank space between keyboard and toolbar.

Code snippet

import React from 'react';
import { TextInput } from 'react-native';
import {
  KeyboardAwareScrollView,
  KeyboardToolbar,
} from 'react-native-keyboard-controller';

const Test = () => {
  return (
    <>
      <KeyboardAwareScrollView>
        <TextInput
          style={{
            height: 40,
            marginTop: 300,
            marginBottom: 50,
            borderColor: 'gray',
            borderWidth: 1,
          }}
        />
        <TextInput
          style={{
            height: 40,
            marginBottom: 50,
            borderColor: 'gray',
            borderWidth: 1,
          }}
        />
      </KeyboardAwareScrollView>
      <KeyboardToolbar />
    </>
  );
};

export default Test;

Smartphone (please complete the following information):

Device:

• simulator iPhone 15 Pro Max- iOS 17.5
• device iPhone Xs - iOS 18.0

Libraries:

• "expo": "^51.0.32"
• "react-native": "0.74.5"
• "react-native-keyboard-controller": "^1.13.3"

[kirillzyusko]

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-10-09.at.13.49.39.mp4

@RobertPetricevic I just tested and it works fine. Would you mind to elaborate a little bit more on:

• which device you are using (is it real or not)? As I can understand the problem is reproducible on simulator as well?
• is it reproducible in debug build?
• can you attach a video showing a problem?
• can you provide a reproduction example?
• can you verify whether the problem is reproducible on latest 1.14.0 release?

[RobertPetricevic]

@kirillzyusko, sorry I erased half of my content and video when I was pasting the code.

1. Yes is it reproducible on mentioned devices, physical iPhone xs and simulator iPhone 15
2. This video is recorded in development, but the same is on production
3. Here is the video
   https://github.com/user-attachments/assets/5c35d0b7-1eec-4112-ae02-33944adf16af
4. I cant provide repro now, but I will as soon as I get home
5. problem is reproducible on latest release

[kirillzyusko]

Thank you @RobertPetricevic 🙌

The video definitely looks strange. I can recommend you to try to 1.12.x version or even 1.11.x, but I think all of them will have the same problem 🤷‍♂️

Curious to see repo configuration and try to reproduce it on my end!

[kirillzyusko]

@RobertPetricevic have you tried to reproduce this problem in isolated environment? 👀

[RobertPetricevic]

@kirillzyusko uhhh hi sorry

I'll try it by the end of the week for sure, don't close issue yet :)

[kirillzyusko]

I'll try it by the end of the week for sure, don't close issue yet :)

Okay, sure 🙌

[RobertPetricevic]

I can't even reproduce my issue cause I'm stuck on this:

Why do I have this gap between toolbar and keyboard..... I have the simplest example

[kirillzyusko]

@RobertPetricevic can you share a full code sample (including styles)? Do you see a toolbar when keyboard is closed?

You can adjust the space between KeyboardToolbar and the keyboard via offset property, but I don't understand why your space is such a big one...

[RobertPetricevic]

@kirillzyusko here is the repo: https://github.com/RobertPetricevic/rnkc-test

sorry I'm slow again....

I don't see the toolbar when keyboard is closed

[kirillzyusko]

@RobertPetricevic can you check if #702 fixes the problem?

I used this code and it fixed the problem:

// app/(tabs)/settings/index.js
import { View, Text, TextInput, Button, StyleSheet, Platform } from 'react-native';
import { useRouter } from 'expo-router';
import { KeyboardToolbar, KeyboardAwareScrollView } from 'react-native-keyboard-controller';

export default function SettingsScreen() {
  const router = useRouter();
  const height = 80; // but better to use https://reactnavigation.org/docs/bottom-tab-navigator/#usebottomtabbarheight

  return (
    <>
      <KeyboardAwareScrollView
        style={{
          paddingTop: 100,
        }}>
        <Text style={styles.heading}>Settings Screen</Text>
        <TextInput placeholder="Input 1" style={styles.input} />
        <TextInput placeholder="Input 2" style={styles.input} />
        <Button title="Go to Second" onPress={() => router.push('/two/second')} />
      </KeyboardAwareScrollView>
      <KeyboardToolbar offset={{closed: height, opened: height}} />
    </>
  );
}

const styles = StyleSheet.create({
  heading: { fontSize: 24, marginBottom: 16 },
  input: {
    width: '80%',
    padding: 10,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
  },
});

You need to install the dependency from the branch that I used in PR (or apply a patch).

[kirillzyusko]

@RobertPetricevic I believe the problem should be fixed - I tested and merged the PR.

However if you discover any new issues - feel free to adjust your reproduction example, drop a message here and I'll re-open the issue.

Thank you for the collaboration and your effort put into improvement this library 😊 ❤️

[RobertPetricevic]

@kirillzyusko hi, so this new prop should be in the next release right?

[kirillzyusko]

Yes @RobertPetricevic 😀

Hopefully I can drop 1.15.0 soon (maybe in 1-2 weeks)

[RobertPetricevic]

great @kirillzyusko

thanks for effort, quick responses and of course, for this library 😊

[RobertPetricevic]

Hi @kirillzyusko, this gap between the toolbar and keyboard, as well as my initial bug, is now fixed with the use of "offset" props, thanks once more :)

I'll add a comment here with two more questions, and later, if you want, I can open an issue for them. If it turns out they are really bugs connected to this library, the course

So, let's begin with the one that is not a bug of this library for sure, but I would like to ask your opinion on this. I have initialized new project without your library and the bug is still there.
If I have two inputs that have the "secureEntry" prop, focusing on the first one will have a small but noticeable delay.

VID_20241202_164618.mp4

The second bug is this: if on both screens in the stack navigator I have KeyboardToolbar, on going back, I will, in the background, have a toolbar that is being dismissed as navigating back. I'm not sure what am I doing wrong.

ScreenRecording_12-02-2024.16-47-21_1.MP4

There's no much additional code, I just have a commit in which I have added secureEntry props

[kirillzyusko]

The second bug is this: if on both screens in the stack navigator I have KeyboardToolbar, on going back, I will, in the background, have a toolbar that is being dismissed as navigating back. I'm not sure what am I doing wrong.

It's definitely a bug. It basically happens because I animate two KeyboardToolbars at the same time... Me (as a library author) can not distinguish which toolbar is shown on the screen at the moment. Potentially I can add a new property enabled (similar to KeyboardAvoidingView and KeyboardAwareScrollView components) and you can use it like:

const isFocused = useIsFocused();

<KeyboardToolbar enabled={isFocused} />

In this case we'll animate only view that currently visible on the screen (it'll also improve performance a little bit, since we'll animate only one element instead of N-elements). Please, create an issue for that and I'll add a new prop (or if you want you can add this property yourself and open a PR).

---

Regarding second bug - does it happen only if you switch focus from Input 1 to Input 2? i don't see a delay when you switch between input 1 and input 3 🤔 It looks like only input 2 slow things down, right?

[RobertPetricevic]

@kirillzyusko quick again :)

okay I get it, I'll open a separate issue thanks :)

for the second bug - yes delay is visible when I switch focus from Input 1 to Input 2 or from Input 3 to Input 2.
When focus is switched between Input 1 and Input 3, and vice versa, there is no delay

[kirillzyusko]

When focus is switched between Input 1 and Input 3, and vice versa, there is no delay

Got it

Well, I can not recommend anything - I don't know why such delay happens 🤔 I think I saw such delays in example app as well, but as you said earlier - if it's reproducible without keyboard-controller, then it means that the problem is somewhere in react-native itself.

You can try to profile the app using XCode tools - maybe they can give any insights into what's going wrong. Or open an issue in react-native repository 🙂

[RobertPetricevic]

Yes, it is definitely something with the react-native itself. Thanks once more @kirillzyusko