menu

Expo

Build and share truly native apps that work across both iOS and Android. Open source, free and uses React Native.

Channels
Team

Expo Android .apk Build – Form Problem with KeyboardAvoidingView

August 1, 2018 at 10:41pm

Expo Android .apk Build – Form Problem with KeyboardAvoidingView

August 1, 2018 at 10:41pm
Hey all! I've been working on a RN app using Expo and have been having problems with the device keyboard and a form I've built.
I've been using https://github.com/APSL/react-native-keyboard-aware-scroll-view to build a scrollable form. When running on an emulator or through the Expo app, the form scrolls fine without the keyboard obstructing the form, however, whenever I build the .apk and load it into the emulator or my physical device (Samsung Galaxy S5), the keyboard gets in the way of the form and I can't scroll all the way down to the bottom.
Has anyone else encountered an issue like this? I've tried googling everything and can't seem to figure it out. I even changed to just using RN's own KeyboardAvoidingView with a Scrollview inside of it to no avail.

June 27, 2019 at 1:41am
Hi alex, trying to fix this issue for last 6 hours , can you solution you have?
  • reply
  • like

July 1, 2019 at 4:18pm
It's been a while since I took a look at my code on this, actually. I ended up not using KeyboardAwareScrollView for Android. I check the platform and only use it on iOS. Then, on Android, I added event listeners to check for the keyboard hiding and showing, then setting a normal ScrollView with a calculated height based on the screen content when a keyboard is shown.
Here's a KeyboardScrollView component I created:
import React, { Component } from 'react';
import { Platform, Keyboard, Dimensions, ScrollView } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { getHeaderHeight } from '../../utils/deviceHelpers';
import styled from 'styled-components/native';
const StyledScrollView = styled.ScrollView`
max-height: ${props => props.maxHeight};
flex: 1;
`
class KeyboardScrollView extends Component {
state = {
visibleHeight: null
}
componentWillMount () {
if (Platform.OS === 'android') {
this.addEventListeners();
}
}
componentWillUnmount () {
if (Platform.OS === 'android') {
this.removeEventListeners();
}
}
addEventListeners = () => {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
}
removeEventListeners = () => {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardDidShow (event) {
const { noHeader } = this.props;
const headerHeight = noHeader ? 0 : getHeaderHeight();
let newSize = Dimensions.get('window').height - event.endCoordinates.height - headerHeight;
this.setState({
visibleHeight: newSize,
});
}
keyboardDidHide () {
const { noHeader } = this.props;
const headerHeight = noHeader ? 0 : getHeaderHeight();
this.setState({
visibleHeight: Dimensions.get('window').height - headerHeight,
});
}
render() {
const { children } = this.props;
const { visibleHeight } = this.state;
return Platform.OS === 'ios'
? (
<KeyboardAwareScrollView
{...this.props}
resetScrollToCoords={{ x: 0, y: 0 }}
enableAutomaticScroll={true}
extraScrollHeight={0}
keyboardDismissMode={'interactive'}
>
{children}
</KeyboardAwareScrollView>
)
: (
<StyledScrollView
{...this.props}
maxHeight={visibleHeight ? visibleHeight : 'auto'}
keyboardDismissMode={'none'}
>
{children}
</StyledScrollView>
)
}
}
export default KeyboardScrollView;
I hope that helps a little
  • reply
  • like
Also, just a note that looking back at the app, it kind of works, but isn't 100% polished. Sometimes the bottom of the content is still hidden by the keyboard :/
  • reply
  • like

July 2, 2019 at 1:22pm
What if you use ScrollView inside KeyboardAvoidingView , you add "padding" behaviour and specific platform keyboardVerticalOffset
Edited
  • reply
  • like