键盘上推视图反应原生 expo

Question

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%'
  }
});

Answer 1

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%'
  }
});

Answer 2

This worked for me:

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

Answer 3

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%'
  }
});

Answer 4

Vi que é br, então vou quebrar o protocolo e escrever em portugues, da uma olhada no manifest.xml e olha essa tag :

android:windowSoftInputMode, o adjustPan é o que entrega o comportamento que tu quer acho, se não tem umas outras views do react native pra ignorarem o keyboard

Answer 5

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>

Answer 6

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

"softwareKeyboardLayoutMode": "pan",