Skip to main content
adicionou 52 caracteres ao conteúdo
Fonte Link
sant0will
  • 1,3mil
  • 1
  • 12
  • 28

Para esse problema você deve mesmo utilizar KeyboardAvoidingView para que sua view de input da mensagem fique visivel com o teclado aberto. Basta importar o componente:

import {
  ...
   KeyboardAvoidingView,
} from 'react-native';

e trocar no seu código, a seguinte parte:

<View style={styles.box}>
     <View style={styles.ajuste}>
          <TextInput 
               placeholder="Mensagem" 
               placeholderTextColor={'#000000'} 
               style={styles.input} 
               onChangeText={ () => false }    
           />
     </View>
     <View>
          <TouchableOpacity>
               <Image source={require('../imgs/btn-enviar.png')} />
          </TouchableOpacity>
     </View>
 </View>

para isso:

<KeyboardAvoidingView contentContainerStyle={styles.box} behavior="position" enabled>
      <View style={styles.ajuste}>
        <TextInput
          placeholder="Mensagem"
          placeholderTextColor={'#000000'}
          style={styles.input}
          onChangeText={() => false}
        />
      </View>
      <View>
        <TouchableOpacity>
             <Image source={require('../imgs/btn-enviar.png')} />
        </TouchableOpacity>
      </View>
</KeyboardAvoidingView>

Obs: Note que o KeyboardAvoidingView usa contentContainerStyle para estilizar o componente, como você disse, se ficou desconfigurado pode ser isso.

Código funcionando Visualização

Para esse problema você deve mesmo utilizar KeyboardAvoidingView para que sua view de input da mensagem fique visivel com o teclado aberto. Basta importar o componente:

import {
  ...
   KeyboardAvoidingView,
} from 'react-native';

e trocar no seu código, a seguinte parte:

<View style={styles.box}>
     <View style={styles.ajuste}>
          <TextInput 
               placeholder="Mensagem" 
               placeholderTextColor={'#000000'} 
               style={styles.input} 
               onChangeText={ () => false }    
           />
     </View>
     <View>
          <TouchableOpacity>
               <Image source={require('../imgs/btn-enviar.png')} />
          </TouchableOpacity>
     </View>
 </View>

para isso:

<KeyboardAvoidingView contentContainerStyle={styles.box} behavior="position" enabled>
      <View style={styles.ajuste}>
        <TextInput
          placeholder="Mensagem"
          placeholderTextColor={'#000000'}
          style={styles.input}
          onChangeText={() => false}
        />
      </View>
      <View>
        <TouchableOpacity>
             <Image source={require('../imgs/btn-enviar.png')} />
        </TouchableOpacity>
      </View>
</KeyboardAvoidingView>

Obs: Note que o KeyboardAvoidingView usa contentContainerStyle para estilizar o componente, como você disse, se ficou desconfigurado pode ser isso.

Código funcionando

Para esse problema você deve mesmo utilizar KeyboardAvoidingView para que sua view de input da mensagem fique visivel com o teclado aberto. Basta importar o componente:

import {
  ...
   KeyboardAvoidingView,
} from 'react-native';

e trocar no seu código, a seguinte parte:

<View style={styles.box}>
     <View style={styles.ajuste}>
          <TextInput 
               placeholder="Mensagem" 
               placeholderTextColor={'#000000'} 
               style={styles.input} 
               onChangeText={ () => false }    
           />
     </View>
     <View>
          <TouchableOpacity>
               <Image source={require('../imgs/btn-enviar.png')} />
          </TouchableOpacity>
     </View>
 </View>

para isso:

<KeyboardAvoidingView contentContainerStyle={styles.box} behavior="position" enabled>
      <View style={styles.ajuste}>
        <TextInput
          placeholder="Mensagem"
          placeholderTextColor={'#000000'}
          style={styles.input}
          onChangeText={() => false}
        />
      </View>
      <View>
        <TouchableOpacity>
             <Image source={require('../imgs/btn-enviar.png')} />
        </TouchableOpacity>
      </View>
</KeyboardAvoidingView>

Obs: Note que o KeyboardAvoidingView usa contentContainerStyle para estilizar o componente, como você disse, se ficou desconfigurado pode ser isso.

Código funcionando Visualização

Fonte Link
sant0will
  • 1,3mil
  • 1
  • 12
  • 28

Para esse problema você deve mesmo utilizar KeyboardAvoidingView para que sua view de input da mensagem fique visivel com o teclado aberto. Basta importar o componente:

import {
  ...
   KeyboardAvoidingView,
} from 'react-native';

e trocar no seu código, a seguinte parte:

<View style={styles.box}>
     <View style={styles.ajuste}>
          <TextInput 
               placeholder="Mensagem" 
               placeholderTextColor={'#000000'} 
               style={styles.input} 
               onChangeText={ () => false }    
           />
     </View>
     <View>
          <TouchableOpacity>
               <Image source={require('../imgs/btn-enviar.png')} />
          </TouchableOpacity>
     </View>
 </View>

para isso:

<KeyboardAvoidingView contentContainerStyle={styles.box} behavior="position" enabled>
      <View style={styles.ajuste}>
        <TextInput
          placeholder="Mensagem"
          placeholderTextColor={'#000000'}
          style={styles.input}
          onChangeText={() => false}
        />
      </View>
      <View>
        <TouchableOpacity>
             <Image source={require('../imgs/btn-enviar.png')} />
        </TouchableOpacity>
      </View>
</KeyboardAvoidingView>

Obs: Note que o KeyboardAvoidingView usa contentContainerStyle para estilizar o componente, como você disse, se ficou desconfigurado pode ser isso.

Código funcionando