Stack Overflow
Stack Overflow

Questions tagged [react-navigation-bottom-tab]

422 questions
4
votes
1 answer

UmnountOnBlur in createMaterialTopTabNavigator

How to unmount my screen when i change my tab. I am using createMaterialTopTabNavigator() from @react-navigation/material-top-tabs package. i have tried to add unmonuntOnBlur in options but it doesnt work.
akshay2739
  • 195
  • 2
  • 14
4
votes
2 answers

How to make the overflow of tab bar icon clickable in react native?

I'm creating a custom tab bar using React Navigation 5 and createBottomTabNavigator of @react-navigation/bottom-tabs, The Problem: The Red icon is only clickable within the tab bar range, once i have crossed the grey line of the tab bar i can not…
Omar Alaa
  • 141
  • 2
  • 13
4
votes
6 answers

hide/remove Icon or Icon view from bottom tab navigation

I want to remove the Icon space/View from the Bottom tab Navigator. I tried to remove the Icon by removing tabBarIcon but it didn't work. Here is the code I tried and the outcome I received. It is not looking that good, the label is not at the…
Vikas Bansal
  • 2,184
  • 2
  • 15
  • 18
4
votes
2 answers

How to implement a shared Search Bar input across stack/tab navigators using react-navigation?

Snapchat's UI is currently setup with a floating SearchBar header that appears to be shared across a few screens/tabs. I'd like to replicate the shared SearchBar header using react-navigation. I currently have a half working solution... Currently…
Tristan Heilman
  • 278
  • 1
  • 4
  • 16
4
votes
1 answer

SafeArea color of bottom tab in dark mode cannot be changed

I have been stuck in this issue since yesterday and I cannot find a solution. I have been trying to adjust the color of safeArea in iPhone X, it's working well on the top, and in the bottom as well for screens with no tab, however, in screens with…
user9559590
  • 103
  • 1
  • 8
4
votes
1 answer

Lazy Load specific tab with React-Navigation v4

I am using React-Navigation V4 and the question is, Is there any way of lazy load only specific tab like if i have four tabs and i want to load two tabs after initialisation of tabs component and don't want to load other two these two only will load…
Waheed Akhtar
  • 3,110
  • 1
  • 16
  • 30
3
votes
1 answer

React Bottom Tab Navigation - Change the title in the screen without changing the title in the tab

I can change the Header Title dynamically but that changes the title in the tab as well. How can I change the title on the screen without affecting the title in the tab? This is my navigator -
user2100041
  • 47
  • 4
3
votes
0 answers

Expo Material Bottom Tabs Navigator doesn't work -> showing default BottomNavigation from React-Native-Paper

I've been trying to create a normal material bottom tabs navigator and it just doesnt want to work. I also tried another identical code I had and there it works like it should, but with this code the Material bottom Tabs Navigator shows the…
vana22
  • 63
  • 4
3
votes
1 answer

How to Add Top Tabs inside the bottom tab navigation

Hi I want to Add the top tabs inside the bottom tab page So I want the screen, instead of the bottom tab header, I want to show top tabs that can move to the another screen , And Here is my Snack Code Screen :…
Umgee
  • 143
  • 1
  • 1
  • 7
3
votes
0 answers

How can I align bottom tab navigation to bottom?

I am currently making custom bottom tab navigator because I had issues with the react native safe context where the black bar on the phone goes on top of the text on the bottom tab. And I would like to have it on bottom. I have also basic bottom…
Jukka Koivu
  • 269
  • 4
  • 15
3
votes
2 answers

React Native-Styling Tab Navigator

I want to add custom styles to my tab navigator. I have tried using the style:{} inside screenOptions but the styles don't work. Only the built in style props work. Here is my code: import React from "react"; import { createBottomTabNavigator } from…
Ibtsam Ch
  • 383
  • 1
  • 8
  • 22
3
votes
1 answer

How to change height of Bottom Tab Navigator in React Native

I am trying to change height of my bottom tab navigator bar in React Native. I've tried some answers from this Stack Overflow question but nothing seems to work. Please help. My code: export default function AppTabs({ logged }) { const Tabs =…
themm1
  • 137
  • 2
  • 10
3
votes
1 answer

React Navigation 6.x Header problem in bottom-tab

I have updated my dependencies to React Navigation 6.x React Navigation 6.x says, "Headers by default in Bottom Tabs & Drawer# Developers often want to show a header for screens inside of drawers and bottom tabs. To do this, we had to nest a stack…
Shailendra
  • 31
  • 3
3
votes
2 answers

React Native Bottom tab bar jump on every load

i have the exact same problem like on issue: React Native header / bottom tabbar jumping on first app load On every load the bottom bar jumps up and down for unknown reason. I wrapped the root app in SafeAreaProvider, i wrapped my screens in…
Milan Nesovic
  • 33
  • 4
3
votes
2 answers

How do I add a navigation button to a React Navigation Stack header with nested Bottom Tab Navigator?

I am trying to build a mobile app in react-native and I'm having some problems setting up React Navigation. What I want to achieve is a Bottom Tab Navigator that Navigates to the 'Home' screen and the 'Profile' Screen. From the 'Home' screen, there…
KnowIdea
  • 51
  • 5
1 2
3
…
28 29