CODEWITHSUNDEEP
react-native
Italo Rodrigo
Italo Rodrigo

Reputation: 1785

Keyboard squeeze the components

When I click on TextInput the components are squeezed:

enter image description here

How to fix it?

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;

Upvotes: 1

Views: 895

Answers (3)

Snehendu Roy
Snehendu Roy

Reputation: 108

If you are in an expo managed project then you have to use a property to avoid this problem. Just follow the given 3 steps:

  1. Go to your app.json file
  2. Paste the code under the android section: "softwareKeyboardLayoutMode": "pan" In the android folder, your app.json should look like: "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" }, "softwareKeyboardLayoutMode": "pan" },
  3. Restart your app server

Upvotes: 2

Matei Radu
Matei Radu

Reputation: 2078

You can set the windowSoftInputMode to adjustPan in the Android manifest file.

<manifest>
  ...

  <application>
    ...

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

From the documentation on adjustPan:

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.

Upvotes: 1

rana_sadam
rana_sadam

Reputation: 1226

You need to add Keyboard Aware scrollview as parent wrapper in your component then the view will not squeeze and automatically scroll up when keyboard is visible on screen.

Upvotes: 1

Related Questions