How to make View move when displaying keyboard (IOS and Android) in React-Native?

Question

How to make View move when displaying keyboard (IOS and Android) in React-Native?

I'm developing a messaging app in React-Native. When you click on the text input, and the IOS keyboard is displayed, it hides the view of the text input, which is displayed at the bottom of the screen. How do I get this view to move, if still visible, above the keyboard??

I have tested the KeyboardAvoidingView, but it did not work and spoiled the layout.

The same is happening in the Android Emulator.

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,
    }
});

0

ios react-native iphone teclado

Author: renanq, 2020-02-18

Source

2 answers

score 0 · Answer 1

For this problem you should even use KeyboardAvoidingView so that your message input view is visible with the keyboard open. Just import the component:

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

And Exchange in your code, the following Part:

<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>

For this:

<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>

Note: Note that KeyboardAvoidingView uses contentContainerStyle to stylize the component, as you said, if it got disfigured it could be this.

Working code Display

score -3 · Answer 2

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