Keyboard squeezing the components

Question

When I click on Textinput, the images get squeezed:

How to correct?

import React, { Component } from 'react';
import {Text, View, TouchableHighlight, ImageBackground, TextInput, Image, Picker} from 'react-native';
import {Button} from 'react-native-elements';

class Consulta extends Component{
constructor(props){
super(props);
this.state={
  ambiente:0,
  busca:''
}
}


  render(){
return(
  <View style={{flex:1, flexDirection:'row'}}>


    <View style={{flex:5}}>
      <ImageBackground style={{flex:1, width: null, height: null}} source={require('../img/bg.png')}>

        <View style={{flex:1, flexDirection:'row'}}>
          <View style={{flex:1}}></View>

          <View style={{flex:10, flexDirection:'column'}}>
            <View style={{flex:1}}></View>

            <View style={{flex:2, justifyContent:'center'}}>
              <Text style={{fontSize:50, color:'#484b4c'}}>CONSULTA DE FLORES</Text>
            </View>

            <View style={{flex:2, justifyContent:'center'}}>
              <Text style={{fontSize:20, color:'#484b4c', marginBottom:10}}>NOME OU CÓDIGO</Text>
              <TextInput
                style={{height:60, borderColor:'gray', borderWidth:1, backgroundColor:'white', borderRadius:10}}
                onChangeText={(text) => this.setState({busca: text})}
              />
            </View>

            <View style={{flex:5, justifyContent:'center', alignItems:'flex-start'}}>
              <View>
              <Text style={{fontSize:20, color:'#484b4c', marginBottom: 10}}>TIPO DE AMBIENTE</Text>
              </View>

              <View style={{flex:1, flexDirection:'row'}}>

              <View style={{flex:1}}>
                <TouchableHighlight style={{flex:1}}
                  onPress={() => this.props.navigation.navigate('Consulta')}>
                  <Image
                    style={{flex:1.1, width: null, height: null}}
                    source={require('../img/icone/ambiente1.png')}
                  />
                </TouchableHighlight>
                <View style={{alignItems:'center'}}>
                  <Text style={{fontSize:20}}>INTERNO</Text>
                </View>
              </View>

              <View style={{flex:1}}>
                <TouchableHighlight style={{flex:1}}
                  onPress={() => this.props.navigation.navigate('Consulta')}>
                  <Image
                    style={{flex:1.1, width: null, height: null}}
                    source={require('../img/icone/ambiente2.png')}
                  />
                </TouchableHighlight>
                <View style={{alignItems:'center'}}>
                  <Text style={{fontSize:20}}>EXTERNO</Text>
                </View>
              </View>

              <View style={{flex:1}}>
                <TouchableHighlight style={{flex:1}}
                  onPress={() => this.props.navigation.navigate('Consulta')}>
                  <Image
                    style={{flex:1.1, width: null, height: null}}
                    source={require('../img/icone/ambiente3.png')}
                  />
                </TouchableHighlight>
                <View style={{alignItems:'center'}}>
                  <Text style={{fontSize:20}}>INTERNO E EXTERNO</Text>
                </View>
              </View>

              </View>

            </View>

            <View style={{flex:3, flexDirection:'row'}}>

              <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
              <Button
                large
                backgroundColor='#d0e25f'
                buttonStyle={{borderRadius:20}}
                textStyle={{fontSize:40, color:'#383838'}}
                iconRight={{name:'search', type:'font-awesome', size:40, color:'#383838'}}
                title='PESQUISAR'
                onPress={() => this.props.navigation.navigate('Resultado', {busca: this.state.busca})}
              />
              </View>

            </View>

            <View style={{flex:1}}></View>
          </View>

          <View style={{flex:1}}></View>
        </View>

      </ImageBackground >
    </View>

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

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('Consulta')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/consultaOn.png')}
          />
        </TouchableHighlight>
      </View>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('FormaPagamento')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/formaOff.png')}
          />
        </TouchableHighlight>
      </View>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('Organizacao')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/organizacaoOff.png')}
          />
        </TouchableHighlight>
      </View>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('Horario')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/horarioOff.png')}
          />
        </TouchableHighlight>
      </View>

    </View>

  </View>
);
}
}

export default Consulta;

Answer 1

You can configure the windowSoftInputMode for adjustPan in the Android manifest file.

<manifest>
  ...

  <application>
    ...

    <activity
      ...
      android:windowSoftInputMode="adjustPan">

View documentation documentation:

The Activity’s main window is not resized to make room for the soft Keyboard. Rather, the Contents of the window are Automatically panned so that the Current Focus is Never Obscured by the Keyboard and users can Always see what they are Typing.