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?
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.
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 am using sectionList to create sections for my application. I have two tabs which uses the same section list. The issue that I am facing is that when I click the second tab the data refreshes but the other properties like scroll position doesn't because sectionList is a pure component. This causes the header of the second section to disappear after scrolling to some point because there are lesser headers. The things I tried but did not provide any results are:
Use extraData to indicate re-render required
Cloning entire data
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 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?