Add spacing from Input to keyboard

[tanlucvo]

Feature request

How to add spacing , In this case I must scroll bottom to show content below

Screen.Recording.2023-08-06.at.17.45.24.mov

[mateusz1913]

Use AvoidSoftInput.setAvoidOffset or avoidOffset depending on what API you're using in this case

[tanlucvo]

It delay and create white space below input, seem that offset for parent

Screen.Recording.2023-08-06.at.20.27.20.mov

[bryanprimus]

Instead of setting the offset, you can probably just apply a paddingBottom to your ChatBox container.

[tanlucvo]

I tried but i got same result, i found this lib react-native-keyboard-manager has solution for this issue. But I still want to use this component ^-^

[mateusz1913]

@tanlucvo could you elaborate more on what spacing you actually want to add? The initial description of your case is unclear to me

[tanlucvo]

In this video, i wrap input in View have backgroundColor blue.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-07.at.10.47.05.mp4

after keyboard show:

But i want all view backgroundColor blue above keyboard, I don't need to scroll bottom. picture below

[mateusz1913]

@tanlucvo the padding added by library is added to the input element and not the arbitrary container that wraps the input. You need to rearrange the styles in your case, so that the blue container has no padding at the bottom and the input has some padding bottom provided by you (+ the one added by library when the keyboard is displayed)

[traxx10]

I have the same issue.
In my case, i don't want padding but i want the input to scroll a bit more to the top so the contents below the input can show.

For example, i have an address input but as the user types, they can't see the suggestions below unless they scroll.

Screenrecorder-2023-08-11-10-33-25-894.mp4

[mateusz1913]

Hi @traxx10, like I explained before - there's no way for the library to know which UI elements visually belong to your custom text field component (e.g. some info/error labels displayed below the text field).
The library only detects the text field native element (UITextField/UITextView on iOS and EditText on Android) and tries to make those exact elements visible.

It's not possible for any library, to predict where some custom text field component (that's wrapped with some style container and additional elements like labels) begin or end its bounds on the screen. The best it can do is to locate the field element with which user will be interacting.

[traxx10]

Okay thank you

[GollyJer]

Hi @mateusz1913. I came to post about this same issue and found this discussion.
Does AvoidSoftInput have any knowledge of the scroll position after the keyboard is fully shown?

I was hoping to tackle this with something like...

useSoftInputShown(({ scrollPositionY }) => {
    scrollViewRef.current?.scrollTo({
      y: scrollPositionY + 20,
      animated: true,
    });
  });

I realize scrollPositionY doesn't exist. But wondering if possible?
The other thing I realized while trying to figure something out is that useSoftInputShown actually fires before the keyboard is shown.
It's more like useSoftInputWillShow. I was trying to store the scroll position separately and update a local piece of state with the Y position via onScroll when I realized there was no way to capture the end of the keyboard scrolling. onScrollMomentumEnd isn't triggered by AvoidSoftInput.

Basically what I'm trying to accomplish is

• wait for keyboard to fully show.
• get the current y position
• move it just a little more

Thanks for any ideas!

[mateusz1913]

Hi @GollyJer, I believe it should just be possible to assign onScroll listener to the ScrollView you want to scroll and when the keyboard is displayed and the onScroll events fired, you can somehow trigger scrollTo method.
I don't plan to add any scrollPositionY value, as it's not the responsibility of this library to retrieve such value + it would be super complex to achieve that