1

Estou desenvolvendo um app de mensagens no React-Native. Ao clicar no text input, e o teclado do IOS ser exibido, o mesmo esconde a view do text input, que é exibida na parte inferior da tela. Como eu consigo que essa view se mova, se mantendo visivel, acima do teclado??

Já testei o KeyboardAvoidingView, porém não funcionou e estragou o layout.

Está ocorrendo o mesmo no Emulador de Android.

export default class Conversa extends Component {
    render() {
        return (

                <ImageBackground style={styles.principalBg} source={require('../imgs/bg.png')}>
                    <View style={styles.conversa}>
                        <Text>Conversa</Text>
                    </View>
                    <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>
                </ImageBackground>

        );
    }
}

const styles = StyleSheet.create({
    principalBg: {
        flex: 1,
    },
    conversa: {
        flex: 1,
        padding: 10,
        paddingBottom: 20,
    },
    box: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        flexDirection: 'row',
        height: 80,
        padding: 10,
        alignContent: 'center',
        backgroundColor: '#115e54',
        justifyContent: 'space-between',
        borderTopColor: '#FFF',
        borderTopWidth: 1,
    },
    ajuste: {
        width: '85%',
    },
    input: {
        fontSize: 18,
        height: 60,
        backgroundColor: '#FFF',
        borderRadius: 5,
        paddingLeft: 10,
    }
});

Telas do Iphone XR

2 Respostas 2

1

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

4
  • Irei testar novamente, colocando dentro do KeybordAvoidingView apenas essa parte que vc mencionou. Eu tinha feito colocando tudo que estara dentro do render() e não funcionou, desconfigurou tudo. Depois posto o resultado.
    – renanq
    Commented 18/02/2020 às 22:17
  • Dessa forma, é possível perceber que a view se move para cima, porém ela não se desloca suficiente para ficar visível acima do teclado. Sabe o que posso modificar para que ela se desloque mais???
    – renanq
    Commented 18/02/2020 às 22:40
  • No IOS consegui ajustar utilizando a propriedade "keyboardVerticalOffset" do componente KeyboardAvoidingView. Depois vou testar no Android. obrigado!
    – renanq
    Commented 18/02/2020 às 22:56
  • Se a resposta solucionou seu problema, marque-a como correta
    – sant0will
    Commented 18/02/2020 às 22:57
-3

For those who want to keep the code clean, just use the FlatList component and add a View component involving the component with the states: {flex: 1, height: Dimensions.get ("window"). Height}.

Below left a component ready for anyone who wants to use, just wrap your component in this way:

<FormLayout>
    {... your component}
</FormLayout>

Here is the solver component:

import React from 'react'
import { View, StyleSheet, FlatList, Dimensions } from 'react-native'

import Background from './Background'

const FormLayout = ({ children }) => {

    const renderContent = <View style={styles.container}>
          {children}
    </View>

    return <FlatList 
        ListHeaderComponent={renderContent}
        showsVerticalScrollIndicator={false}
    />
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: Dimensions.get('window').height * 0.95
    }
})

export default FormLayout

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .