Stack Overflow
Stack Overflow

Questions tagged [react-native-tabnavigator]

Component that provides tab-based navigation for React Native application.

Reference

165 questions
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
6
votes
1 answer

ReactNative Horizontal ScrollView within material-top-tabs (nested ScrollView)

I am currently trying to position a horizontal ScrollView within the content of the react-navigaion material-top-tabs (which also scrolls horizontally). The expected behavior: When dragging within the horizontal ScrollView, only the ScrollView…
Christian Aichner
  • 366
  • 3
  • 18
6
votes
4 answers

I have an error in react native null is not an object ''evaluating _ReanimatedModule.default.configureProps'

I installed react native on linux machine.I want to implement createBottomTabNavigator in my practice code.I create 5 folders and index.js inside them. navigate.js : import {createAppContainer} from 'react-navigation'; import…
mohamadreza ch
  • 311
  • 4
  • 13
6
votes
1 answer

How to change Header title in navigationOptions from constructor in react-native app?

In my react-native project I have use DrawerNavigator from which I navigate to SwitchAccount page. In SwitchAccount page I have use Tabs from react-native-tabs. Below is code where I use render() { return (
GAURAV
  • 647
  • 6
  • 18
5
votes
1 answer

How to hide a parent Stack Navigator Header only in certain screens in React Native

As per title, I would like to hide the header of a parent stack navigator from a children component, this is because there are certain screens where I would like to keep the parent header and some screens where I would not. I'm aware that one could…
Jia Hui Tan
  • 51
  • 1
  • 2
5
votes
4 answers

How to remove white space between the tabs in react navigation top bar

How do you remove white space between the tabs in react-navigation top bar. So what should happen is the tab size should adjust based on the screen size. This is what my navigation looks like at the moment. You can see that the tabs are really big.…
breaktop
  • 1,899
  • 4
  • 37
  • 58
5
votes
2 answers

How to correctly change the width of the indicatorStyle in React Native Top Navigation?

I want to be able to reduce the width the indicatorStyle in the Top Naviagtion bar to achieve the results below: But whenever i try to reduce the width of the bar, i cannot get to center it properly. Here is what i have currently; Here is my code…
Cyborg_Trick
  • 174
  • 3
  • 12
5
votes
1 answer

React Native (React Navigation) Passing data from one screen to another using

I have a react native application that I created using Ignite CLI. I am trying to use TabNavigator with React Navigation, but I can't seem to figure out how to pass data from one screen to another. All the examples I've seen generally show how to…
pdad04
  • 75
  • 1
  • 7
5
votes
4 answers

Is TabNavigator deprecated?

When I run the simulator with... react-native run-ios ...I am seeing a message in the terminal that "TabNavigator is deprecated. Please use the createBottomTabNavigator..." However, I don't think TabNavigator is deprecated, and I don't think…
arnoldbird
  • 886
  • 1
  • 13
  • 30
4
votes
1 answer

React-Native: Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead

I am developing a mobile app with React Native, and in it I use Tab.Navigator - Tab.Screen component. In the Navigator I use the initialRouteName , tabBarOptions , and screenOptions properties. Everything works fine in the other properties, until…
Toms_Hd3z
  • 129
  • 1
  • 11
4
votes
1 answer

How to persist stacked screens when switching between tabs in React Native Navigation

I am using a bottom tab navigator created with createBottomTabNavigator() and passing it several screens, each of which contain their own stack navigation: const tabNavigator = createBottomTabNavigator({ TradingStack, LendingStack, …
LiteralMetaphore
  • 601
  • 1
  • 7
  • 17
4
votes
0 answers

Screen and header is flashes in react-navigation

I am using react-navigation to navigate the screens. Here I have used TabBarBotoom and stack navigator. The headerRight (header right there is 3 icons) is inside the stacknavigator so while navigating it gets flickering. Any solution for this. In…
sejn
  • 2,040
  • 6
  • 28
  • 82
4
votes
1 answer

Can one React Native screen be included in two different stack navigators?

Is there any reason a screen shouldn't be included in two different stack navigators? I would like it in both stack navigators to have a smooth, in-flow page transition and back button to smoothly go back to the previous page. In example below,…
yam55
  • 1,541
  • 2
  • 11
  • 12
4
votes
0 answers

callback for tabnavigator tab press or tab swipe react-navigation

Is there any way to call a function upon each TAB switch either via TabPress /Tab Swipe Event. For tabPress I have tried tabBarOnPress in navigationOptions of TabNavigator and it is working fine.But it is not getting called if I swipe between…
Shubhi Sood
  • 410
  • 4
  • 13
3
votes
2 answers

navigation.goBack() not working in nested navigation

my screens are arranged this way: main root Stack navigator has 2 screens Login Drawer The drawer is a Drawer Navigator, having three screens Home Profile Settings Home is a Bottom Tab Navigator having multiple Screens…
Mukash Wasti
  • 135
  • 1
  • 16
1
2 3
…
10 11