Screen gets cut off when a tabs is switched programmatically or the screen is popped (with visible keyboard)

[cassioseffrin]

🐛 Bug Report

To Reproduce

Create a bottom tabs and just run the navigation merge with the keyboard visible.

Navigation.mergeOptions('BOTTOM_TABS_LAYOUT', {
  bottomTabs: {
    currentTabIndex: 1
  }
});

Also when you pop the screen programmatically or use native navigation back button with the keyboard visible Navigation.pop(props.componentId)

Expected behavior

To show the entire screens

Actual Behavior

When I do the tab select programmatically the screen has been cut off on android devices. I have tested on both versions 7.24.3-hotfix.1 and 7.25.1 It's also happen when I pop the screen with keyboard visible (Navigation.pop(props.componentId);)

This issue only happens when the tab is switched programmatically and the keyboard is visible. If I dismiss the keyboard set a timeout and then switch the tab this issue don't happen.

Also the both tabs have a ScrollView with keyboardShouldPersistTaps= handled. That means when I tap the button the action will be fired with the keyboard visible.

<ScrollView keyboardShouldPersistTaps={'handled'}> ...the page content.. </ ScrollView>

Your Environment

• React Native Navigation version: 7.25.1
• React Native version: 0.66.4
• Platform: Android
• Device info: Motorola G7 (with android 9 and 10) and also android emulator @Nexus_S_API_23 (android 6)

Reproducible Demo

[cassioseffrin]

Today I managed to solve my situation using the react-native-navigation version 7.23.1. I have tested a bunch of versions and the 7.23.1 showed to be stable.

[swabbass]

@cassioseffrin, Can you please provide a minimal code/project so we can debug it? It seems that this issue happens for other devs, and a code that is minimal that helps reproduce the issue will be helpful.

You can use our playground and share a fork where the bug is reproducible.

[cassioseffrin]

@swabbass, The source code will depends of some private backend rules that will be difficult to simulate. To be simpler possible, the issue happens in 2 very common scenarios. Don't matter if the components are Classes or Hooks based (both cases)

1st: When you push a screen and then pop back to the 1st stack screen.
2st: When you switch the tabs programmatically with Navigation.merge()

Here is my Tabs config

await Navigation.setRoot({
		root: {
			bottomTabs: {
				children: [
					{
						stack: {
							children: [{
								component: {
									name: 'Login',
									id: 'tabLoginFluxoLoginCfg',
									passProps: {
										text: 'Login'
									},
									options: {
										topBar: {
											visible: true,
											title: {
												text: 'Login'
											}
										}
									}
								}
							}],
							options: {
								bottomTab: {
									text: 'Login',
									icon: icons.iconPersonOutline,
									selectedIcon: icons.iconPerson,
									selectedIcon: icons.iosPersonOutline,
									iconColor: 'black',
									textColor: 'black',
									selectedIconColor: 'blue',
									selectedTextColor: 'blue'
								}
							}
						},
					},
					{
						stack: {
							id: 'TAB2_ID_SETUP_CFG',
							children: [
								{
									component: {
										name: 'Setup',
										id: 'tabSetupFluxoLoginCfg',
										passProps: {
											text: 'Setup'
										},
										options: {
											topBar: {
												visible: true,
												title: {
													text: 'Configurações'
												}
											}
										}
									}
								}
							],
							options: {
								bottomTab: {
									text: 'Configurações',
									iconColor: 'black',
									textColor: 'black',
									selectedIconColor: 'blue',
									selectedTextColor: 'blue',
									fontSize: 10,
									title: 'Configurações',
									icon: icons.iconSettingsOutline,
									selectedIcon: icons.iconSettings
								}
							}
						}
					},
				],
				options: {
					bottomTabs: {
						titleDisplayMode: 'alwaysShow',
						backgroundColor: 'rgb(240,240,240)'
					}
				}
			}
		}
	});

[swabbass]

You don't need to share the source code, make a separate clean project, or use our playground and write the changes (minimal changes) that lead to the bug.

The code you shared does not help reproduce the issue.

[cassioseffrin]

@swabbass, understood I will follow your suggestion and share a fork on your playground, however I will do it on my extra time.