Open JGuscins opened 7 years ago
Having the same issue. Looks like the same height of the StatusBar. If you hide the StatusBar the extra space goes away. Must be related to the StatusBar somehow
Got same issue. Any fix on this?
@pcofilada I ended up wrapping ScrollView with KeyboardAvoidingView and it's working fine.
No luck for me. I still got an extra padding.
Hi there, in KeyboardAwareScrollView.js of this librarie, remove
contentInset={{bottom: this.state.keyboardHeight}}
from the ScrollView Component.
This solved the issue for me
anyone else struggling with this, it is indeed a problem with the StatusBar. If your app does NOT hide the status bar, you'll need something along the lines of https://github.com/shakyShane/react-native-keyboard-aware-scrollview/commit/37db7ccaad80304fddbdb507439c9161736b63ce
I just made a new prop statusBar
that indicates whether or not my status bar is visible (as there's no way to retrieve this programmatically, to the best of my knowledge on iOS)
I am having the same issue.
@shakyShane it seems better than just leaving that blank space, but it also move the content up by 20px.
About programmatically identifying the statusBar on iOS, apperantly you can do this:
import { NativeModules } from 'react-native'
const { StatusBarManager } = NativeModules
let statusBarHeight
StatusBarManager.getHeight(
(statusBarFrameData) => {
statusBarHeight = statusBarFrameData.height;
}
);
source: https://github.com/jgkim/react-native-status-bar-size/blob/master/StatusBarSizeIOS.js
I tried to find a solution for a long time, but I could not find why it happens, I see this react-native-keyboard-aware-scroll-view has the same problem though.
Anyway, I found a workaround. Definitely not the best solution, but it works for now:
KeyboardAwareScrollView.js (line 13)
contentInset={{bottom: this.state.keyboardHeight, top: this.state.top || 0}}
KeyboardAwareBase.js (line 115)
this.setState({keyboardHeight: 0, top: -20});
This will include the state to set top to -20 when keyboard hide (that is the moment it creates the spacing), otherwise it will still be 0.
You don't need all these hacks, just add automaticallyAdjustContentInsets={false}
.
@petejkim Thanks! That works perfectly!
@petejkim Your solution not worked for me automaticallyAdjustContentInsets={false}
I also blocked with this for a long time. Did not found any solution yet
This get resolved.
But I have a clarification question. I have a inputbox at the end of the screen and if i type a letter means it will shows a dropdown. Keyboard hides the dropdown in my case.
Can anyone give any solution for this
in react native if you set StatusBar hidden={true} you will get this problem, the solution is just to quit it. I found it out here: https://github.com/facebook/react-native/issues/13000 I hope it helps
Already fixed at https://github.com/SteFF1997/react-native-keyboard-aware-scrollview
Hi,
I have one small issue, not sure if it my fault our it is an bug.
Bug appears only after keyboard has been shown. It adds extra padding/margin in top. Gifs below:
This is real padding before keyboard has shown:
And this is after keyboard has been shown:
Code for this:
index.ios.js
login.js