keyboard-layout.js

import React from 'react';
import { Image, View, Text, TextInput, LayoutAnimation } from 'react-native';
import KeyboardEventListener from '../util/KeyboardEventListener';

export default class AuthenticationScreen extends React.Component {
  state = {
    keyboardHeight: 0,
  }

  componentDidMount() {
    KeyboardEventListener.subscribe(({keyboardHeight, layoutAnimationConfig}) => {
      LayoutAnimation.configureNext(layoutAnimationConfig);
      this.setState({keyboardHeight})
    })
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#eee',
          alignItems: 'center',
          justifyContent: 'center',
          marginTop: -this.state.keyboardHeight,
        }}>

        <Image
          source={{ uri: 'https://www.react-europe.org/images/reacteurope.png' }}
          style={{ width: 300, height: 300, resizeMode: 'contain' }}
        />
        <Text>Please sign in</Text>
        <TextInput
          style={{
            height: 50,
            backgroundColor: '#fff',
            borderWidth: 1,
            borderColor: '#888',
          }}
          placeholder="Email"
        />
        <TextInput
          style={{
            height: 50,
            backgroundColor: '#fff',
            borderWidth: 1,
            borderColor: '#888',
          }}
          secureTextEntry
          placeholder="Password"
        />

      </View>
    );
  }
}