TextBox above Keyboard

Question

I am new to React Native and I have encountered a problem: my TextBox doesn't stay above the keyboard while I am writing in it.

These are the visuals from the application

Screenshot

And this is my Signup.js:

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';

import Form from '../components/Form';
import Logo2 from'../components/Logo2';

import {Actions} from 'react-native-router-flux';

export default class Signup extends Component {

goBack() {
    Actions.pop()
}

render() {
    return(
        <View style={styles.container}>
    <Logo2/>
            <Form type="Registrar"/>
            <View style={styles.signupTextCont}> 
                <Text style={styles.signupText}>Ja tens uma conta? </Text>
                <TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}>Entra</Text></TouchableOpacity>
            </View>
        </View>
    )
}
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#232122'
},
signupTextCont: {
  flexGrow: 1,
  justifyContent: 'center',
  alignItems: 'flex-end',
  paddingVertical: 16,
  flexDirection: 'row'
},
signupText: {
  color: 'rgba(255,255,255,0.7)', 
  fontSize:16
},
signupButton: {
    color: '#FFA200',
    fontSize:16,
    fontWeight: '500'
}
});

I don't know what I need to code. Could you please help me?

Answer 1

To replicate my comment that resolved your problem; you can use the component KeyboardAvoidingView from the package react-native. It levels up the area it contains above your virtual keyboard.

Wrap your code like this:

<KeyboardAvoidingView behavior={'position'} enabled> 
  <View style={styles.signupTextCont}> 
    <Text style={styles.signupText}>Ja tens uma conta? </Text>
    <TouchableOpacity onPress={this.goBack}>
      <Text style={styles.signupButton}>Entra</Text>
    </TouchableOpacity>
  </View>
</KeyboardAvoidingView>

Here's some more info about how it works: https://facebook.github.io/react-native/docs/keyboardavoidingview.