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.
Related
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!
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
Is it possible to disable the X and Y scrolling of a GoogleMap inside a Codename One?
I'm referring to a map created using the cn1lib described here: https://www.codenameone.com/blog/new-improved-native-google-maps.html
If the map is scrollable, then I cannot insert more than one map in a Form, otherwise the contentPane scrolling and map scrolling conflict. If the maps can be not scrollable, then I can insert more maps in the same Form without scrolling issues.
I know that I can use static maps (that are images), but I need that pinch-to-zoom and pin locators action listeners work.
Thank you
To expand on Steves comment. There's no support for this in the peer component wrapping. We assume most peers are scrollable within as mixing scrolling and native peers with produce a bad experience. E.g. panning the map instead of scrolling or potential artifacts when the map and title area draw on top of each other when your page is scrolled down.
I would suggest you take a different route for this use case. Use a static image and when a user taps the map open a map in the bottom part of the screen as a dialog or as a separate form to provide the full map UX.
When resizing using react-bootstraps navbar collapseOnSelect the hamburger menu works properly but at xs or below xs rather the hamburger menu is dropping down onto a new line below the logo creating a larger block than I would like the navbar to be on phone displays I'd like for it to stay on the same line.
If I understand that right, the problem that you are facing is when the hamburger change it’s behavior for the smaller devices you would like it to stay dripping down directly below it and not taking the whole screen, right?
If I’m right, that’s the usual behavior for bootstrap hamburger. I would say that it will be better to follow this UX due to smaller devices having very different sizes of screens. But if you would like to change it’s normal behavior you could remove the following css class from your navbar
.collapse.navbar-collapse
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.