Andr3wHur5t / react-native-keyboard-spacer

Plug and play react-native keyboard spacer view.
MIT License
1.56k stars 219 forks source link

Enable scrolling when keyboard is open #22

Open Andreyco opened 8 years ago

Andreyco commented 8 years ago

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

Andr3wHur5t commented 8 years ago

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
imalbert commented 8 years ago

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>
Andr3wHur5t commented 8 years ago

@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.