Now I want to create, exactly like Facebook's app do, a bar displayed above my tabNavigator. This tabs hide on scroll down and show on scroll up.
And now I'm using FlatList, but the FlatList component has ListHeaderComponent option for rendering his header who also hide when scrolling down. (because it is on top, so need to scroll to beginning to see it, not user-friendly with my very long list item )
Please help me any idea.
Flat list provide you a header and footer of it self. You have to make it manually. I found one link which is related to collapsible navbar.
https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a
https://expo.io/#janic/collapsible-navbar this lnk has a demo. so you can check it out here
might this helpful !
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've been trying to implement a rather common UI pattern. I've got a react-navigation MaterialTopTabNavigator that contains a number of ListViews. When the currently active ListView is scrolled down, the header above the Tabs is supposed to be hidden (by translating it up, out of the viewport), the tabs should as well move up.
Like in this picture
The problem I'm facing here is either
a) if i translate the header and the tabs up, i need a paddingTop in the lists to make sure the first item is completely visible. But if i scroll down and the header is hidden and then switch to the next tab (where the list is scrolled to the top) the padding will be visible.
or
b) If i translate the whole thing (header, tabbar, and ListView) the paddingTop is not necessary (I can add a padding at the bottom and hide it via a BottomTabNavigator) but the animation gets jerky on android.
There seems to be a bug in react-native causing this.
But there are apps around for Android that implement this pattern.
I'd be grateful for any ideas or pointers around this.
I have a FlatList with a Header. When I pull to refresh now, the header goes down along with all list items:
But I want it to stay on top, so that only items are pulled down:
Such behaviour can be achieved if I'd put my header component not inside the FlatList, but before it. However, it's not suitable as the header will always stay on top, but I need it to scroll away with list items as if it was the part of the list. How can I do that?
I have tried setting a negative margin for the header in the onScroll event, but it doesn't look smooth at all and causes weird effects.
I'd appreciate your ideas on how this can be done.
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 creating a react native app that displays a list of posts in a FlatList. The posts are either text or images. I have 2 requirements that I'm struggling to achieve:
Scrolling: I want the user to be able to scroll the list of posts effortlessly i.e., the posts should ignore scroll events so they get handled by the parent FlatList.
Select/Click: I want the user to be able to select text or click on links in the posts i.e., the posts should handle onPress() events.
If I render the posts as normal Views in a FlatList, text selection and clicking works as expected but scrolling works poorly. This is because the posts sometimes capture the scroll events. The behavior is much worse with posts that include large images. I can fix the scrolling problem by adding pointerEvents="none" to the posts. However, in this case, it will no longer be possible to select text in the posts or click on any links.
Is there a way to achieve smooth scrolling while still being able to select text and click on links in each individual post? I tested this on Android only.
To disable scrolling you can use the prop scrollEnabled={false} , this is considering the Flatlist inherets Scrollview props as is explained in the react docs.
To make clickable a text, use some touchable, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback.