Questions tagged [tabnavigator]
254 questions
14
votes
2 answers
Change bottom border color of selected tab bar item
I have the following code in react-native
import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';
class Home extends Component {
static navigationOptions = {
…
John
- 32,403
- 80
- 251
- 422
12
votes
7 answers
TabNavigator extra padding
How to style the TabNavigator Tab's height and padding? Im doing the following:
import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
TabItem1: {
screen: MainScreen,
navigationOptions: {
…
Somename
- 3,376
- 16
- 42
- 84
11
votes
3 answers
Creating a TabNavigator with dynamic tabs
I'm relatively sure I found out it isn't possible, but I want to make sure there isn't a way.
The app in question starts off with an AppNavigator StackNavigator.
export const AppNavigator = StackNavigator({
Login: {
screen: Login,
…
DerpyNerd
- 4,743
- 7
- 41
- 92
11
votes
2 answers
Multiple Tab fragments inside bottom navigation fragment
In bottom navigation with three tabs (Home, Dashboard, Notifications). Each bottom navigation tab is a fragment. The first tab ie. Home fragment contains another top navigation tabs having four tabs (Tab 1, Tab 2, Tab 3, Tab 4).
The problem
When …
Puni
- 1,214
- 2
- 18
- 34
10
votes
1 answer
TabNavigator can't handle disabled children in Flex 4.5
I've got a problem while migrating my TabNavigator from Flex 3 to Flex 4.5. Stripped to the bare minimum the following code will produce the bug, namely that the second child of the TabNavigator fails to be created properly:
Daniel Kitachewsky
- 451
- 3
- 11
10
votes
4 answers
Block/Disable tabs in TabNavigator - react-navigation
I have a TabNavigator as shown in the picture.
Header Image
I am using TabNavigator for creating these tabs as below.
const Tab_Navigator = TabNavigator({
First:{
screen: First,
},
Second:{
screen: Second,
},
…
Smit Thakkar
- 410
- 2
- 8
- 16
8
votes
3 answers
React Native - Creating Navigator dynamically with React Navigation
I am building a mobile application with React Native and I am using React Navigation to build a navigator inside my application. React navigation provided me a good way to handle nested Tab bars inside a drawer which is also inside a Stack…
ozer
- 522
- 1
- 6
- 23
8
votes
4 answers
How To Reload View Tap on TabNavigator in React Native
I want to reload the tabNavigator when the user changse the tab each time. the lifecycle method of react native doesn't get called when user changes the tab. Then how can it be possible to reload tab in TabNavigator :
The below example have two Tabs…
Kirit Modi
- 23,155
- 15
- 89
- 112
7
votes
9 answers
Error when setting up Tab Navigator - ' Got an invalid Value for 'component' prop for screen 'Home'
I'm currently receiving the error 'Got an invalid value for 'component' prop for the screen 'Home'. It must be a valid React Component.'' I'm trying to link the tab navigator to a series of different screens. Please see the code below and thanks in…
Daniel M
- 107
- 1
- 1
- 5
7
votes
4 answers
Hide TabBar item in TabNavigator
How is it possible to hide certain TabBar item from TabNavigator. Is there a certain TabBarOptions option, which has visible key(true/false) like this?
const Tabs = TabNavigator({
Home: {
screen: Home
},
Profile: {
screen: Thanks,
…
Nikasv
- 1,317
- 5
- 17
- 33
7
votes
2 answers
Hide TabNavigators and Header on Scroll
I want to hide the Header and the TabNavigator tabs onScroll. How do I do that? I want to hide them onScroll and show them on ScrollUp. My code:
import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet,…
Somename
- 3,376
- 16
- 42
- 84
7
votes
2 answers
Hide labels in TabNavigator - ReactNavigation
How do I hide the labels in TabNavigator and show only icons? If I do the following:
const Tabs = TabNavigator({
Home: {
screen:MainHome,
navigationOptions: ({ navigation }) => ({
title: "Home", //Tried to hide this for next tab…
Somename
- 3,376
- 16
- 42
- 84
7
votes
1 answer
Set backgroundColor and Badge for Tabnavigator in React-Navigation
In React-Native with React-Navigation I have a Tabnavigator like so:
const testScreenNavigator = TabNavigator({
Tab1: { screen: Tab1Screen },
Tab2: { screen: Tab2Screen },
Tab3: { screen: Tab3Screen…
user3819370
- 513
- 1
- 6
- 15
6
votes
2 answers
createBottomTabNavigator has moved to error message
I am getting an error message on Expo which says ''createBottomTabNavigator()' has been moved to 'react-navigation-tabs'. See http........ for more details
I have done npm install react-navigation-tabs and changed my imports but those changes did…
tobiappdeveloper
- 191
- 1
- 3
- 11
6
votes
0 answers
CreateMaterialTopTabNavigator navigation is slow
CreateMaterialTobTabNavigator is very laggy when navigating between the tabs .
I have used three navigators in my code. drawer Navigator has stack and tab navigator, and the default loading is the 'tab navigator' made with…
Redmen Ishab
- 2,199
- 18
- 22