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!
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 am trying to make the bottom sheet touch the bottom of the screen rather than the bottom of the tab bar.
screenshot
Attempts to increase the z-index and position it further down are fruitless as the View will not overlap the bottom bar, it will always go behind it.
I tried to wrap it in a Modal component, which fixes the alignment, but then you can not interact with the map.
To create a custom bottom sheet. You can use this package
react-native-actions-sheet
I have used this in many applications. This will resolve all of your issues. As this package is comfortable in iOS and android both.
You can try the bottom sheet libraries which are present in react native. Few of which I have used is:
react-native-raw-bottom-sheet //my choice
react-native-actions-sheet
You can also check this out
I use a Bottom Tab Navigator with several different stacks in my React Native app. I have created a screen that opens like a modal using this in the screen options:
{ presentation: "modal" }
On iOS, phones with no physical home button (e.g. iPhone 12) get a strange unwanted bottom radius when the screen has been navigated to:
When the screen is being dismissed, the border radius gets even larger for a couple of seconds until it disappears completely:
I've tried changing the border radius on the screen's view but no luck. How do I get rid of this unwanted border radius? Thanks.
I am using native base tabs to display scrollable tab bars in react-native
I had 4 tabs and the content in each render item tab changes, so the length of the tab bar content changes. how can I adjust the height of the scroll view based on content in tabview. it should not scroll when content is less. it leaves blank space below when content is less.
when content in tab bar render item is more than the screen height it scrolls.
when content in tab bar render item is less than the screen height it should not scroll.
even if the content in the 2nd tab is less it scrolls based on height of 1st tab content height.
It should not scroll if the content on in tab render item is less.It should scroll based on the content in tab view
it's the sole reason why i left native-base because of the issue. It's and open issue with native base and they havent resolved it yet. The problem is that i had 3 tabs and three scrollViews had different height. so it takes the longest height and when we go to any other tab , it leaves blank space.
this is the link to the open issue in github native base tabs . Do check it out if you can find any resolution for it. I couldnt find it so ive switched to
react native tab view . .This is a better library for tabs and coz of the issue in native abse. i switched to it.
Hope it helps. Feel free for doubts
Im trying to create a view with an animated shrinking header with a tabview that contains tabs with flatlist(such as google play). See Image.
I'm using react-navigation with a TabNavigator. The header is a component with a fixed height, currently above the TabNavigator. The header is fixed above the tabs all the time taking precious space.
I've tried React Native: Animate shrinking header with tabs but I can't get it to work because I gonna integrate flat list in to tab.
This article is using scrollview in tab panel.
Certainly, I am looking for solution for using flatlist.