React-Native keyboard problems

0

Good evening,

I have a problem with the keyboard of my android application, I would like that when opening the keyboard of the same, only the lower text box would move, or the items on the screen would adjust automatically, but this does not happen at all.

Page.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TextInput, KeyboardAvoidingView } from 'react-native';

class Pagina extends Component {

    render() {
        return (
            <KeyboardAvoidingView style={style.container} behavior="padding" enabled>
                <View style={style.barNav}>
                    <Text>xxx</Text>
                </View>

                <Image 
                    style={style.imagem} 
                    source={{ 
                        uri: "https://nospensees.fr/wp-content/uploads/2018/02/femme-en-position-du-lotus.jpg"
                    }} 
                />

                <Image 
                    style={style.imagem} 
                    source={{ 
                        uri: "https://nospensees.fr/wp-content/uploads/2018/02/femme-en-position-du-lotus.jpg"
                    }} 
                />

                <TextInput style={style.entradaTexto} placeholder="Digite sua mensagem aqui!" />
            </KeyboardAvoidingView>
        );
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    barNav: { 
        width: 100 + '%',
        height: 50,
        paddingTop: 5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    imagem: {
        width: 100 + '%',
        height: 100
    },
    entradaTexto: {
        width: 100 + '%',
        height: 80
    },
})

export default Pagina;

Manifest File:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.Chat">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Practical result of the operation:

More information:

react-native-cli: 2.0.1 and react-native: 0.55.4     

asked by anonymous 02.10.2018 / 01:07

1 answer

0

Hello, good evening! I was having the same problem developing for Android, I managed to fix the solution this way: Open androidManifest, edit the following line: android: windowSoftInputMode="adjustResize" Enter the "adjustPan" too, like this: android: windowSoftInputMode="adjustPan | adjustResize"

Ready. So the native Android keyboard does not change the Views views declared in your code.

    
11.11.2018 / 23:45