Open
Description
🐛 Bug Report
There is seemingly no way to remove a custom TopBar component set on one component, when a new component is mounted (eg: when it is pushed onto the stack). Unfortunately I cannot find any documentation stating this is possible, so it may not be.
Have you read the Contributing Guidelines on issues?
Yes
To Reproduce
- Setup the root component with a custom topbar background component
- Push to a new screen with options that should clear the custom topbar background component
- Notice that the topbar cannot be cleared and reset to the default.
An example component that is being used to produce the below Actual Behavior:
<View>
<Typography center h5 bold color={'red'}>
MY CUSTOM VIEW
</Typography>
</View>
How the second component is being mounted:
Navigation.push(componentId, {
component: {
name: 'CameraScreen',
passProps: {
myCustomData,
},
},
});
Expected behavior
The new component in the stack should render a topbar as requested in the options, in this case, removing the custom topbar background and using the default instead.
Actual Behavior
Depending on the method used to attempt to clear the TopBar options, the below errors are produced.
Note: This behavior is consistent when using static options or via mergeOptions.
Please also note I have verified that changes to the background options are happening - eg: changing the color to 'orange' in any of the below methods takes effect in the second component that was pushed.
Method 1: Empty String on topbar.background.component.name:
The following code results in the original component still being displayed.
background: {
color: 'transparent',
component: {
name: '',
},
}
Method 2: null on topbar.background.component.name:
The following code results in a TypeError:
TypeError: null is not an object (evaluating 'componentName.toString')
background: {
color: 'transparent',
component: {
name: null,
},
}
Method 3: Empty Object on topbar.background.component:
The following code also results in a TypeError:
TypeError: null is not an object (evaluating 'componentName.toString')
background: {
color: 'transparent',
component: {}
}
Method 4: null on topbar.background.component:
The following code results in an exception:
background: {
color: 'transparent',
component: null,
}
push12,
"HOME_SCREEN",
{
children = (
);
data = {
name = CameraScreen;
options = {
bottomTabs = {
visible = 0;
};
layout = {
backgroundColor = 4278190080;
componentBackgroundColor = 4278190080;
};
popGesture = 0;
statusBar = {
visible = 0;
};
topBar = {
backButton = {
visible = 0;
};
background = {
color = 0;
component = "<null>";
};
drawBehind = 1;
elevation = 0;
leftButtonColor = 4294967295;
leftButtons = (
{
id = exit;
systemItem = cancel;
text = Leave;
}
);
noBorder = 1;
rightButtonColor = 4294967295;
title = {
visible = 0;
};
visible = 1;
};
};
};
id = Component11;
type = Component;
},
63764,
63765
)
callstack: (
0 CoreFoundation 0x00000001a71e6768 4FBDF167-161A-324C-A233-D516922C67E5 + 1218408
1 libobjc.A.dylib 0x00000001bbcad7a8 objc_exception_throw + 60
2 CoreFoundation 0x00000001a70e9c3c 4FBDF167-161A-324C-A233-D516922C67E5 + 183356
3 CoreFoundation 0x00000001a71e92ac 4FBDF167-161A-324C-A233-D516922C67E5 + 1229484
4 CoreFoundation 0x00000001a71eb5b0 _CF_forwarding_prep_0 + 96
5 MyApp 0x0000000100afb8b8 +[TextParser parse:key:] + 76
6 MyApp 0x0000000100abeee0 -[RNNComponentOptions initWithDict:] + 172
7 MyApp 0x0000000100aa9bf0 -[RNNBackgroundOptions initWithDict:] + 528
8 MyApp 0x0000000100aef018 -[RNNTopBarOptions initWithDict:] + 2180
9 MyApp 0x0000000100ad5330 -[RNNNavigationOptions initWithDict:] + 220
10 MyApp 0x0000000100ac6470 -[RNNControllerFactory createComponent:] + 196
11 MyApp 0x0000000100ac5ff4 -[RNNControllerFactory fromTree:] + 120
12 MyApp 0x0000000100ac5d28 -[RNNControllerFactory createLayout:] + 72
13 MyApp 0x0000000100aba684 -[RNNCommandsHandler push:commandId:layout:completion:rejection:] + 348
14 MyApp 0x0000000100ab2a88 __61-[RNNBridgeModule push:componentId:layout:resolver:rejecter:]_block_invoke + 184
15 MyApp 0x000000010087f1ec RCTExecuteOnMainQueue + 64
16 MyApp 0x0000000100ab293c -[RNNBridgeModule push:componentId:layout:resolver:rejecter:] + 400
17 CoreFoundation 0x00000001a71eb774 4FBDF167-161A-324C-A233-D516922C67E5 + 1238900
18 CoreFoundation 0x00000001a70bed44 4FBDF167-161A-324C-A233-D516922C67E5 + 7492
19 CoreFoundation 0x00000001a70bf348 4FBDF167-161A-324C-A233-D516922C67E5 + 9032
20 MyApp 0x0000000100818800 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 1752
21 MyApp 0x000000010081bb44 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 604
22 MyApp 0x000000010081b724 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 128
23 MyApp 0x000000010081b698 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
24 libdispatch.dylib 0x00000001a6dd1a84 DAF30062-4C85-3B92-B159-50602A0C9D97 + 10884
25 libdispatch.dylib 0x00000001a6dd381c DAF30062-4C85-3B92-B159-50602A0C9D97 + 18460
26 libdispatch.dylib 0x00000001a6de1c70 _dispatch_main_queue_callback_4CF + 884
27 CoreFoundation 0x00000001a7160398 4FBDF167-161A-324C-A233-D516922C67E5 + 668568
28 CoreFoundation 0x00000001a715a270 4FBDF167-161A-324C-A233-D516922C67E5 + 643696
29 CoreFoundation 0x00000001a7159360 CFRunLoopRunSpecific + 600
30 GraphicsServices 0x00000001be797734 GSEventRunModal + 164
31 UIKitCore 0x00000001a9bd4584 33B02AB5-5DAF-3249-8DC6-5872DF830EC5 + 12363140
32 UIKitCore 0x00000001a9bd9df4 UIApplicationMain + 168
33 MyApp 0x00000001004688cc main + 120
34 libdyld.dylib 0x00000001a6e15cf8 E574A365-9878-348A-8E84-91E163CFC128 + 7416
)
RCTFatal
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
DAF30062-4C85-3B92-B159-50602A0C9D97
DAF30062-4C85-3B92-B159-50602A0C9D97
_dispatch_main_queue_callback_4CF
4FBDF167-161A-324C-A233-D516922C67E5
4FBDF167-161A-324C-A233-D516922C67E5
CFRunLoopRunSpecific
GSEventRunModal
33B02AB5-5DAF-3249-8DC6-5872DF830EC5
UIApplicationMain
main
E574A365-9878-348A-8E84-91E163CFC128
Method 5: Empty Object on topbar.background:
The following code has no impact on the topBar and renders an identical topbar to the previous screen
background: {}
Method 6: null on topbar.background:
The following code has an exception
background: null
Exception '-[NSNull objectForKeyedSubscript:]: unrecognized selector sent to instance 0x20a771c00' was thrown while invoking push on target RNNBridgeModule with params (
push12,
"HOME_SCREEN",
{
children = (
);
data = {
name = CameraScreen;
options = {
bottomTabs = {
visible = 0;
};
layout = {
backgroundColor = 4278190080;
componentBackgroundColor = 4278190080;
};
popGesture = 0;
statusBar = {
visible = 0;
};
topBar = {
backButton = {
visible = 0;
};
background = "<null>";
drawBehind = 1;
elevation = 0;
leftButtonColor = 4294967295;
leftButtons = (
{
id = exit;
systemItem = cancel;
text = Leave;
}
);
noBorder = 1;
rightButtonColor = 4294967295;
title = {
visible = 0;
};
visible = 1;
};
};
};
id = Component11;
type = Component;
},
62816,
62817
)
callstack: (
0 CoreFoundation 0x00000001a71e6768 4FBDF167-161A-324C-A233-D516922C67E5 + 1218408
1 libobjc.A.dylib 0x00000001bbcad7a8 objc_exception_throw + 60
2 CoreFoundation 0x00000001a70e9c3c 4FBDF167-161A-324C-A233-D516922C67E5 + 183356
3 CoreFoundation 0x00000001a71e92ac 4FBDF167-161A-324C-A233-D516922C67E5 + 1229484
4 CoreFoundation 0x00000001a71eb5b0 _CF_forwarding_prep_0 + 96
5 MyApp 0x0000000100d870cc +[ColorParser parse:key:] + 76
6 MyApp 0x0000000100dada8c -[RNNBackgroundOptions initWithDict:] + 172
7 MyApp 0x0000000100df3018 -[RNNTopBarOptions initWithDict:] + 2180
8 MyApp 0x0000000100dd9330 -[RNNNavigationOptions initWithDict:] + 220
9 MyApp 0x0000000100dca470 -[RNNControllerFactory createComponent:] + 196
10 MyApp 0x0000000100dc9ff4 -[RNNControllerFactory fromTree:] + 120
11 MyApp 0x0000000100dc9d28 -[RNNControllerFactory createLayout:] + 72
12 MyApp 0x0000000100dbe684 -[RNNCommandsHandler push:commandId:layout:completion:rejection:] + 348
13 MyApp 0x0000000100db6a88 __61-[RNNBridgeModule push:componentId:layout:resolver:rejecter:]_block_invoke + 184
14 MyApp 0x0000000100b831ec RCTExecuteOnMainQueue + 64
15 MyApp 0x0000000100db693c -[RNNBridgeModule push:componentId:layout:resolver:rejecter:] + 400
16 CoreFoundation 0x00000001a71eb774 4FBDF167-161A-324C-A233-D516922C67E5 + 1238900
17 CoreFoundation 0x00000001a70bed44 4FBDF167-161A-324C-A233-D516922C67E5 + 7492
18 CoreFoundation 0x00000001a70bf348 4FBDF167-161A-324C-A233-D516922C67E5 + 9032
19 MyApp 0x0000000100b1c800 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 1752
20 MyApp 0x0000000100b1fb44 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 604
21 MyApp 0x0000000100b1f724 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 128
22 MyApp 0x0000000100b1f698 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
23 libdispatch.dylib 0x00000001a6dd1a84 DAF30062-4C85-3B92-B159-50602A0C9D97 + 10884
24 libdispatch.dylib 0x00000001a6dd381c DAF30062-4C85-3B92-B159-50602A0C9D97 + 18460
25 libdispatch.dylib 0x00000001a6de1c70 _dispatch_main_queue_callback_4CF + 884
26 CoreFoundation 0x00000001a7160398 4FBDF167-161A-324C-A233-D516922C67E5 + 668568
27 CoreFoundation 0x00000001a715a270 4FBDF167-161A-324C-A233-D516922C67E5 + 643696
28 CoreFoundation 0x00000001a7159360 CFRunLoopRunSpecific + 600
29 GraphicsServices 0x00000001be797734 GSEventRunModal + 164
30 UIKitCore 0x00000001a9bd4584 33B02AB5-5DAF-3249-8DC6-5872DF830EC5 + 12363140
31 UIKitCore 0x00000001a9bd9df4 UIApplicationMain + 168
32 MyApp 0x000000010076c8cc main + 120
33 libdyld.dylib 0x00000001a6e15cf8 E574A365-9878-348A-8E84-91E163CFC128 + 7416
)
RCTFatal
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
DAF30062-4C85-3B92-B159-50602A0C9D97
DAF30062-4C85-3B92-B159-50602A0C9D97
_dispatch_main_queue_callback_4CF
4FBDF167-161A-324C-A233-D516922C67E5
4FBDF167-161A-324C-A233-D516922C67E5
CFRunLoopRunSpecific
GSEventRunModal
33B02AB5-5DAF-3249-8DC6-5872DF830EC5
UIApplicationMain
main
E574A365-9878-348A-8E84-91E163CFC128
Your Environment
- React Native Navigation version: 7.16.0
- React Native version: 0.63.4
- Platform(s) (iOS, Android, or both?): iOS
- Device info (Simulator/Device? OS version? Debug/Release?): Device, iOS 14.6, Debug