react-native-gifted-form
react-native-gifted-form copied to clipboard
FaridSafi
Handling keyboard popup with ScrollView?
Sometime form could be large and text input could be invisible when keyboard is shown. How to fix it? I saw fixes like here: http://stackoverflow.com/questions/29313244/how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus
It would be nice to have it as built-in functionality...
I implemented such feature https://github.com/FaridSafi/react-native-gifted-form/blob/master/mixins/ContainerMixin.js#L43 If it's not working, then we have a new bug
I guess i should use GiftedForm as container (root) view this way. But my widgets are not direct successors (because of layout, some of them should be grouped inside another view), so they will not be recognized, right? Now I have two GiftedForms with the same name - one for elements inside one view and another for submit button (which is placed at different place).
Yes you can use as root. You can put all kinds of views inside GiftedForm, not only widgets
But if i need to place 'input' widgets inside another view and that view will be inside GiftedForm, widgets will not be recognized as widgets (because they are not direct children)...
correct, one solution can be to do like https://github.com/FaridSafi/react-native-gifted-form/blob/master/widgets/GroupWidget.js#L20 in your direct children
Thanks, implemented it, but behavior is quite weird, it scrolls to right, not to bottom:
weird, what if you replace https://github.com/FaridSafi/react-native-gifted-form/blob/c748128caf005a3aca5a624b1bf5210a92bb3698/mixins/ContainerMixin.js#L51 by
this._scrollResponder.scrollWithoutAnimationTo(0, this._pageY + this._y - this._locationY - keyboardHeight + 44);
Works better, thanks, will you commit it? One problem - it doesn't scroll back to top when i focus on upper elements (i.e. restore position)
I don't understand why x and y are inverted in your case. Which RN version are you using (I didn't test with last ones) ?
@danielweinmann Are you using 0.19 and experimenting scrollWithoutAnimationTo issue too ?
I didn't test but I guess it can be fixed by scrollTo({x, y, animated: false})
Your text input widget with right image looks nice! you should share it :smiley:
I could submit PR for scrollTo and widget enhancement but i can't now, because one PR is waiting already (i don't want to mix everything in one PR)
@FaridSafi @aksonov I'm using 0.19 and I do experiment the issue ;)
Actually, I'm using scrollEnabled={false} in all my forms right now, since I don't need it so badly and didn't want to take the time to fix it.
@FaridSafi I'm experiencing this issue as well (RN 0.19), and I've found using scrollTo instead of scrollWithoutAnimationTo seems to fix it.
@FaridSafi Could we also restore scroll position once keyboard is disappeared?
Thank you guys. I published 0.0.5 with support of react-native 0.20.0 ScrollView.scrollTo({x: 0, y: 5, animated: true})
@aksonov @FaridSafi Could we also restore scroll position once keyboard is disappeared?
I couldn't manage to do it
0.0.5 works great, thanks!
What the problem with scroll restoring? Have you tried just to subscribe to keyboard events, like described here: https://github.com/johanneslumpe/react-native-keyboardevents
Current hardcode keyboard height looks not good.
@aksonov I can't remember exactly what was the problem with restoring but it might be related to the contentInset of the ScrollView
I didn't try keyboard events when I implemented it. | agree hardcore keyboard height is not good solution.
Sorry I can't work on this right now. If someone has time to improve the scrolling, I recommend to use the ScrollView Props onKeyboardWillShow/onKeyboardWillHide on iOS and onKeyboardDidShow/onKeyboardDidHide on Android (if onKeyboardWillShow doesn't work in Android)
onKeyboardWillShow(e) {
console.log('keyboard height '+(e.endCoordinates ? e.endCoordinates.height : e.end.height));
},