Questions tagged [react-native-scrollview]

ScrollView is React Native component equivalent to Android/iOS ScrollView, that allows the view hierarchy placed within it to be scrolled

Documentation: here

232 questions
11
votes
4 answers

How can I disable bounce effect in Scrollview (React Native)?

I have used Scrollview in my screen and when I log y offset I get negative values? How can I disable Scrollview bouncing?
Umid Boltabaev
  • 442
  • 2
  • 6
  • 17
11
votes
1 answer

Scrollview and child with flex: 1

Is it possible to have a layout which is wrapped with ScrollView: dynamic height flex with minHeight static height and meets below prerequisites: Height of the first View is…
user3452568
  • 283
  • 3
  • 14
11
votes
1 answer

ReactNative ListView setting initial scroll position after data loaded

I have an events section which has section headings containing the date. I need to be able to jump to specific dates, as well as have the initial scroll position set to the first date in the future. In order to jump to specific dates I have tried…
Tom
  • 12,591
  • 13
  • 72
  • 112
9
votes
3 answers

React Native scroll bar in the middle of the screen

Hermes enabled OS: iOS getting with FlatList and ScrollView When developing ScrollView or FlatList, having no issues with the scroll bar. In production, sometimes it looks ugly and positions at the middle of the screen, sometimes with huge/small…
spatak
  • 1,039
  • 1
  • 14
  • 25
9
votes
3 answers

Flex React Native FlatList children to grow to full height?

I'm using FlatList from React Native to render a bunch of items stacked on top of each other. This works fine, I've managed to make the FlatList itself expand it's height to fill the available space but I want the FlatList items to grow when there…
8
votes
0 answers

ScrollView Refresh control is not visible when reload content from scrollview bottom

I have a scrollview which content is larger than phone screen. I scroll to the bottom and there I have function that reload content of that scrollview but first clear data source for it. Reload function is connected to RefreshControl on…
1110
  • 7,829
  • 55
  • 176
  • 334
8
votes
0 answers

Can you offset React Native ScrollView sticky headers?

Is it possible to have React Native ScrollView's "sticky headers" (set with stickyHeaderIndices) stick somewhere other than the very top of the ScrollView. In my case, I have a 80px partially transparent header over the top of the ScrollView and I…
nicholas
  • 14,184
  • 22
  • 82
  • 138
8
votes
1 answer

How to maintain position in scrollable view when elements load above the current position?

I have a react-native SectionList that contains multiple FlatLists in the view. When a user touches one of the elements in the bottom FlatList, some of the FlatLists above will load new data causing the user's current view to seem be pushed up. In…
Tyler
  • 827
  • 2
  • 11
  • 25
8
votes
2 answers

Clickable Background underneath a ScrollView [React Native]

So, I want to create a layout similar to whats below. [Refer the Image] So the background has a full screen MapView (React Native Maps) with Markers over it, which needs to be clickable. And there is a Scrollview with full screen height over the…
red-devil
  • 1,064
  • 1
  • 20
  • 34
8
votes
1 answer

React Native ScrollView: Different Colors for top and bottom

I want to use a scrollView that when i scroll over the top it has the background color of the top element (green) and when it bounces on the bottom it has the color of the bottom element (white). I am not sure how I can do that.
Patrick Klitzke
  • 1,519
  • 2
  • 14
  • 24
7
votes
1 answer

How to detect which item will be snapped to, when swiping in FlatList that snaps to interval?

I have a component with a horizontal that contains 100s of items (calendar days), with the same width as the screen. The is set to snap to an interval similar to the screen width, so I can swipe between items. When I swipe to a…
7
votes
2 answers

React-Native style a sticky header when it sticks

I've a short question: How can I apply a different style to a sticky header in a scrollview when it sticks? I wanna add some shadow/elevation when it sticks. Thank you :) Environment react-native: 0.45.0
Daniel Lang
  • 183
  • 2
  • 8
7
votes
1 answer

ReactNative ScrollView scroll threshold

I am trying to understand how can I set a threshold for the RN ScrollView. This is because if you have multiple vertical scrollable View in a horizontal ScrollView then the scrolling of the Views is very difficult. So i just need something that…
Alessandro Annini
  • 1,531
  • 2
  • 17
  • 32
6
votes
2 answers

React-Native FlatList with 3 cards paging layout

In this snack I am trying to have 3 cards in the center of the screen with a horizontal FlatList and enabled paging to jump to the next 3 cards on scroll. But the layout starts getting destroyed after scrolling and some pixels of the next/previous…
6
votes
2 answers

How can I keep position on ScrollView or ListView?

When you use ScrollView or ListView in your ReactNative app and some new data came in, the default behavior of them is to keep the position in the Scroll component. Which means if the new data of height 20 came in when you're at the middle of the…
1
2
3
15 16