Static didAppear/didDisappear events

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/StaticLifecycleEvents.java

@@ -0,0 +1,17 @@
+package com.reactnativenavigation.e2e.androide2e;
+
+import android.support.test.uiautomator.By;
+
+import org.junit.Test;
+
+public class StaticLifecycleEvents extends BaseTest {
+    @Test
+    public void didAppearDidDisappear() throws Exception {
+        elementByText("STATIC LIFECYCLE EVENTS").click();
+        assertExists(By.text("Static Lifecycle Events"));
+        assertExists(By.text("didAppear | navigation.playground.StaticLifecycleOverlay"));
+        elementByText("PUSH").click();
+        assertExists(By.text("didAppear | navigation.playground.PushedScreen"));
+        assertExists(By.text("didDisappear | navigation.playground.WelcomeScreen"));
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationEvent.java

@@ -1,14 +1,12 @@
 package com.reactnativenavigation.react;
 
+import android.support.annotation.NonNull;
+
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.bridge.WritableNativeArray;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
-import org.json.JSONException;
-import org.json.JSONObject;
-
 import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
 
 public class NavigationEvent {
@@ -16,6 +14,7 @@ public class NavigationEvent {
 	private static final String componentDidAppear = "RNN.componentDidAppear";
 	private static final String componentDidDisappear = "RNN.componentDidDisappear";
 	private static final String onNavigationButtonPressed = "RNN.navigationButtonPressed";
+    private static final String componentLifecycle = "RNN.componentLifecycle";
 
 	private final RCTDeviceEventEmitter emitter;
 
@@ -27,15 +26,26 @@ public class NavigationEvent {
 		emit(onAppLaunched);
 	}
 
-	public void componentDidDisappear(String id) {
+	public void componentDidDisappear(String id, String componentName) {
 		emit(componentDidDisappear, id);
+		emit(componentLifecycle, getLifecycleEventData(id, componentName, "didDisappear"));
 	}
 
-	public void componentDidAppear(String id) {
+	public void componentDidAppear(String id, String componentName) {
 		emit(componentDidAppear, id);
+        emit(componentLifecycle, getLifecycleEventData(id, componentName, "didAppear"));
 	}
 
-	public void sendOnNavigationButtonPressed(String id, String buttonId) {
+    @NonNull
+    private WritableMap getLifecycleEventData(String id, String componentName, String didAppear) {
+        WritableMap map = Arguments.createMap();
+        map.putString("componentId", id);
+        map.putString("componentName", componentName);
+        map.putString("event", didAppear);
+        return map;
+    }
+
+    public void sendOnNavigationButtonPressed(String id, String buttonId) {
 		WritableMap map = Arguments.createMap();
 		map.putString("componentId", id);
 		map.putString("buttonId", buttonId);

lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java

@@ -60,12 +60,12 @@ public class ReactView extends ReactRootView implements IReactView {
 
 	@Override
 	public void sendComponentStart() {
-		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).componentDidAppear(componentId);
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).componentDidAppear(componentId, componentName);
 	}
 
 	@Override
 	public void sendComponentStop() {
-		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).componentDidDisappear(componentId);
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).componentDidDisappear(componentId, componentName);
 	}
 
     @Override

playground/src/screens/OptionsScreen.js

@@ -66,8 +66,8 @@ class OptionsScreen extends Component {
         <Button title="Custom Transition" onPress={this.onClickCustomTranstition} />
         <Button title="Show custom alert" testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
         <Button title="Show snackbar" testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
-        <Button title="Show overlay" testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
-        <Button title="Show touch through overlay" testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
+        <Button title="Show overlay inter" testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
+        <Button title="Show touch through overlay notInter" testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
         <Button title="Push Default Options Screen" testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>

playground/src/screens/StaticLifecycleOverlay.js

@@ -0,0 +1,62 @@
+const React = require('react');
+const { Component } = require('react');
+const { View, Text } = require('react-native');
+const Navigation = require('react-native-navigation');
+
+class StaticLifecycleOverlay extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: 'nothing yet',
+      events: []
+    };
+    Navigation.events().componentLifecycle(({ event, componentName, componentId }) => {
+      console.log('guyca', `${event} ${componentName} [${componentId}]`);
+      this.setState({
+        events: [...this.state.events, { event, componentName, componentId }]
+      });
+    });
+  }
+
+  render() {
+    const events = this.state.events.map((event) =>
+      (
+        <View key={event.componentId}>
+          <Text style={styles.h2}>{`${event.event} | ${event.componentName}`}</Text>
+        </View>
+      ));
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{`Static Lifecycle Events`}</Text>
+        <View style={styles.events}>
+          {events}
+        </View>
+      </View>
+    );
+  }
+}
+module.exports = StaticLifecycleOverlay;
+
+const styles = {
+  root: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 150,
+    backgroundColor: '#c1d5e0ae',
+    flexDirection: 'column'
+  },
+  events: {
+    flexDirection: 'column',
+    marginHorizontal: 2
+  },
+  h1: {
+    fontSize: 14,
+    textAlign: 'center',
+    margin: 4
+  },
+  h2: {
+    fontSize: 10
+  }
+};

playground/src/screens/WelcomeScreen.js

@@ -23,15 +23,17 @@ class WelcomeScreen extends Component {
     this.onClickPushOrientationMenuScreen = this.onClickPushOrientationMenuScreen.bind(this);
     this.onClickBackHandler = this.onClickBackHandler.bind(this);
     this.onClickPushTopTabsScreen = this.onClickPushTopTabsScreen.bind(this);
+    this.onClickShowStaticLifecycleOverlay = this.onClickShowStaticLifecycleOverlay.bind(this);
   }
 
   render() {
     return (
-      <View style={styles.root}>
+      <View style={styles.root} key={'root'}>
         <Text testID={testIDs.WELCOME_SCREEN_HEADER} style={styles.h1}>{`React Native Navigation!`}</Text>
         <Button title="Switch to tab based app" testID={testIDs.TAB_BASED_APP_BUTTON} onPress={this.onClickSwitchToTabs} />
         <Button title="Switch to app with side menus" testID={testIDs.TAB_BASED_APP_SIDE_BUTTON} onPress={this.onClickSwitchToSideMenus} />
         <Button title="Push Lifecycle Screen" testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
+        <Button title="Static Lifecycle Events" testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
         <Button title="Push" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
         <Button title="Push Options Screen" testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
         <Button title="Push Top Tabs screen" testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />
@@ -192,6 +194,14 @@ class WelcomeScreen extends Component {
     });
   }
 
+  onClickShowStaticLifecycleOverlay() {
+    Navigation.showOverlay({
+      component: {
+        name: 'navigation.playground.StaticLifecycleOverlay'
+      }
+    });
+  }
+
   async onClickShowModal() {
     await Navigation.showModal({
       stack: {
@@ -312,7 +322,8 @@ const styles = {
   root: {
     flexGrow: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    backgroundColor: 'white'
   },
   h1: {
     fontSize: 24,

playground/src/screens/index.js

@@ -3,6 +3,7 @@ const WelcomeScreen = require('./WelcomeScreen');
 const TextScreen = require('./TextScreen');
 const PushedScreen = require('./PushedScreen');
 const LifecycleScreen = require('./LifecycleScreen');
+const StaticLifecycleOverlay = require('./StaticLifecycleOverlay');
 const ModalScreen = require('./ModalScreen');
 const OptionsScreen = require('./OptionsScreen');
 const OrientationSelectScreen = require('./OrientationSelectScreen');
@@ -23,6 +24,7 @@ function registerScreens() {
   Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
   Navigation.registerComponent(`navigation.playground.ModalScreen`, () => ModalScreen);
   Navigation.registerComponent(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);
+  Navigation.registerComponent(`navigation.playground.StaticLifecycleOverlay`, () => StaticLifecycleOverlay);
   Navigation.registerComponent(`navigation.playground.TextScreen`, () => TextScreen);
   Navigation.registerComponent(`navigation.playground.PushedScreen`, () => PushedScreen);
   Navigation.registerComponent(`navigation.playground.OptionsScreen`, () => OptionsScreen);

playground/src/testIDs.js

@@ -5,6 +5,7 @@ module.exports = {
   TAB_BASED_APP_BUTTON: `TAB_BASED_APP_BUTTON`,
   TAB_BASED_APP_SIDE_BUTTON: `TAB_BASED_APP_SIDE_BUTTON`,
   PUSH_LIFECYCLE_BUTTON: `PUSH_LIFECYCLE_BUTTON`,
+  PUSH_STATIC_LIFECYCLE_BUTTON: `PUSH_STATIC_LIFECYCLE_BUTTON`,
   PUSH_BUTTON: `PUSH_BUTTON`,
   PUSH_OPTIONS_BUTTON: `PUSH_OPTIONS_BUTTON`,
   PUSH_DEFAULT_OPTIONS_BUTTON: `PUSH_DEFAULT_OPTIONS_BUTTON`,