const React = require('react');
const { Component } = require('react');
const { View, Text, TouchableOpacity } = require('react-native');
const { Navigation } = require('react-native-navigation');
const testIDs = require('../testIDs');
class StaticLifecycleOverlay extends Component {
constructor(props) {
super(props);
this.state = {
text: 'nothing yet',
events: []
};
this.listeners = [];
this.listeners.push(Navigation.events().registerComponentDidAppearListener((event) => {
event.event = 'componentDidAppear';
this.setState({
events: [...this.state.events, { ...event }]
});
}));
this.listeners.push(Navigation.events().registerComponentDidDisappearListener((event) => {
event.event = 'componentDidDisappear';
this.setState({
events: [...this.state.events, { ...event }]
});
}));
this.listeners.push(Navigation.events().registerCommandCompletedListener(({ commandId }) => {
this.setState({
events: [...this.state.events, { event: 'commandCompleted', commandId }]
});
}));
this.listeners.push(Navigation.events().registerNavigationButtonPressedListener(({ componentId, buttonId }) => {
this.setState({
events: [...this.state.events, { event: 'navigationButtonPressed', buttonId, componentId }]
});
}));
this.listeners.push(Navigation.events().registerModalDismissedListener(({ componentId }) => {
this.setState({
events: [...this.state.events, { event: 'modalDismissed', componentId }]
});
}));
}
componentWillUnmount() {
this.listeners.forEach(listener => listener.remove());
this.listeners = [];
alert('Overlay Unmounted');
}
renderEvent(event) {
if (event.commandId) {
return {`${event.commandId}`};
} else if (event.componentName) {
return {`${event.event} | ${event.componentName}`};
} else if (event.buttonId) {
return {`${event.event} | ${event.buttonId}`};
} else {
return {`${event.event} | ${event.componentId}`};
}
}
render() {
const events = this.state.events.map((event, idx) =>
(
{this.renderEvent(event)}
));
return (
{`Static Lifecycle Events Overlay`}
{events}
{this.renderDismissButton()}
);
}
renderDismissButton = () => {
return (
Navigation.dismissOverlay(this.props.componentId)}
>
X
);
}
}
module.exports = StaticLifecycleOverlay;
const styles = {
root: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 150,
backgroundColor: '#c1d5e0ae',
flexDirection: 'column'
},
dismissBtn: {
position: 'absolute',
width: 35,
height: 35,
backgroundColor: 'white',
justifyContent: 'center'
},
events: {
flexDirection: 'column',
marginHorizontal: 2
},
h1: {
fontSize: 14,
textAlign: 'center',
margin: 4
},
h2: {
fontSize: 10
}
};