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

Question

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

I’ve tried Keyboardavoidingview, but it didn’t work and ruined 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,
    }
});

Answer 1

For this problem you should even use Keyboardavoidingview so that your message input view is visible with the keyboard open. Simply 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 that reason:

<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 that the KeyboardAvoidingView uses contentContainerStyle to stylize the component, as you said, if it got disfigured could be this.

Code working Visualization

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