CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-bottom-tab
Marco Caldera
Marco Caldera

Reputation: 505

Header glitch while opening the keyboard

I have a problem. While I'm opening the keyboard (by tapping the TextInput) a glitch appears (see the GIF).

Currently, I'm using a stack navigator inside a tab navigator (using only the stack navigator I haven't got any problems).

What could be the problem? I couldn't find any solution!

Navigator:

import HistoryScreen from '../screens/HistoryScreen'
import HomeScreen from '../screens/HomeScreen'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createAppContainer } from 'react-navigation'

const HomeNavigator = createStackNavigator({
    Home: HomeScreen
})

const HistoryNavigator = createStackNavigator({
    History: HistoryScreen
})

const TabNavigator = createBottomTabNavigator({
    Home: HomeNavigator,
    History: HistoryNavigator
})

export default createAppContainer(TabNavigator)

package.json:

"dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/native": "^5.0.9",
    "expo": "~36.0.0",
    "lodash": "^4.17.15",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-appearance": "~0.3.1",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-status-bar-height": "^2.4.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.2.2",
    "react-navigation-drawer": "^2.4.2",
    "react-navigation-header-buttons": "^3.0.5",
    "react-navigation-material-bottom-tabs": "^2.2.2",
    "react-navigation-stack": "^2.2.3",
    "react-navigation-tabs": "^2.8.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
}

Upvotes: 1

Views: 664

Answers (1)

Marco Caldera
Marco Caldera

Reputation: 505

In the end, my solution was to add the parameter keyboardHidesTabBar: false to the tab navigator configuration. This solve my issue though I don't fully understand the motivation behind it.

tabBarOptions: {
    keyboardHidesTabBar: false
}

Upvotes: 1

Related Questions