Stack Overflow
Stack Overflow

Questions tagged [react-navigation-top-tabs]

34 questions
4
votes
2 answers

Check the render method of `MaterialTopTabNavigator`

I want to create a Top Tab navigator and put two screens Badges.js and Studying.js into Tab when I run it on my device I get an error it says "Error: Element type is invalid: expected a string ..." and "Check the render method of…
Ali Mahmoudi
  • 83
  • 2
  • 8
3
votes
3 answers

WARN Sending `onAnimatedValueUpdate` with no listeners registered

I got stuck. I am developing a mobile application with React Native CLI & React Navigation 6.x Then when i use material top tabs navigator, swiping through left to right or right to left. It always send a warn I've tried useFocusEffect,…
Merovingian
  • 33
  • 1
  • 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
3 answers

After installin Reanimated 2 still get the warrning "If you want to use Reanimated 2 then..."

i m trying to use '@react-navigation/top-tabs' but it deppendes on reanimated 2 i installed reanimated 2 but still get the same warrning : If you want to use Reanimated 2 then go through our installation steps…
Taha Janan Ismail
  • 43
  • 1
  • 6
2
votes
0 answers

Not able to view the component of the top tabs

I am creating top tabs using "material-top-tabs". I have created a separate file for the component part called "LightingConfigScreen". The issue that I'm facing is that only the heading i.e. "Configuration" is visible and there's no screen rendering…
Satyam
  • 63
  • 4
2
votes
0 answers

Custom Styling of Material Top Tabs Navigator React Native

I want to create this type of Top Tabs Navigator for my project but i don't know much about styling of Top Tabs Navigator My Current Design - Design i want to create - My Code - import { createMaterialTopTabNavigator } from…
newdevv2
  • 201
  • 3
  • 10
2
votes
1 answer

React-Native tabs navigation bug: automatically returns to the first bottomtab visited

if I navigate in a top tab inside the bottom tab 1, and then I try to go to the bottom tab2, after a few seconds it brings me back to the initial bottom tab 1 these are my dependencies: "dependencies": { "@react-native-async-storage/async-storage":…
Steelkeeper
  • 21
  • 1
2
votes
3 answers

Navigate to component screen in parent stack from child stack

I'm trying to navigate to a screen on my Stack Navigation from my topTab navigation but can't find a way around it. I tried using navigation.getParent() but it throws this error TypeError: undefined is not an object (evaluating…
Marvelous Ikechi
  • 2,031
  • 2
  • 15
  • 26
2
votes
1 answer

React Native - No command found with name 'scrollTo'

I am new to ReactNative, not sure what is happening here. I want to use MaterialTopTabs of ReactNavigation library https://reactnavigation.org/docs/material-top-tab-navigator\ Adding one of the property does not work with ios but on…
Lakshit Nagar
  • 303
  • 3
  • 5
1
vote
0 answers

Material top tabs component not rendering

I am creating top tabs using "material-top-tabs" and for some reason the components part of tabs is not rendering. Here's the basic structure of my code: function ConfigurationsScreen() { // Content of the Configurations screen return ( …
Satyam
  • 63
  • 4
1
vote
3 answers

material-top-tabs closes keyboard on first focus

I am using "react-native": "0.70.4", with the @react-navigation/material-top-tabs to make a custom bottomsheet with top tabs inside. When clicking the TextInput in tab nr 2 it dismiss the keyboard, but if i click again it does not happen. I tried…
KLK
  • 49
  • 7
1
vote
1 answer

How to adjust material top tabs width individually in react native

My goal is to copy WhatsApp UI. However, I am having trouble making the camera icon smaller while keeping the others flexed in the row direction. Below is code
Kihlaj
  • 65
  • 8
1
vote
1 answer

How to pass a value from headerRight component from navigator to nested navigator's screen in react native?

I have my navigators arranged like this. Bottom Navigator 2. Stack Navigator 3. Material Top Tabs Navigator 4. Home Screen I have created headerRight button in StackNavigator's ScreenComponent like this. export default HomeDashboardNavigation…
cod3luv3r
  • 11
  • 2
1
vote
0 answers

React Native material top tab navigator: how to make text equally spaced?

I'm using "@react-navigation/material-top-tabs": "^5.1.7" in my React Native app, and have the following top tab navigator: The individual tabs are equal width, but each word is a different length, which means that there's unequal space between…
gkeenley
  • 6,088
  • 8
  • 54
  • 129
1
vote
1 answer

How to render material top tab navigator inside a custom header component

I would like to render material top tab navigator created with createMaterialTopTabNavigator() from react-navigation inside a custom header component. Indeed, my header is a gradient, so I need to have tabs into the header like this: So I set a…
gigeos
  • 308
  • 5
  • 14
1
2 3