Renamed container lifecycle events (#1676)

* Renamed onStop/onStart to didAppear/DidDisappear

* This did't make it!

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

@@ -7,23 +7,23 @@ import org.junit.Test;
 public class ScreenLifecycleTest extends BaseTest {
 
 	@Test
-	public void onStartOnStop() throws Exception {
+	public void didAppearDidDisappear() throws Exception {
 		elementByText("PUSH LIFECYCLE SCREEN").click();
-		assertExists(By.text("onStart"));
-		elementByText("PUSH TO TEST ONSTOP").click();
-		assertExists(By.text("onStop"));
+		assertExists(By.text("didAppear"));
+		elementByText("PUSH TO TEST DIDDISAPPEAR").click();
+		assertExists(By.text("didDisappear"));
 	}
 
 	@Test
 	public void unmountIsCalledWhenPopped() throws Exception {
 		elementByText("PUSH LIFECYCLE SCREEN").click();
-		assertExists(By.text("onStart"));
+		assertExists(By.text("didAppear"));
 
 		device().pressBack();
 
 		assertExists(By.text("componentWillUnmount"));
 		elementByText("OK").click();
-		assertExists(By.text("onStop"));
+		assertExists(By.text("didDisappear"));
 		elementByText("OK").click();
 		assertMainShown();
 	}

README.md

@@ -326,9 +326,9 @@ Dismiss all the current modals at the same time.
 ```js
 Navigation.dismissAllModals();
 ```
-#### Screen Lifecycle - onStop() and onStart()
+#### Screen Lifecycle - didDisppear() and didAppear()
 
-The onStop() and onStart() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
+The didDisppear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
 
 ```js
 class LifecycleScreen extends Component {
@@ -339,12 +339,12 @@ class LifecycleScreen extends Component {
     };
   }
 
-  onStart() {
-    this.setState({ text: 'onStart' });
+  didAppear() {
+    this.setState({ text: 'didAppear' });
   }
 
-  onStop() {
-    alert('onStop');
+  didDisppear() {
+    alert('didDisppear');
   }
 
   componentWillUnmount() {

e2e/TopLevelApi.test.js

@@ -25,17 +25,17 @@ describe('top level api', () => {
 
   it('screen lifecycle', async () => {
     await elementByLabel('Push Lifecycle Screen').tap();
-    await expect(elementByLabel('onStart')).toBeVisible();
-    await elementByLabel('Push to test onStop').tap();
+    await expect(elementByLabel('didAppear')).toBeVisible();
+    await elementByLabel('Push to test didDisappear').tap();
     await expect(elementByLabel('Alert')).toBeVisible();
-    await expect(elementByLabel('onStop')).toBeVisible();
+    await expect(elementByLabel('didDisappear')).toBeVisible();
   });
 
   it('unmount is called on pop', async () => {
     await elementByLabel('Push Lifecycle Screen').tap();
-    await expect(elementByLabel('onStart')).toBeVisible();
+    await expect(elementByLabel('didAppear')).toBeVisible();
     await element(by.traits(['button']).and(by.label('Back'))).tap();
-    await expect(elementByLabel('onStop')).toBeVisible();
+    await expect(elementByLabel('didDisappear')).toBeVisible();
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
   });
 });

lib/android/app/src/main/java/com/reactnativenavigation/layout/ReactRootViewController.java

@@ -45,13 +45,13 @@ public class ReactRootViewController extends ViewController implements Navigatio
 	public void onViewAppeared() {
 		super.onViewAppeared();
 		applyNavigationOptions();
-		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerStart(getId());
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerDidAppear(getId());
 	}
 
 	@Override
 	public void onViewDisappear() {
 		super.onViewDisappear();
-		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerStop(getId());
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerDidDisappear(getId());
 	}
 
 	@Override

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

@@ -9,8 +9,8 @@ import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDevice
 
 public class NavigationEvent {
 	private static final String onAppLaunched = "RNN.appLaunched";
-	private static final String containerStart = "RNN.containerStart";
-	private static final String containerStop = "RNN.containerStop";
+	private static final String containerDidAppear = "RNN.containerDidAppear";
+	private static final String containerDidDisappear = "RNN.containerDidDisappear";
 
 	private final RCTDeviceEventEmitter emitter;
 
@@ -22,12 +22,12 @@ public class NavigationEvent {
 		emit(onAppLaunched);
 	}
 
-	public void containerStop(String id) {
-		emit(containerStop, id);
+	public void containerDidDisappear(String id) {
+		emit(containerDidDisappear, id);
 	}
 
-	public void containerStart(String id) {
-		emit(containerStart, id);
+	public void containerDidAppear(String id) {
+		emit(containerDidAppear, id);
 	}
 
 	private void emit(String eventName) {

lib/ios/RNNEventEmitter.h

@@ -8,8 +8,8 @@
 
 -(void)sendOnAppLaunched;
 
--(void)sendContainerStart:(NSString*)containerId;
+-(void)sendContainerDidAppear:(NSString*)containerId;
 
--(void)sendContainerStop:(NSString*)containerId;
+-(void)sendContainerDidDisappear:(NSString*)containerId;
 
 @end

lib/ios/RNNEventEmitter.m

@@ -5,12 +5,12 @@
 RCT_EXPORT_MODULE();
 
 static NSString* const onAppLaunched	= @"RNN.appLaunched";
-static NSString* const containerStart	= @"RNN.containerStart";
-static NSString* const containerStop	= @"RNN.containerStop";
+static NSString* const containerDidAppear	= @"RNN.containerDidAppear";
+static NSString* const containerDidDisappear	= @"RNN.containerDidDisappear";
 
 
 -(NSArray<NSString *> *)supportedEvents {
-	return @[onAppLaunched, containerStart, containerStop];
+	return @[onAppLaunched, containerDidAppear, containerDidDisappear];
 }
 
 # pragma mark public
@@ -19,12 +19,12 @@ static NSString* const containerStop	= @"RNN.containerStop";
 	[self send:onAppLaunched body:nil];
 }
 
--(void)sendContainerStart:(NSString *)containerId {
-	[self send:containerStart body:containerId];
+-(void)sendContainerDidAppear:(NSString *)containerId {
+	[self send:containerDidAppear body:containerId];
 }
 
--(void)sendContainerStop:(NSString *)containerId {
-	[self send:containerStop body:containerId];
+-(void)sendContainerDidDisappear:(NSString *)containerId {
+	[self send:containerDidDisappear body:containerId];
 }
 
 # pragma mark private

lib/ios/RNNRootViewController.m

@@ -45,12 +45,12 @@
 
 -(void)viewDidAppear:(BOOL)animated {
 	[super viewDidAppear:animated];
-	[self.eventEmitter sendContainerStart:self.containerId];
+	[self.eventEmitter sendContainerDidAppear:self.containerId];
 }
 
 -(void)viewDidDisappear:(BOOL)animated {
 	[super viewDidDisappear:animated];
-	[self.eventEmitter sendContainerStop:self.containerId];
+	[self.eventEmitter sendContainerDidDisappear:self.containerId];
 }
 
 /**

lib/src/adapters/NativeEventsReceiver.js

@@ -5,12 +5,12 @@ class NativeEventsReceiver {
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
   }
 
-  containerStart(callback) {
-    this.emitter.addListener('RNN.containerStart', callback);
+  containerDidAppear(callback) {
+    this.emitter.addListener('RNN.containerDidAppear', callback);
   }
 
-  containerStop(callback) {
-    this.emitter.addListener('RNN.containerStop', callback);
+  containerDidDisappear(callback) {
+    this.emitter.addListener('RNN.containerDidDisappear', callback);
   }
 
   appLaunched(callback) {

lib/src/containers/ContainerWrapper.js

@@ -38,15 +38,15 @@ class ContainerWrapper {
         store.cleanId(this.state.containerId);
       }
 
-      onStart() {
-        if (this.originalContainerRef.onStart) {
-          this.originalContainerRef.onStart();
+      didAppear() {
+        if (this.originalContainerRef.didAppear) {
+          this.originalContainerRef.didAppear();
         }
       }
 
-      onStop() {
-        if (this.originalContainerRef.onStop) {
-          this.originalContainerRef.onStop();
+      didDisappear() {
+        if (this.originalContainerRef.didDisappear) {
+          this.originalContainerRef.didDisappear();
         }
       }
 

lib/src/containers/ContainerWrapper.test.js

@@ -138,40 +138,40 @@ describe('ContainerWrapper', () => {
   });
 
   describe('container lifecycle', () => {
-    const onStartCallback = jest.fn();
-    const onStopCallback = jest.fn();
+    const didAppearCallback = jest.fn();
+    const didDisappearCallback = jest.fn();
 
     class MyLifecycleContainer extends MyContainer {
-      onStart() {
-        onStartCallback();
+      didAppear() {
+        didAppearCallback();
       }
 
-      onStop() {
-        onStopCallback();
+      didDisappear() {
+        didDisappearCallback();
       }
     }
 
-    it('onStart and onStop are optional', () => {
+    it('didAppear and didDisappear are optional', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(() => tree.getInstance().onStart()).not.toThrow();
-      expect(() => tree.getInstance().onStop()).not.toThrow();
+      expect(() => tree.getInstance().didAppear()).not.toThrow();
+      expect(() => tree.getInstance().didDisappear()).not.toThrow();
     });
 
-    it('calls onStart on OriginalContainer', () => {
+    it('calls didAppear on OriginalContainer', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(onStartCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().onStart();
-      expect(onStartCallback).toHaveBeenCalledTimes(1);
+      expect(didAppearCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().didAppear();
+      expect(didAppearCallback).toHaveBeenCalledTimes(1);
     });
 
-    it('calls onSop on OriginalContainer', () => {
+    it('calls didDisappear on OriginalContainer', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
-      expect(onStopCallback).toHaveBeenCalledTimes(0);
-      tree.getInstance().onStop();
-      expect(onStopCallback).toHaveBeenCalledTimes(1);
+      expect(didDisappearCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().didDisappear();
+      expect(didDisappearCallback).toHaveBeenCalledTimes(1);
     });
   });
 });

lib/src/containers/Lifecycle.js

@@ -1,21 +1,21 @@
 class Lifecycle {
   constructor(store) {
     this.store = store;
-    this.containerStart = this.containerStart.bind(this);
-    this.containerStop = this.containerStop.bind(this);
+    this.containerDidAppear = this.containerDidAppear.bind(this);
+    this.containerDidDisappear = this.containerDidDisappear.bind(this);
   }
 
-  containerStart(id) {
+  containerDidAppear(id) {
     const ref = this.store.getRefForContainerId(id);
-    if (ref && ref.onStart) {
-      ref.onStart();
+    if (ref && ref.didAppear) {
+      ref.didAppear();
     }
   }
 
-  containerStop(id) {
+  containerDidDisappear(id) {
     const ref = this.store.getRefForContainerId(id);
-    if (ref && ref.onStop) {
-      ref.onStop();
+    if (ref && ref.didDisappear) {
+      ref.didDisappear();
     }
   }
 }

lib/src/containers/Lifecycle.test.js

@@ -8,8 +8,8 @@ describe('Lifecycle', () => {
 
   beforeEach(() => {
     mockRef = {
-      onStart: jest.fn(),
-      onStop: jest.fn()
+      didAppear: jest.fn(),
+      didDisappear: jest.fn()
     };
     store = new Store();
     store.setRefForContainerId('myUniqueId', mockRef);
@@ -17,41 +17,41 @@ describe('Lifecycle', () => {
     uut = new Lifecycle(store);
   });
 
-  describe('containerStart', () => {
-    it('calls onStart on container ref from store', () => {
-      uut.containerStart('myUniqueId');
-      expect(mockRef.onStart).toHaveBeenCalledTimes(1);
+  describe('containerDidAppear', () => {
+    it('calls didAppear on container ref from store', () => {
+      uut.containerDidAppear('myUniqueId');
+      expect(mockRef.didAppear).toHaveBeenCalledTimes(1);
     });
 
     it('skips undefined refs', () => {
-      uut.containerStart('myUniqueId2');
-      expect(mockRef.onStart).not.toHaveBeenCalled();
+      uut.containerDidAppear('myUniqueId2');
+      expect(mockRef.didAppear).not.toHaveBeenCalled();
     });
 
-    it('skips unimplemented onStart', () => {
+    it('skips unimplemented didAppear', () => {
       mockRef = {};
-      expect(mockRef.onStart).toBeUndefined();
+      expect(mockRef.didAppear).toBeUndefined();
       store.setRefForContainerId('myUniqueId', mockRef);
-      uut.containerStart('myUniqueId');
+      uut.containerDidAppear('myUniqueId');
     });
   });
 
-  describe('containerStop', () => {
-    it('calls onStop on container ref from store', () => {
-      uut.containerStop('myUniqueId');
-      expect(mockRef.onStop).toHaveBeenCalledTimes(1);
+  describe('containerDidDisappear', () => {
+    it('calls didDisappear on container ref from store', () => {
+      uut.containerDidDisappear('myUniqueId');
+      expect(mockRef.didDisappear).toHaveBeenCalledTimes(1);
     });
 
     it('skips undefined refs', () => {
-      uut.containerStop('myUniqueId2');
-      expect(mockRef.onStop).not.toHaveBeenCalled();
+      uut.containerDidDisappear('myUniqueId2');
+      expect(mockRef.didDisappear).not.toHaveBeenCalled();
     });
 
-    it('skips unimplemented onStop', () => {
+    it('skips unimplemented didDisappear', () => {
       mockRef = {};
-      expect(mockRef.onStop).toBeUndefined();
+      expect(mockRef.didDisappear).toBeUndefined();
       store.setRefForContainerId('myUniqueId', mockRef);
-      uut.containerStop('myUniqueId');
+      uut.containerDidDisappear('myUniqueId');
     });
   });
 });

lib/src/events/PrivateEventsListener.js

@@ -7,8 +7,8 @@ class PrivateEventsListener {
   }
 
   listenAndHandlePrivateEvents() {
-    this.nativeEventsReceiver.containerStart(this.lifecycle.containerStart);
-    this.nativeEventsReceiver.containerStop(this.lifecycle.containerStop);
+    this.nativeEventsReceiver.containerDidAppear(this.lifecycle.containerDidAppear);
+    this.nativeEventsReceiver.containerDidDisappear(this.lifecycle.containerDidDisappear);
   }
 }
 

lib/src/events/PrivateEventsListener.test.js

@@ -13,24 +13,24 @@ describe('PrivateEventsListener', () => {
     uut = new PrivateEventsListener(nativeEventsReceiver, store);
   });
 
-  it('register and handle containerStart', () => {
+  it('register and handle containerDidAppear', () => {
     const mockRef = {
-      onStart: jest.fn()
+      didAppear: jest.fn()
     };
     store.setRefForContainerId('myContainerId', mockRef);
     uut.listenAndHandlePrivateEvents();
-    expect(nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
-    const callbackFunction = nativeEventsReceiver.containerStart.mock.calls[0][0];
+    expect(nativeEventsReceiver.containerDidAppear).toHaveBeenCalledTimes(1);
+    const callbackFunction = nativeEventsReceiver.containerDidAppear.mock.calls[0][0];
     expect(callbackFunction).toBeInstanceOf(Function);
 
-    expect(mockRef.onStart).not.toHaveBeenCalled();
+    expect(mockRef.didAppear).not.toHaveBeenCalled();
     callbackFunction('myContainerId');
 
-    expect(mockRef.onStart).toHaveBeenCalledTimes(1);
+    expect(mockRef.didAppear).toHaveBeenCalledTimes(1);
   });
 
-  it('register and listen containerStop', () => {
+  it('register and listen containerDidDisappear', () => {
     uut.listenAndHandlePrivateEvents();
-    expect(nativeEventsReceiver.containerStop).toHaveBeenCalledTimes(1);
+    expect(nativeEventsReceiver.containerDidDisappear).toHaveBeenCalledTimes(1);
   });
 });

playground/src/containers/LifecycleScreen.js

@@ -14,12 +14,12 @@ class LifecycleScreen extends Component {
     };
   }
 
-  onStart() {
-    this.setState({ text: 'onStart' });
+  didAppear() {
+    this.setState({ text: 'didAppear' });
   }
 
-  onStop() {
-    alert('onStop'); // eslint-disable-line no-alert
+  didDisappear() {
+    alert('didDisappear'); // eslint-disable-line no-alert
   }
 
   componentWillUnmount() {
@@ -31,7 +31,7 @@ class LifecycleScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
-        <Button title="Push to test onStop" onPress={this.onClickPush} />
+        <Button title="Push to test didDisappear" onPress={this.onClickPush} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

v1tov2diff.md

@@ -289,9 +289,9 @@ Dismiss all the current modals at the same time.
 ```js
 Navigation.dismissAllModals();
 ```
-#### Screen Lifecycle - onStop() and onStart()
+#### Screen Lifecycle - didDisappear() and didAppear()
 
-The onStop() and onStart() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
+The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
 
 ```js
 class LifecycleScreen extends Component {
@@ -302,12 +302,12 @@ class LifecycleScreen extends Component {
     };
   }
 
-  onStart() {
-    this.setState({ text: 'onStart' });
+  didAppear() {
+    this.setState({ text: 'didAppear' });
   }
 
-  onStop() {
-    alert('onStop');
+  didDisappear() {
+    alert('didDisappear');
   }
 
   componentWillUnmount() {