I am creating an app with two TabNavigators one at the top and one at the bottom.. but When I do that, the selected tab view is not taking the full screen rather than the screen is getting divided horizontally. where the bottom screen corresponds to the bottom TabNavigator and the top screen relates to the top TabNavigator.. is there a way around this in react native?
Related
I want my screen's header to scroll along with the tabs, Each of the tabs has infinite data so I am using FlatList to display it.
The problem is if I am displaying the header in simple View then that part doesn't scroll with the tab.
I tried to put the scroll view on top and then FlatList into it but that again is a performance issue.
Please suggest an optimized and better solution for the following.
I am using the latest versions of react native and react navigation.
I have 3 data sets (Movies, Shows, and Games) that I want to show with a FlatList depending on the selected tab. I am also using React Navigation.
I came up with 3 possible solutions to show the relevant info:
One FlatList that changes it's data property on tab change
One visible FlatList and two hidden FlatLists based on the tab
Using React Navigation to change the screen to one with a relevant FlatList based on the tab
What would be the optimal approach?
I need a way to create a tab bar that will vertically bump up the upper text and stick to the top of the page.
I currently am using createMaterialTopTabNavigator and it sits in the vertical center of the screen. I would like such that when a person scrolls on the subpages from the tab navigator for the whole page to scroll with it until the topTabNavigator sticks to the top of the screen.
I am currently using React Native + Expo.
I am open to different options as well. I have tried using a panel and embedding the tab bar in that but it caused weird scrolling issues on Android devices.
Thanks!
As shown in the attached gif, the navigation bar at the bottom and the URL bar at the top are pushed in and out(not just show/hide at once) of view as user scrolls. How can I achieve this 'hiding' effect in React Native? The key point is that the hiding speed of the component should correspond to the scrolling speed.
I have tried giving negative values to the top and bottom, like so:
style={{bottom:dynamicallyChangingScrolledValue()}}
although it does push the view out of the screen, space where the component used to remain in the blank, occupied.
Are they using animations here? or changing some offset value dynamically by incrementing a small amount?
I have a React Native app using react-navigation.
I would like to swipe gestures between 4 specific screens of a StackNavigator. From screen A, I want to access screen B on swipe left, screen C on swipe right and screen D on swipe up. And then from screen B for example, if I swipe right, I get back on screen A, etc.
I couldn't find anything in React Navigation 3.x that fitted my use case. Any recommandations, maybe in react-native-gesture-handler ?
I looked up this link already: How to swipe horizontally inside stackNavigator screens?
You need to make your own custom navigator for that (probably based on tab router): https://reactnavigation.org/docs/en/custom-navigators.html
Stack navigator is not made for the use case you're describing.