react-native-keyboard-aware-scroll-view not working properly

Question

I am trying to use the react-native-keyboard-aware-scroll-view so the keyboard doesn't cover my inputs.

For some reason it always thinks there is a keyboard active I guess because it always compresses everything.

Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here? I've been playing around with it for awhile and have had no luck. I'm running react-native v 0.33 and react-native-keyboard-aware-scroll-view v 0.2.1.

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';


class LoginIOS extends Component{

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.renderScene = this.renderScene.bind(this);
    this.state={
      username: '',
      password: ''
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

  renderScene() {
    return (
    <KeyboardAwareScrollView>
      <View style={styles.container}>
        <Spinner visible={this.state.visible} />
        <StatusBar barStyle="light-content" hidden={true}/>
        <View style={styles.topContainer}>
          <View style={styles.bannerContainer}>
            <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image style={styles.mark} source={require('***')} />
            </View>
          </View>
          <View style={styles.credentialContainer}>
                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Username"
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="next"
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({username: text})}
                            value={this.state.username}

                            >

                        </TextInput>
                      </View>
                </View>

                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Password"
                            returnKeyType="done"
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            onSubmitEditing={(event)=> {
                              this.login();
                            }}
                            >
                        </TextInput>
                      </View>
                </View>
                <TouchableOpacity style={styles.forgotContainer}>
                </TouchableOpacity>
            </View>

        </View>

        <TouchableHighlight
          underlayColor="#D6AB00"
          onPress={this.login}
          style={styles.signInButtonContainer}>
          <Text style={styles.signInText}>Sign In</Text>
        </TouchableHighlight>

      </View>
    </KeyboardAwareScrollView>

    );
  }

Solution 1

I solved this problem by using another lib. Not sure why the react-native-keyboard-aware-scroll-view doesn't work but if you implement the react-native-keyboard-aware-view you shouldn't have any problems.

https://www.npmjs.com/package/react-native-keyboard-aware-view

Solution 2

Personally solved this by using flex...

  <KeyboardAwareScrollView contentContainerStyle={{flex: 1}}>
    <View style={{flex: 1}}>

Solution 3

To make it working in android with expo I had to add a few more things, hope this will help

<KeyboardAwareScrollView extraScrollHeight={100} enableOnAndroid={true} 
   keyboardShouldPersistTaps='handled'>
       <ScrollView>
      </ScrollView>
</KeyboardAwareScrollView>

Solution 4

If anyone is still struggling with this issue. What worked for me was ensuring enableOnAndroid = true and setting a marginBottom inside the keyboardAwareScrollView.

<KeyboardAwareScrollView style={{width: "90%",marginBottom:150}} enableOnAndroid={true}>

Solution 5

You can also use animated view as scroll view cannot have absolute views or fixed components. so listening to the keyboard event and making the adjustment would work fine.

onKeyboarDidShow(e) {
  //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  Animated.timing(this.relativeBottom, {
    duration: e.duration,
    toValue: Dimensions.get('window').height-em(64)-e.endCoordinates.height
  }).start()
}

onKeyboardWillHide(e) {
  //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  Animated.timing(this.relativeBottom, {
    duration: e.duration,
    toValue: Dimensions.get('window').height-em(64)
  }).start()
}

componentWillMount() {
    this._didShowListener = Keyboard.addListener('keyboardWillShow', this.onKeyboarDidShow.bind(this));
    this._willHideListener = Keyboard.addListener('keyboardWillHide', this.onKeyboardWillHide.bind(this));
}

componentWillUnmount() {
    this._didShowListener.remove();
    this._willHideListener.remove();
}

View more solutions

Comments

[VishAl]

What is em(64) ?

[Adarsh Kumar]

its a function which recalibrates height and width according to the screen size.

[Lazerbeak12345]

Wouldn't this fail if the keyboard is not exactly 150px?

[Solly]

@Lazerbeak12345 it's not the greatest solution but it worked for the app I was working on. Implementing extraScrollHeight is a better option and one suggested by the documentation I believe. Try extraScrollHeight={150}