Skip to content

Instantly share code, notes, and snippets.

@palaniraja palaniraja/app.js
Last active Nov 1, 2018

Embed
What would you like to do?
React native - webview wrapper - keyboard issue
/**
* 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",
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.