react-native-keyboard-spacer icon indicating copy to clipboard operation
react-native-keyboard-spacer copied to clipboard

Enable scrolling when keyboard is open

Open Andreyco opened this issue 8 years ago • 3 comments

If content is larger than screen height, you should be allowed to scroll, or at least allow user to specify behaviour

Andreyco avatar May 25 '16 22:05 Andreyco

This component just maps the keyboards occupied space into a react-native view.

Behavior like that would be controlled by the views you put your content inside, you should be able to achieve this behavior by putting your content in a scroll view while the keyboard spacer is outside.

Your view hierarchy would look something like this:

AppView
|
|-- ScrollView
|       | -- Content Views
|
|-- KeyboardSpacer

Andr3wHur5t avatar May 25 '16 23:05 Andr3wHur5t

It still doesn't seem to work as expected following that setup. I only managed to make it work once as expected when i used position: 'absolute' like this:

  <View>
    <ScrollView style={{ flex: 1 }} >
      <TextInput style={{ position: 'absolute', bottom: 0, height: 100, width: 300,
borderColor: 'red', borderWidth: 2 }} />
    </ScrollView>
    <KeyboardSpacer />
  </View>

imalbert avatar May 28 '16 08:05 imalbert

@imalbert: you could also put your text view outside of the scroll view and drop the absolute styling.

The position of the input wasn't defined in the AC so the solution I gave was general purpose for scrolling content.

For example you could put your input view in the scroll view and adjust the scroll view scroll position to always display the input in the visible part of the scroll view while using this module to occupy the space of the keyboard. This way your scroll view only needs to know about its size not the external size of the keyboard.

@Andreyco: if you still have questions can you post more details about the problem I would be glad to help.

Andr3wHur5t avatar Jun 06 '16 04:06 Andr3wHur5t