React native - webview wrapper - keyboard issue

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {StyleSheet, WebView, View, Text, SafeAreaView, KeyboardAvoidingView} from 'react-native';
import {Keyboard, Platform, DeviceEventEmitter, Dimensions } from 'react-native';



export default class App extends Component {

  constructor(props) {
    super(props);

    this.state =  {
      keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
      keyboardSpace: 0,
      flex: 1,
      visibleHeight: Dimensions.get('window').height/2,
      visibleHeight: 100
    };

  console.log('visibleHeight: '+Dimensions.get('window').height);

  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
    console.log('Keyboard Shown');
    this.setState({
      flex: 0.7,
      visibleHeight: Dimensions.get('window').height/2,
    });
  }

  _keyboardDidHide () {
    console.log('Keyboard Hidden');
    this.setState({
      flex: 1,
      visibleHeight: 200
    });
  }

  componentDidMount() {
    

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));

  }


  render() {
    return (
      
      // <SafeAreaView style={{flex: 1, backgroundColor: 'yellow'}}>
      // <KeyboardAvoidingView style={styles.container}  behavior={'height'} key={this.state.keyboardAvoidingViewKey}>
      // <View style={styles.container}>
      <View style={styles.container}>
          <WebView
                automaticallyAdjustContentInsets={false}
                // style={{height: this.state.visibleHeight}}
                // style={{height: 200}}
                style={styles.webview}
                source={{uri: 'https://brandonmowat.github.io/react-chat-ui/demo/'}}
            />
          <View style={{height: this.state.visibleHeight}} />
      </View>
      // </View>
      //  </KeyboardAvoidingView>
      // {/* </SafeAreaView>    */}
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 3,
    backgroundColor: "red",
    marginTop: 44,
  },

  webview: {
    // flex: 2,
  },

  padder:{
    flex: 1,
    backgroundColor: "green",
  },

});