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

181 questions
54
votes
8 answers

Detect ScrollView has reached the end

I have a Text with long text inside a ScrollView and I want to detect when the user has scrolled to the end of the text so I can enable a button. I've been debugging the event object from the onScroll event but there doesn't seem any value I can…
Eldelshell
  • 5,729
  • 7
  • 39
  • 59
43
votes
5 answers

How to get currently visible index in RN flat list

I have a horizontal flat list where each item is width:300 All I am trying to do is to get index of currently visible item. this.handleScroll(e)} horizontal={true} …
1110
  • 7,801
  • 45
  • 156
  • 303
29
votes
4 answers

Horizontal scrollview snapping react native

Hi I am trying to achieve scrollview snap to center like below gif link Check This Gif But unable to do so. Following is my react native code to achieve this. or is there any method to scroll to particular index of scrollview elements like…
26
votes
2 answers

Drag up a ScrollView then continue scroll in React Native

What I want (GIF) Here is a (quality-reduced) GIF about what I'm want to achieve. What I want (Text) I have a scrollview, that is positioned at the half of my screen. What I want is to drag that scrollview up, and then, when it reaches a certain…
David
  • 4,490
  • 6
  • 31
  • 54
26
votes
2 answers

Finding out scroll direction in react-native listview/scrollview

Is there a way to find out the scroll direction of react-native's listview/scrollview components? Native iOS components seem to be able to do it by calculating the offset from scrollViewWillBeginDragging and scrollViewDidScroll, but there seems to…
Secret
  • 2,859
  • 3
  • 27
  • 44
23
votes
5 answers

ScrollView with flex 1 makes it un-scrollable

I'm trying to run flex on a ScrollView, and as long as the ScrollView has flex: 1 the scroll inside does not work. here is the expo fiddle (that you can run this code and play with) https://snack.expo.io/SySerKNp- note that if you remove the flex:…
19
votes
7 answers

react-native - How do I scroll a Webview inside scrollview for android?

I want to use WebView inside ScrollView for my react native app. But if I do so, I am not able to scroll my webview, unless I disable the scroll on scrollview. However, I need the scroll in both scrollview as well as webview. Any suggestions or…
15
votes
3 answers

React Native - Pagination of ListViews in ScrollView?

I have 3 ListView components inside a single ScrollView component like this:
alert('load more 1')}/> alert('load more 2')}/>
Wonka
  • 5,762
  • 17
  • 59
  • 108
13
votes
2 answers

React native ScrollView disable one direction on condition

is it possible to scroll only to one direction? I have a function that detects the direction the user is a scroll. But I can't figure out how can I set a flag, that if the user doesn't answer the question it will not allow him to scroll right only…
13
votes
1 answer

Horizontal scroll some part of ListView column

I want to horizontally scroll some part of a ListView in React Native. How can I fix the position of first column and make other column horizontally scrollable?
12
votes
3 answers

How to position a View at the bottom of a ScrollView?

I would like to create a screen with a ScrollView with some input fields in it, and a Button (actually 2 buttons in a normal View) at the bottom of the screen. This should be pretty easy, BUT, I want to position my button at the very bottom of the…
Márk Farkas
  • 818
  • 8
  • 17
12
votes
5 answers

TextInput prevents ScrollView from scrolling

I have a form that is longer than the phone's screen height. It is a ScrollView containing TextInput components. The problem is that when I want to drag starting the touch on a TextInput, the ScrollView doesn't move. If I drag starting on a blank…
11
votes
0 answers

React Native FlatList nested inside FlatList with same orientation

I Cant create FlatList nested inside FlatList with same orientation; the result is that the parent is horizontal but the children are vertical; this is my code: renderSlides(question) { return
11
votes
4 answers

React Native - how to scroll a ScrollView to a given location after navigation from another screen

Is it possible to tell a ScrollView to scroll to a specific position when we just navigated to the current screen via StackNavigator? I have two screens; Menu and Items. The Menu is a list of Buttons, one for each item. The Items screen contain a…
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,109
  • 9
  • 68
  • 110
1
2 3
12 13