Comments (40)
@wootwoot1234 Do you test it with <ScrollView/>
? After removing keyboard, it makes extra slack on the bottom. um...
from react-native-keyboard-aware-scroll-view.
@MovingGifts I think <KeyboardAvoidingView />
is not mature to go production. Currently, stick on this library.
from react-native-keyboard-aware-scroll-view.
@JosephDev this fixes the weird extra space on android and makes the height calculate correctly when a ScrollView
is a child of KeyboardAvoidingView
. Hopefully the react native team will merge the open PR soon
from react-native-keyboard-aware-scroll-view.
Using KeyboardAvoidingView inside a ScrollView on android does nothing with RN0.42 as far as I can see. Or is there a trick to using correctly?
from react-native-keyboard-aware-scroll-view.
Unstable indeed:
https://github.com/facebook/react-native/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20keyboardavoidingview%20in%3Atitle%20
from react-native-keyboard-aware-scroll-view.
@JosephDev I have the same issue with <ScrollView/>
. When the keyboard is removed, there is extra slack on the bottom, until you manually scroll the scrollview to bring it back down to cover the slack.
Did you find a solution using <KeyboardAvoidingView />
with <ScrollView/>
where it automatically handles the slack removal on keyboard removal?
from react-native-keyboard-aware-scroll-view.
I think documentation could use some love. It seems like a good PR. I am trying it out, but for now I can't seem to figure out if it is suppose to be a spacer or some kind of wrapper. Current example doesn't seem to be working on android. Visuals would be nice too.
from react-native-keyboard-aware-scroll-view.
I don't think it's a good option to use both together in the same component.
from react-native-keyboard-aware-scroll-view.
@pgonzalez-santiago It worked fine, make sure you using the behaviour property height and not padding.
from react-native-keyboard-aware-scroll-view.
Maybe this is a perfect solution: https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580
from react-native-keyboard-aware-scroll-view.
I tried RN built-in KeyboardAvoidingView, this library and some other but none of them worked out well.
Because, other libraries and styling interfere the position of the views and react-native somehow can't measure the exact position from a scrollview's top to text input's top position.
I ended up using /hackiftekhar/IQKeyboardManager for iOS. Android has a native keyboard avoiding support that you define in AndroidManifest.
from react-native-keyboard-aware-scroll-view.
I've tried to convert to KeyboardAvoidingView
but consistently return to this library, especially for longer forms / scrollviews. This one is basically a plug-and-play replacement for a scrollview, in my experience.
from react-native-keyboard-aware-scroll-view.
For the keyboard avoiding view to properly work you need to have the keyboard as a parent of the scrollview and use the behavior of padding to properly work. @MovingGifts
from react-native-keyboard-aware-scroll-view.
Too many weird issue with this even now. :(
from react-native-keyboard-aware-scroll-view.
@iRoachie doesnt work. :( If I set "adjustResize" the keyboard wont push the view up (as in iOs) and it is what i'm trying.
from react-native-keyboard-aware-scroll-view.
Ah, it works but not if there's anything below the scrollview.
from react-native-keyboard-aware-scroll-view.
:D and problem is gone
from react-native-keyboard-aware-scroll-view.
I've seen that component @wootwoot1234, but I haven't used it yet. It would be great if it provided the same functionality of my component. The keyboard handling is something that I feel that should live in the core.
from react-native-keyboard-aware-scroll-view.
I am consideration <KeyboardAvoidingView />
component as @wootwoot1234
I followed react native docs, however it doesn't work as my expectation.
Please let me know if there is any update on this issue.
from react-native-keyboard-aware-scroll-view.
I have switched over to <KeyboardAvoidingView />
. It's working great for me. I think there are three options: position
, padding
, and height
. Try out each one, they all work a little different.
from react-native-keyboard-aware-scroll-view.
Hi @wootwoot1234,
I also tried to work with KeyboardAvoidingView but for some reason it does not work as I expect it too.
Will you be willing to share a sample of your code ?
from react-native-keyboard-aware-scroll-view.
@teodors @JosephDev Sounds good, I opened up an issue with a visual of the issue here. facebook/react-native#10765
from react-native-keyboard-aware-scroll-view.
When using KeyboardAwareScrollView with KeyboardAvoidingView there is a keyboard height white space at the bottom of the KeyboardAvoidingView.
from react-native-keyboard-aware-scroll-view.
@Lepozepo I did a search and there doesn't seem to be an open PR and even if there is, and they merge it. It is not going to be available until late (last day of) February. Or if you live that renegade life, early February for unstable. So, it still isn't going to be production ready for some time.
from react-native-keyboard-aware-scroll-view.
@teodors you're right. I'm testing it right now but I'm still running into weird bugs on Android specifically using "height" >_<
from react-native-keyboard-aware-scroll-view.
Folks, I'm currently searching for contributors for this lib. Is anyone interested?
from react-native-keyboard-aware-scroll-view.
if you don't see any changed active keyboard changes, try wrapping an empty around the whole document
from react-native-keyboard-aware-scroll-view.
Hey @mileung, Did you fix the issue regarding the withe space in the bottom of the KeyboardAvoidingView? I'm having the same problem when soft keyboard is out.
Only happening on android, in iOs its working perfectly.
from react-native-keyboard-aware-scroll-view.
@pgonzalez-santiago react native 0.42 just released a change that might correct this.facebook/react-native@e3d4ace
from react-native-keyboard-aware-scroll-view.
@npomfret have you tried to android:windowSoftInputMode="adjustResize"
in the androidManifest?
from react-native-keyboard-aware-scroll-view.
@pgonzalez-santiago yes, that's what it's set to.
from react-native-keyboard-aware-scroll-view.
I have tried to use it, doesn't work too well for me. I have tried all the options, sometimes works but with that bottom padding, sometimes doesn't work at all, pretty unstable for now.
from react-native-keyboard-aware-scroll-view.
@acrazing Followed that with ScrollView. Didn't manage to get it working. Though, if I remove the ScrollView, it pushes the content, alas the keyboard doesn't close after tapping outside an input field. (Plus, my content will inevitably be longer than the height of the screen) :(
Also, don't event want to try react-native-keyboard-aware-scrollview because it seems unmaintained.
from react-native-keyboard-aware-scroll-view.
works perfect using <KeyboardAvoidingView behavior={'height'} style={{alignItems: 'center',}}>
keep in mind that you should not be inside a<ScrollView>
from react-native-keyboard-aware-scroll-view.
I had a view with <KeyboardAvoidingView>
inside <ScrollView>
and multiple items inside the <KeyboardAvoidingView>
.
When keyboard was opened, the ScrollView size was huge, while user was being able to scroll it down a lot, even if there where no more views.
I tried to debug it and added onLayout prop in <KeyboardAvoidingView>
.
Suddenly, the strange behaviour has stopped.
from react-native-keyboard-aware-scroll-view.
KeyboardAvoidingView just cost me like an hour and I still don't have it working right. Seems super wonky.
from react-native-keyboard-aware-scroll-view.
@cihadturhan you used this library with ReactNative? What else you have done to make it works? I am trying without success
from react-native-keyboard-aware-scroll-view.
@cihadturhan great suggestion! Works like a charm with a new RN 0.59 project, no need to configure anything. Thanks 👍
from react-native-keyboard-aware-scroll-view.
I tried RN build in but not worked for me. Here is all examples I tried - based on https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580
react-native-keyboard-avoidance-examples_1574761604681.zip
from react-native-keyboard-aware-scroll-view.
I'll close this for being very old. Thanks for all the comments 😻
from react-native-keyboard-aware-scroll-view.
Related Issues (20)
- Unable to run after upgrading RN Version to 0.68.2 HOT 1
- Picker Component Auto Focus Capability HOT 2
- onViewableItemsChanged Not Working with KeyboardAwareFlatList
- Error in simulator: Unable to resolve module react-native/Libraries/Components/ScrollResponder from node_modules/deprecated-react-native-listview/index.js in react native 0.71.1 HOT 1
- IOS screen jumping when scrolling from the bottom or top of a Textinput HOT 1
- [bug] extraScrollHeight is not calculated automatically for View's under KeyboardAwareScrollView
- Android: Keyboard has a invisible top that pushed view HOT 5
- [BUG] paddingBottom styling property is forced to zero on Android HOT 3
- [Bug] When switching between inputs, the focused input bounces out of view HOT 2
- findNodeHandle is deprecated in StrictMode
- Using Animated.ScrollView with listenToKeyboardEvents HOT 1
- ExtraHeight property is neglected when typing HOT 1
- [Bug] KeyboardAwareScrollView is not work well in Android only HOT 6
- FlashList is supported?
- Keyboard closes during a clock render while trying to use TextInput
- How to scroll multiple elements into view instead of just the focused input?
- Still maintained? HOT 1
- extraScrollHeight not working in Android HOT 3
- When I used this library, it didn't work on Android. Later, I found a component myself and shared it with people I met later and people who encountered the same problem as me.
- I got a solution on this.. Tested on iPhone 13, iPhone 13 Pro Max, iPhone 6s, iPhone SE (3rd generation) and android.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-keyboard-aware-scroll-view.