packages/lib/src/components/DevTool/Modal.js
import React, { Component } from 'react';
import {
SafeAreaView,
KeyboardAvoidingView,
} from 'react-native';
import events from '../../events';
import DevTool from './index';
import Modal from '../base/Modal';
class Events extends Component {
constructor() {
super();
this.state = {
visible: false,
};
this.listen = this.listen.bind(this);
}
componentDidMount() {
events.listen(this.listen);
}
componentWillUnmount() {
events.unlisten(this.listen);
}
listen(type, data) {
if (type === 'SHOW_DEVTOOLS') {
return this.setState({
visible: true,
});
}
if (type === 'HIDE_DEVTOOLS') {
return this.setState({
visible: false,
});
}
}
render() {
const {
...others
} = this.props;
return (
<Modal
animationType="slide"
transparent={false}
visible={this.state.visible}
onRequestClose={() => {
}}
>
<SafeAreaView
forceInset={{ top: 'always', vertical: 'always', bottom: 'always' }}
style={{flex: 1}}
>
<KeyboardAvoidingView
style={{flex: 1}}
behavior="padding"
enabled
>
<DevTool
{...others}
onClose={() => {
events.publish('HIDE_DEVTOOLS');
}}
/>
</KeyboardAvoidingView>
</SafeAreaView>
</Modal>
)
}
}
export default Events;