Fix button with react component doesn't get unmounted (#5457)

* Fix button with react component doesn't get unmounted

* Test e2e only on iOS

e2e/Options.test.js

@@ -81,6 +81,12 @@ describe('Options', () => {
     await expect(elementByLabel('Styling Options')).toBeVisible();
   });
 
+  it(':ios: Reseting buttons should unmount button react view', async () => {
+    await elementById(TestIDs.SHOW_LIFECYCLE_BTN).tap();
+    await elementById(TestIDs.RESET_BUTTONS).tap();
+    await expect(elementByLabel('Button component unmounted')).toBeVisible();
+  });
+
   xit('hides topBar onScroll down and shows it on scroll up', async () => {
     await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
     await elementById(TestIDs.SCROLLVIEW_SCREEN_BUTTON).tap();

lib/ios/RNNNavigationButtons.m

@@ -103,7 +103,7 @@ -(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary defaultStyle:(RNNBu
 		componentOptions.name = [[Text alloc] initWithValue:component[@"name"]];
 
 		RNNReactView *view = [_componentRegistry createComponentIfNotExists:componentOptions parentComponentId:self.viewController.layoutInfo.componentId reactViewReadyBlock:nil];
-		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withCustomView:view];
+		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withCustomView:view componentRegistry:_componentRegistry];
 	} else if (iconImage) {
 		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withIcon:iconImage];
 	} else if (title) {

lib/ios/RNNReactComponentRegistry.h

@@ -11,6 +11,8 @@
 
 - (void)removeComponent:(NSString *)componentId;
 
+- (void)removeChildComponent:(NSString *)childId;
+
 - (void)clearComponentsForParentId:(NSString *)parentComponentId;
 
 - (void)clear;

lib/ios/RNNReactComponentRegistry.m

@@ -48,6 +48,16 @@ - (void)removeComponent:(NSString *)componentId {
 	}
 }
 
+- (void)removeChildComponent:(NSString *)childId {
+	NSMutableDictionary* parent;
+	while ((parent = _componentStore.objectEnumerator.nextObject)) {
+		if ([parent objectForKey:childId]) {
+			[parent removeObjectForKey:childId];
+			return;
+		}
+	}
+}
+
 - (void)clear {
 	[_componentStore removeAllObjects];
 }

lib/ios/RNNReactView.h

@@ -12,4 +12,6 @@ typedef void (^RNNReactViewReadyCompletionBlock)(void);
 
 - (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame;
 
+- (NSString *)componentId;
+
 @end

lib/ios/RNNReactView.m

@@ -22,13 +22,17 @@ - (void)contentDidAppear:(NSNotification *)notification {
 
 	RNNReactView* appearedView = notification.object;
 
-	 if (_reactViewReadyBlock && [appearedView.appProperties[@"componentId"] isEqual:self.appProperties[@"componentId"]]) {
+	 if (_reactViewReadyBlock && [appearedView.appProperties[@"componentId"] isEqual:self.componentId]) {
 	 	_reactViewReadyBlock();
 		 _reactViewReadyBlock = nil;
 		 [[NSNotificationCenter defaultCenter] removeObserver:self];
 	 }
 }
 
+- (NSString *)componentId {
+	return self.appProperties[@"componentId"];
+}
+
 - (void)setRootViewDidChangeIntrinsicSize:(void (^)(CGSize))rootViewDidChangeIntrinsicSize {
 		_rootViewDidChangeIntrinsicSize = rootViewDidChangeIntrinsicSize;
 		self.delegate = self;

lib/ios/RNNUIBarButtonItem.h

@@ -1,14 +1,15 @@
 #import <Foundation/Foundation.h>
 #import <React/RCTRootView.h>
 #import <React/RCTRootViewDelegate.h>
+#import "RNNReactComponentRegistry.h"
 
 @interface RNNUIBarButtonItem : UIBarButtonItem <RCTRootViewDelegate>
 
 @property (nonatomic, strong) NSString* buttonId;
 
 -(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage;
 -(instancetype)init:(NSString*)buttonId withTitle:(NSString*)title;
--(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView*)reactView;
+-(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView *)reactView componentRegistry:(RNNReactComponentRegistry *)componentRegistry;
 -(instancetype)init:(NSString*)buttonId withSystemItem:(NSString*)systemItemName;
 
 @end

lib/ios/RNNUIBarButtonItem.m

@@ -7,6 +7,7 @@ @interface RNNUIBarButtonItem ()
 
 @property (nonatomic, strong) NSLayoutConstraint *widthConstraint;
 @property (nonatomic, strong) NSLayoutConstraint *heightConstraint;
+@property (nonatomic, weak) RNNReactComponentRegistry *componentRegistry;
 
 @end
 
@@ -28,9 +29,10 @@ -(instancetype)init:(NSString*)buttonId withTitle:(NSString*)title {
 	return self;
 }
 
--(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView *)reactView {
+-(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView *)reactView componentRegistry:(RNNReactComponentRegistry *)componentRegistry {
 	self = [super initWithCustomView:reactView];
 
+	self.componentRegistry = componentRegistry;
 	reactView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
 	reactView.delegate = self;
 	reactView.backgroundColor = [UIColor clearColor];
@@ -76,4 +78,11 @@ - (void)onButtonPressed {
 					  afterDelay:0];
 }
 
+- (void)dealloc {
+	if ([self.customView isKindOfClass:[RNNReactView class]]) {
+		RNNReactView* customView = self.customView;
+		[self.componentRegistry removeChildComponent:customView.componentId];
+	}
+}
+
 @end

playground/src/screens/LifecycleButton.js

@@ -0,0 +1,9 @@
+const RoundedButton = require('./RoundedButton');
+
+class LifecycleButton extends RoundedButton {
+  componentWillUnmount() {
+    alert('Button component unmounted');
+  }
+}
+
+module.exports = LifecycleButton;

playground/src/screens/OptionsScreen.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const { Component } = require('react');
+const {Component} = require('react');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('../services/Navigation');
@@ -16,7 +16,9 @@ const {
   PUSH_BTN,
   HIDE_TOPBAR_DEFAULT_OPTIONS,
   SHOW_YELLOW_BOX_BTN,
-  SET_REACT_TITLE_VIEW
+  SET_REACT_TITLE_VIEW,
+  RESET_BUTTONS,
+  SHOW_LIFECYCLE_BTN
 } = require('../testIDs');
 
 class Options extends Component {
@@ -68,10 +70,37 @@ class Options extends Component {
         <Button label='Hide TopBar in DefaultOptions' testID={HIDE_TOPBAR_DEFAULT_OPTIONS} onPress={this.hideTopBarInDefaultOptions} />
         <Button label='Set React Title View' testID={SET_REACT_TITLE_VIEW} onPress={this.setReactTitleView} />
         <Button label='Show Yellow Box' testID={SHOW_YELLOW_BOX_BTN} onPress={() => console.warn('Yellow Box')} />
+        <Button label='StatusBar' onPress={this.statusBarScreen} />
+        <Button label='Show Lifecycle button' testID={SHOW_LIFECYCLE_BTN} onPress={this.showLifecycleButton} />
+        <Button label='Remove all buttons' testID={RESET_BUTTONS} onPress={this.resetButtons} />
       </Root>
     );
   }
 
+  showLifecycleButton = () => Navigation.mergeOptions(this, {
+    topBar: {
+      rightButtons: [
+        {
+          id: 'ROUND',
+          testID: ROUND_BUTTON,
+          component: {
+            name: Screens.LifecycleButton,
+            passProps: {
+              title: 'Two'
+            }
+          }
+        }
+      ]
+    }
+  });
+
+  resetButtons = () => Navigation.mergeOptions(this, {
+    topBar: {
+      rightButtons: [],
+      leftButtons: []
+    }
+  });
+
   changeTitle = () => Navigation.mergeOptions(this, {
     topBar: {
       title: {

playground/src/screens/Screens.js

@@ -18,6 +18,7 @@ module.exports = {
   Navigation: 'Navigation',
   NativeScreen: 'RNNCustomComponent',
   RoundButton: 'CustomRoundedButton',
+  LifecycleButton: 'LifecycleButton',
   ReactTitleView: 'ReactTitleView',
   EventsScreen: 'EventsScreen',
   EventsOverlay: 'EventsOverlay',

playground/src/screens/index.js

@@ -24,6 +24,12 @@ function registerScreens() {
   Navigation.registerComponent(Screens.Lifecycle, () => require('./LifecycleScreen'));
   Navigation.registerComponent(Screens.Overlay, () => require('./OverlayScreen'));
   Navigation.registerComponent(Screens.OverlayAlert, () => require('./OverlayAlert'));
+  Navigation.registerComponent(Screens.Pushed, () => require('./PushedScreen'));
+  Navigation.registerComponent(Screens.ScrollViewOverlay, () => require('./ScrollViewOverlay'));
+  Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));
+  Navigation.registerComponent(Screens.LifecycleButton, () => require('./LifecycleButton'));
+  Navigation.registerComponent(Screens.ReactTitleView, () => require('./CustomTopBar'));
+  Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));
   Navigation.registerComponent(Screens.ScrollViewOverlay, () => require('./ScrollViewOverlay'));
   Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));
   Navigation.registerComponent(Screens.ReactTitleView, () => require('./CustomTopBar'));

playground/src/testIDs.js

@@ -126,6 +126,8 @@ module.exports = {
   PUSH_BOTTOM_TABS_BUTTON: `PUSH_BOTTOM_TABS_BUTTON`,
   SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_BUTTON`,
   SET_ROOT:'SET_ROOT',
+  RESET_BUTTONS: 'RESET_BUTTONS',
+  SHOW_LIFECYCLE_BTN: 'SHOW_LIFECYCLE_BTN',
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,