When running on Android, after scrolling the Flatlist and getting its content below the fixed ListHeaderComponent, when focusing the TextInput that lives inside the given header, the screen flickers and the list snaps back to scroll position y = 0.
On iOS everything runs as supposed.
Steps to reproduce:
Using the snack below, on Android, scroll the list and focus the input in the header, notice that the list snaps to new scroll position where y = 0.
Snack, code example, screenshot, or link to a repository: snack
FlatList have the same props as ScrollView and on Android when you focus on the input the ScrollView scroll to the input which in your case it's the first element.
You can avoid that in IOS but on Android, unfortunately, there's still no way to archive it, I prefer you move the view of the header out from the FlatList if it's a requirement or you can keep it the way it's.
Related
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
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt
I am trying to animate a top header via the scroll events from the scrollview.
When the user touches the screen and scrolls up, the nav bar follows the inverse of the scroll position with the help of diffclamp. i.e., translateY = multiply(diffClamp(this.scrollY, 0, NAV_HEIGHT), -1)
After the user releases the touch, I run a timing function to animate the Header, to either hide or show depending it on the snap point. i.e.,
If the diffClamp node > Navigation heigh/2, then snap point node returns 0.
Else snap point node returns (-) Navigation height.
This works fine on single scroll touch and release. But suppose on the first release I released the touch on - 20 (this.scrollY), and the animation ends. Later, if I touch and scroll, the scroll transition happen from the earlier released position, i.e., -20 , instead of 0.
You can check out the snack here.
I suppose it would have been solvable if I could set the diffclamp node to the snap point, but I guess it is not possible. Could you help how to solve this issue?
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.
In React Native, I have a <Text numberOfLines={5}> element that is working properly, but not when the text gets clipped right before a line break.
For example, in this screenshot, the first section is working fine, but in the second section, there is a line break immediately after "Transport:" and then the text is continued, but React Native isn't displaying ellipses so users won't know that there is text being clipped.
Is this possible? I saw some PRs for the Text prop lineBreakMode, but it doesn't look like it's been released yet. Would that prop would solve this issue? Is there an easy way to do this in the current version of React Native?