Keyboard closes when using Material Top Bar (Android)

[andrepaulo-bit]

Current behavior

Whenever I use navigation.navigate() to a screen while using Material Top Bar, or by tapping the tabs at the top, the keyboard opens and then closes.
Here's a quick video:
https://user-images.githubusercontent.com/96743857/156367244-e668c845-fbe7-4d4f-8c06-42eb64b94688.mp4

Expected behavior

Keyboard should stay open

Reproduction

https://github.com/andrepaulo-bit/keyboard-flash-problem

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.8
@react-navigation/bottom-tabs	6.2.0
@react-navigation/drawer	6.3.1
@react-navigation/material-bottom-tabs	6.1.1
@react-navigation/material-top-tabs	6.1.1
@react-navigation/stack	6.1.1
@react-navigation/native-stack	6.5.0
react-native-safe-area-context	4.1.2
react-native-screens	3.13.0
react-native-gesture-handler	2.3.0
react-native-reanimated	2.4.1
react-native-tab-view	3.1.1
react-native-pager-view	5.4.11
react-native	0.67.3
node	16.13.1
npm	8.5.1

[JstnEdr]

We also ran into this bug and wound a temporary workaround.

If you move the tab with the input to the first index, the keyboard stays open, as expected.

[frederikmartin]

I experience the same behaviour as also @JstnEdr described. For my use-case, only the tab with index 1 (middle tab out of three) shows this bug. All three tabs contain text fields. If I switch the order of the tabs, only the middle tab immediately closes the keyboard after a click into a text field.

One additional note: If I set the middle tab with index 1 as the default tab to load, the keyboard works. But if I then navigate back and forth to the same tab again, the keyboard will have the same issue again.

Edit 1:
I my use-case I hide the tab navigation bar anyways, so if I add a blank placeholder tab between each of the three tabs, the bug does not appear. Dirty quick hack 😁

[hasimdelil]

Hi. I am facing the same problem. I have three tabs and it appers only in middle tab. Is there any progress about the issue?

[rifad4u]

I experience the same behaviour as also @JstnEdr described. For my use-case, only the tab with index 1 (middle tab out of three) shows this bug. All three tabs contain text fields. If I switch the order of the tabs, only the middle tab immediately closes the keyboard after a click into a text field.

One additional note: If I set the middle tab with index 1 as the default tab to load, the keyboard works. But if I then navigate back and forth to the same tab again, the keyboard will have the same issue again.

Edit 1: I my use-case I hide the tab navigation bar anyways, so if I add a blank placeholder tab between each of the three tabs, the bug does not appear. Dirty quick hack 😁

@frederikmartin could u pls provide a sample code for the hack u have mentioned.

[frederikmartin]

I experience the same behaviour as also @JstnEdr described. For my use-case, only the tab with index 1 (middle tab out of three) shows this bug. All three tabs contain text fields. If I switch the order of the tabs, only the middle tab immediately closes the keyboard after a click into a text field.
One additional note: If I set the middle tab with index 1 as the default tab to load, the keyboard works. But if I then navigate back and forth to the same tab again, the keyboard will have the same issue again.
Edit 1: I my use-case I hide the tab navigation bar anyways, so if I add a blank placeholder tab between each of the three tabs, the bug does not appear. Dirty quick hack 😁

@frederikmartin could u pls provide a sample code for the hack u have mentioned.

import React from "react"
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"
import FooScreen from "./FooScreen"
import BarScreen from "./BarScreen"
import YoScreen from "./YoScreen"

/*
 * Use empty placeholder component to avoid issues on tab with index 1, 3, 5, ... with
 * a popping keyboard.
 */
function PlaceholderComponent() {
    return <></>
}

function TabNavigationScreen() {
    const Tab = createMaterialTopTabNavigator()

    return (
        <Tab.Navigator initialRouteName="Foo">
            <Tab.Screen name="Foo" component={FooScreen} />
            <Tab.Screen name="Placeholder" component={PlaceholderComponent} />
            <Tab.Screen name="Bar" component={BarScreen} />
            <Tab.Screen name="Placeholder2" component={PlaceholderComponent} />
            <Tab.Screen name="Yo" component={YoScreen} />
        </Tab.Navigator>
    )
}

export default TabNavigationScreen

Keep in mind, that for my use-case I disabled swiping and only navigate between tabs using navigation.navigate("Foo") etc.

[zain610]

Just reaching out if there was any progress made with this issue?

Currently facing this and unfortunately due to our business requirements, we are unable to re-order the screens so the screen with keyboard input falls on the first index 😭

One thing to note is swiping between tabs does not trigger a keyboard dismiss on the second tab, selecting the tab on the other hand does.

[rifad4u]

Just reaching out if there was any progress made with this issue?

Currently facing this and unfortunately due to our business requirements, we are unable to re-order the screens so the screen with keyboard input falls on the first index 😭

One thing to note is swiping between tabs does not trigger a keyboard dismiss on the second tab, selecting the tab on the other hand does.

I'm also facing this issue and we are unable to go live due to this issue . I have been waiting for 4-5 months for the fix, but they are not fixed it yet. 😭

[rifad4u]

Any update on this issue??

[trungtruc91]

Any update on this issue??

[rifad4u]

Any update on this issue??

There are no official fix for this issue so far, but as of now you can fix it in 2 ways.

1. Setting the windowSoftInputMode to adjustNothing.
2. Disable the tab animation by setting animationEnabled as false.

[dcdavidheisnam]

For me, the issue occurs only on the second tab, just like others have mentioned above. Also, I've seen that it doesn't occur if I switch to the second tab by swiping. It happens only when I use the tab bar to switch to the second tab.

[okwasniewski]

Hey, thanks for opening this issue. I will close this one as a duplicate to keep the discussion in this one #11128

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[Parmar-Bansi]

hello

@react-navigation/material-top-tabs

in last of screen textinput here but when keyboard open then tab bar also scroll up
can you guide me to fix position in top of the screen