CODEWITHSUNDEEP
keyboardreact-nativeexpo
otavio1992
otavio1992

Reputation: 740

keyboard pushing view up on react native expo

I'm developing an app using react native and Expo, and I'm having trouble with the keyboard on Android. When the keyboard pops up, it pushes the view up too much, causing the title to be cut in the middle. On iOS it's fine. I'd like to achieve the same behaviour..

I took a look at the docs, but it says that Android handles it automatically. But it's not doing it :/

Here is my code:

render() {
    const { erroLogin, logando } = this.props;

    return (
      <ImageBackground style={styles.container} source={backgroundImage}>
        <KeyboardAvoidingView 
          style={styles.keyboardViewContainer} 
          behavior={Platform.OS === 'ios' ? 'padding' : null}
        >
          <Text
            style={{
              fontFamily: 'roboto-bold',
              color: '#ffffff',
              fontSize: 48,
              marginBottom: 20.7 * 3,
            }}
          >
          Balad<Text style={{ fontFamily: 'roboto-light', color: '#ffffff', fontSize: 48 }}>APP</Text>
          </Text>

          <TextInput
            value={this.state.email}
            placeholder="Usuário"
            style={[styles.input, { marginBottom: 4 * 3 }]}
            placeholderTextColor="#828282"
            maxLength={255}
            autoCorrect={false}
            keyboardType="email-address"
            autoCapitalize="none"
            returnKeyType="done"
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ email: text })}
          />

          <TextInput
            value={this.state.senha}
            placeholder="Senha"
            style={styles.input}
            placeholderTextColor="#828282"
            maxLength={255}
            autoCorrect={false}
            autoCapitalize="none"
            returnKeyType="done"
            secureTextEntry
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ senha: text })}
          />

          <View style={styles.esqueceuView}>
            <TouchableOpacity onPress={this.esqueciMinhaSenha}>
              <Text style={styles.esqueceuSenha}>Esqueceu a senha?</Text>
            </TouchableOpacity>
          </View>

          <CustomCheckBox style={styles.continuarConectadoView} onValueChange={this.switch} value={this.state.continuarConectado}>
            <Text style={styles.continuarConectadoText}>Manter conectado</Text>
          </CustomCheckBox>

          <View style={{ height: 20 * 3, width: '80%' }}>
            <Button
              title="ACESSAR SISTEMA"
              onPress={() => this.fazerLogin()}
              titleStyle={styles.buttonText}
              buttonStyle={styles.button}
              loading={logando}
            />
          </View>
        </KeyboardAvoidingView>

        {erroLogin && (
          <View style={{ width: '80%', height: '10%', borderRadius: 1.7 * 3, marginTop: '5%' }}>
            <ErrorBox
              defaultMessage={
                erroLogin.response.status === 401
                  ? 'Email ou senha incorretos'
                  : 'Ops, houve um erro. Tente novamente'
              }
            />
          </View>
        )}

        <Text style={styles.versao}>{Constants.manifest.version}v</Text>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  keyboardViewContainer: {
    width: '100%', 
    alignItems: 'center'
  },
  input: {
    width: '80%',
    height: 16.7 * 3,
    borderRadius: 1.7 * 3,
    fontSize: 4.7 * 3,
    fontFamily: 'roboto-medium-500',
    backgroundColor: '#ffffff',
    paddingHorizontal: 6 * 3,
  },
  esqueceuView: {
    width: '80%',
  },
  esqueceuSenha: {
    fontFamily: 'roboto-medium-500',
    letterSpacing: 0,
    color: '#ffffff',
    fontSize: 5 * 3,
    marginTop: 8 * 3,
    marginBottom: 8 * 3,
  },
  buttonText: {
    fontFamily: 'roboto-medium-500',
    color: '#ffffff',
    fontSize: 4.7 * 3,
  },
  button: {
    borderRadius: 1.7 * 3,
    backgroundColor: '#de0059',
  },
  continuarConectadoView: {
    flexDirection: 'row',
    width: '80%'
    // justifyContent: 'space-between'
  },
  continuarConectadoText: {
    fontFamily: 'roboto-medium-500',
    letterSpacing: 0,
    color: '#ffffff',
    fontSize: 5 * 3,
    marginTop: 2 * 3,
    marginBottom: 8 * 3,
    marginLeft: 3 * 3
  },
  versao: {
    color: '#ffffff',
    fontFamily: 'roboto-regular',
    fontSize: 16,
    position: 'absolute',
    top: '90%'
  }
});

enter image description here

enter image description here

Upvotes: 9

Views: 24447

Answers (5)

&#214;zg&#252;r BAYRAM
&#214;zg&#252;r BAYRAM

Reputation: 103

For android add following line to the app.json android object

"softwareKeyboardLayoutMode": "pan",

Upvotes: 5

newProgrammer2223
newProgrammer2223

Reputation: 61

This worked for me:

return (
<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  enabled={false}
  style={styles.container}
>
    ... All your code.
</KeyboardAvoidingView>
);

Upvotes: 6

tickietackie
tickietackie

Reputation: 396

There is a another workaround at the moment for SDK 37. Just add this style code to the root View of a Screen:

{ minHeight: Math.round(windowHeight)) }

Then the keyboard will not resize the view.


import React from 'react';
import {
  StyleSheet, View, useWindowDimensions,
} from 'react-native';


export default function AvoidViewMoving() {
  const windowHeight = useWindowDimensions().height;

  return (
    <View
      style={[{ minHeight: Math.round(windowHeight) }]}
    >
      {/* Your stuff */}
    </View>
  );
}

This idea was not mine. Credits go to this comment on GitHub from Ksedline: https://github.com/expo/expo/issues/7589#issuecomment-629863678

Upvotes: 18

Pranay
Pranay

Reputation: 304

Try to wrap everything inside your KeyboardAvoidingView inside a ScrollView

 <KeyboardAvoidingView style={{ flex: 1}}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        >

       <ScrollView>
    //your container view is here
       </ScrollView>

    </KeyboardAvoidingView>

Upvotes: 0

otavio1992
otavio1992

Reputation: 740

I posted the issue on the Expo forum and I got an answer.

All I had to do was to wrap the content inside the KeyboardAvoidView in a ScrollView and it worked. Still trying to figure it out why this is necessary, since the docs don't say anything about it.

Anyway, here is the link for the answer https://forums.expo.io/t/problems-with-keyboardavoidview/7799

I hope it helps other people.

Upvotes: 10

Related Questions