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.
Related
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 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
I am trying to develop a profile screen which has the persons profile pic, name, etc in the header as well as tabs that determines which data gets displayed in the FlatList below. I want the header component to be scrollable with the FlatList so that the header does not take up screen space while scrolling the FlatList. Also, the header's tabs will change the data that gets render in the list. I have tried two approaches but neither one has worked. Including the header and flatlist inside of a scrollview causes the flatlist to continually call onEndReach until all of the data is returned, but I also read that this is not recommended. The second approach was setting the ListHeaderComponent on the flatlist to the header component, but every time a tab is change the entire screen reloads. I am looking to have the header scrollable as if it were part of the flatlist, and only the flatlist re-render when a tab is pressed. Similar to what Instagram has with their profile screen. Any help with this issue would be much appreciated.
I'm using React Native Router Flux and have a bottom tab bar. I have a screen set up with a lot of links to other screens on it. If the parent scene isn't added to the tabs, I'm unable to route to it.
I've looked through the documentation and tried various options and styling. I think the easiest option would be to apply a width of 0 to that particular scene group, but it isn't available with View styles.
I want to be able to hide the parent scene so it isn't showing in the tab bar. At the moment, nothing is changing and the item is showing in the tab bar.
Figured it out. The problem was that I had the child scenes nested within a parent scene. When I removed them from the parent and outside of the tabs, it worked perfectly.
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.