Wondering how I can achieve this scrolling behavior like Instagram has on their profile pages with React-Native? More specifically, how I do limit the scroll indicator to just the bottom section rendering the posts?
Instagram scroll behavior vs what I have
So far these are what I've tried with no success:
Using a FlatList with a header component (both sticky and not).
Using a SectionList, with a FlatList in one section, but if set showsVerticalScrollIndicator={false} on the SectionList, the FlatList also does not display the scroll indicator, no matter its value.
Also tried using Animated (react-spring) values and translating components based on scroll offset. This is the closest I've been, but it had more of a parallax effect which isn't really what I'm aiming for. Also, the animation was very choppy.
Been trying my hand at this for a couple of days now so any help is appreciated. Thanks!
Related
Basically title. I want to wait for the cells that are going to visible to be rendered before scrolling to the position because right now i am getting a lot of blank area when scrolling fast.
Can you try to optimize your cell list rendering first? FlashList has this performance issue when the app renders heavier content (videos, high-resolution images,...).
Replacing FlatList with Shopify's FlashList should fix the problem - https://shopify.github.io/flash-list/
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
In a react native screen, the top part is a flatlist, and the bottom part is a toolbar, with some buttons in it. And, there is also a hidden component which shows when a button is pressed. What I hope is, when the hidden component is showing, the flatlist is pushed up, so that lower part content of flatlist will be still on the screen.
But the reality is, when the hidden component is showing, it covers the flatlist. I have no way to make flatlist component automatically be smaller.
How to resolve this issue?
thanks
Try styling all three component using flex.
for e.g.
give flatlist flex:3
hidden button flex:1
toolbar flex:2
And now when button appears, height will be automatically adjusted.
I'm building a React Native app which has a screen containing a list of several items the user can see. I wrapped up the elements by using a ScrollView component and it works fine as shown below:
However, I'd like to have the vertical scrollbar always visible just to let the user know he can see more items than the ones shown in the first place. I've read the ScrollView documentation but it seems that there is not an option to make it happen.
Does anyone know if there is a way to achieve that or perhaps a workaround to make it intuitive to the user that there is a scroll on the list?
Try this ,Its working for me
persistentScrollbar={true}
https://facebook.github.io/react-native/docs/scrollview#flashscrollindicators
The closest thing to showing the scroll indicator constantly that is available in React Native is flashing the indicator. You can obtain a reference to the scrollview and call the flashScrollIndicators() method. There is no known way to disable hiding the indicator without writing native code. If you want to go down that path, you could try something like this for iOS.
The effect I'm looking for is a bit hard to describe, but I'm basically trying to implement a header above a scrollView which allows you to scroll normally when touching inside the scrollView, but then when you drag up out of the scrollView onto the header, it moves the header up.
This effect is used with the iPhone keyboard as a footer for messages for example, where you can scroll through messages normally and the keyboard will stay. However, if you scroll down into the keyboard, it drags the keyboard down.
https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode 'interactive' is the effect I'm trying to achieve, but instead of for a keyboard I'm looking to do it for some custom header component which is above my scrollView.
I figure I could match the scroll to the components Y translate Y, however I only want to do this depending on where my touch is. Sadly, the onScroll event doesn't seem to contain any information on the touch location, so I can't tell where the user is dragging. Any help or ideas for other ways to implement this would be greatly appreciated.