React-native: [ScrollView] Warning: ScrollView doesn't take rejection well - scrolls anyway

[magicismight]

I put a ScrollView inside another ScrollView.
When I scrolled,It will give a warning: Warning: ScrollView doesn't take rejection well - scrolls anyway ,and sometimes the ScrollView inside will jump to the top or bottom.

[rxb]

Is it a vertical + horizontal combination or two ScrollViews scrolling on the same axis?

[marcshilling]

I get this warning randomly even without nested ScrollViews. No clue what it means.

[piyushchauhan2011]

Ohhh I'm also getting this warning don't know why :disappointed:

[silentcloud]

I'm also getting this warning

[eljago]

I'm getting this when scrolling vertically a ListView that's inside an horizontal ScrollView

[sghiassy]

The same issue is posted here as well: https://github.com/facebook/react-native/issues/41

[felixakiragreen]

:+1:

[jasonmerino]

I'm getting this issue when nesting a TextInput inside a ListView. When scrolling most of the time I don't get the warning, but when I start the scroll with the pointer (this is in the simulator, haven't tried on device yet) on the TextInput it gives me the warning.

[Joshuabaker2]

I am also seeing this issue. I have a custom 'swipe to delete' for the rows which has a horizontal swipe inside a vertical ListView. If I move up or down at all while this happens, it scrolls. Even with setting:

onPanResponderTerminationRequest: () => false

[ryanmcdermott]

I get this issue with a <ListView> inside a <ScrollView>

[patoroco]

one more here. I have two ListViews inside a Scroll (I'm using react-native-scrollable-tab-view component)

[xiekw2010]

@magicismight The jump reason is than you should set this automaticallyAdjustContentInsets={false}

[pengzekuan]

111

[pengzekuan]

when put a props dynamic in the scrollview it happend

[IlyasM]

+1

[nowaits]

+1

[chenxiaohu]

+1

[wuchu]

+1

[jadsonlourenco]

+1

[niftylettuce]

+1

[bitQ2019]

+1
It may because render a scrollview in another list/scroll view!
And textInput is actually scrollview indeed!
fix!

[iZaL]

:+1:

[adriansdev]

@Menq is right, if you drag a scrollview by press and drag within a multiline textInput then you get the error

[javache]

We can probably apply the fix in https://github.com/facebook/react-native/commit/67bf0f1a70aa6efc667a6fe4499ae7c2212332ff to scrollviews as well. If you have a test case for this, please try it and send a PR.

[jadsonlourenco]

@javache I have tested this PR few days ago, I think that solve this problem, but not: Warning: ScrollView doesn't take rejection well - scrolls anyway

[austin1030]

I tried many methods to have nested ScrollView and avoid warning message but I just can't seems to find a correct way. So, until there is one, I just decided to comment out where the warning message gets called in node_modules/react-native/Libraries/Components/ScrollResponder.js (v 0.17.0) line 203.

scrollResponderHandleResponderReject: function() {
    //warning(false, "ScrollView doesn't take rejection well - scrolls anyway");
},

[alex-gvozden]

I get this "ScrolView doesn't take rejection well" \
if I have TextInput inside ScrollView
with just Text it works

so, this is no warning
<View> <Text>Test</Text> </View>

this is with warning
<View> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text} /> </View>

[jblack10101]

+1

[brentvatne]

Can someone provide a repo where this happens for @javache? Just create a small example and put it up on Github. Thanks!

[jblack10101]

Sure, here you go: https://github.com/jblack10101/ReactNativeScrollviewWarning

[chirag04]

@brentvatne I was hit by this today. This happens when you have a parent ScrollView and TextInput inside scrollview.

When you try to scroll using the TextInput area, TextInput will rejectResponderTermination (https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L469). This will trigger the ScrollView warning.

Setting rejectResponderTermination to false removes the warning for me. Not sure about the side effects of this.

[john916zhang]

+1

[basketofsoftkittens]

+1

[joelcloralt]

I have a <ListView> inside a <ScrollView>, the warning goes away when I get rid of
contentInset={{bottom:49}} from my <ListView>

Basically this:
<ListView dataSource={this.state.dataSource} renderRow={this._renderRow} style={styles.listView} renderSectionHeader={this._sectionHeader} automaticallyAdjustContentInsets={false} /> No warnings

Vs, this:
<ListView dataSource={this.state.dataSource} renderRow={this._renderRow} style={styles.listView} renderSectionHeader={this._sectionHeader} automaticallyAdjustContentInsets={false} contentInset={{bottom:49}}/> Warnings

[dangnelson]

+1

[gre]

I've created a product pain: https://productpains.com/post/react-native/scrollview-warning-scrollview-doesnt-take-rejection-well-scrolls-anyway/
( please upvote it as I think it's a pain for RN team to track these +1s )

[christiansaiki]

+1

[swain]

+1

[ericraio]

+1

[jedt]

Setting rejectResponderTermination to false removes the warning for me. Not sure about the side effects of this.

@chirag04's solution works for me.

[jorilallo]

I'm getting this when scrolling vertically a ListView that's inside an horizontal ScrollView

I have similar setup to @eljago's and experiencing this issue as well. Happy to provide an example if needed.

[olofd]

Any progress on this? Tried to look into it myself but could not find the root of the issue.

[deresegetachew]

+1

[lukas1994]

+1

[genxstylez]

+1

[ErikUggeldahl]

+1

[kwokster10]

I'm also getting this error along with failed to get size for image when I have a Text in View in a Scrollview with Lightbox like so:

<View  style={styles.view}>
  <Text style={styles.title}></Text>
  <ScrollView style={styles.container} contentContainerStyle={styles.content}>
     <Lightbox.Image
          underlayColor="white"
          resizeMode="contain"
          lightboxResizeMode="none"
          navigator={this.props.navigator}
          style={styles.contain}
          maximumZoomScale={3}
          source={MAP.image}
      />
  </ScrollView>
</View>

I also tried setting automaticallyAdjustContentInsets={false} and rejectResponderTermination={false} in the View with the same error.

[Richard-Cao]

+1
automaticallyAdjustContentInsets={false} not working
I get the same error

[jbrodriguez]

I've hit this error using the latest native RefreshControl and react-native-scrollable-tab-view.
It's happening on 0.19 (0.18 as well)

[sonu27]

+1

[jgibbons]

+1

[lrettig]

+1
for a form with textinputs inside a scroll view

[slavik0329]

+1 with Textinputs inside scrollview

[gr4yscale]

+1 with Textinputs inside scrollview

[Taakn]

+1

[robin22333]

+1

[eltonlivera]

+1 with Textinputs inside scrollview

[rops]

+1

[adriansdev]

dont think we need any more +1s

[tpisto]

+1 with TextInputs inside ScrollView

[manask88]

+1

[danpe]

+1

[tehong]

+1 with TextInput and ListView inside the ListView

[alejomendoza]

https://github.com/skyhitz/mobile/blob/master/app/sk-top.ios.js @brentvatne I'm using react-native-scrollable-tab-view

[robin22333]

@alejomendoza https://github.com/brentvatne/react-native-scrollable-tab-view/pull/174

[lefnire]

See #2125, #41; reworded warning of Warning: A View is trying to become touch responder, but ScrollView will still respond to the touch (See #41)

[lrettig]

This even happens inside the UIExplorer example!

[lrettig]

After struggling with this for many many hours, I want to post my workaround here in case it's useful for anyone else. This issue still persists in 0.20.0 for sure. Here's what I was trying to accomplish:

• I have form views with multiple TextInput fields that need to support devices sizes from iPhone 4 up to 6+.
• When there is too much content to fit in the view, I want to put it behind a ScrollView so the user can still access all of it.
• I want the user to be able to move from one TextInput to another with a single tap
• I want the user to be able to dismiss the keyboard with a single tap.

I tried every permutation of views, scroll views, touchables, and textinputs and after a ton of trial and error, here's what I've settled on, which seems to be working well:

  <View style={{flex: 1}}>
    <ScrollView keyboardShouldPersistTaps={true}>
      <TouchableWithoutFeedback onPress={dismissKeyboard}>
        <View style={{flex: 1, padding: 10}}>
          {form goes here}
        </View>
      </TouchableWithoutFeedback>
    </ScrollView>
  </View>

Setting keyboardShouldPersistTaps fixes the issue where tapping from one textinput to another on a scrollview causes the keyboard to dismiss. The ScrollView doesn't take rejection well warning still appears but I'm ignoring it.

(Getting the scroll view content size to fit correctly across devices was an even harder nightmare, but I'll leave out those details unless someone asks for them.)

[YashYash]

+1

I have been getting this issue as well. I am using:

https://github.com/brentvatne/react-native-scrollable-tab-view

I have 3 tabs, each with it's own ScrollView. Each of those ScrollViews calls onScroll. It is strange that even when the user stops scrolling, the onScroll method is continuously called. The solutions above help hide the warning message, but the issue still exists.

[xushuwei202]

There is the same issue to listview,
please pay attention to this;

[tofrookie]

+1

[jalliance]

+1

[brennanerbz]

+1

[kristian-puccio]

can we lock this issue? I get exited every time I see this in my inbox only
to be disappointed by a +1.

On 3 March 2016 at 10:36, brennanerbz [email protected] wrote:

+1

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/1501#issuecomment-191493816
.

[olofd]

+1 On inbox excitement! :)

[mkonicek]

can we lock this issue? I get exited every time I see this in my inbox only
to be disappointed by a +1.

That's why it's better to use Product Pains where people can vote and the most important issues get surfaced. You can login with GitHub so it's quite little overhead: https://productpains.com/product/react-native/?tab=top

[bcalik]

Wow. This issue is a year old, and still has no progress.
I do not get this warning on Android, but I get it on iOS for the same code.

[alexprice1]

I don't want to add noise here, but I noticed I am seeing this issue on iOS if I have a Picker inside the ScrollView. I am guessing this is an issue with there being a scrollable component within this scrollView

[noneven]

+1 and it's not just the warning. If you have a form rendered in a ScrollView, then when you try to move from one TextInput to the next by tapping, the warning fires, and the next field doesn't get focus. You have to tap twice. It makes forms very annoying to use.

[tbolt]

+1

[hvsy]

+1

[hehex9]

+1

[yimiaodaren]

+1

[cemolcay]

+1

[Xwoder]

I notice that, if you put a ScorllView/TextInput in another ScrollVIew, the warning will appear.

[d-johan]

+1

[Rusya13]

+1

[rilyu]

+1

[yury-sannikov]

+1

[gre]

hey.
Please stop commenting "+1".

github have a :+1: feature now, just upvote the first issue message. that way, issues can be sorted by :+1:

and if you just want to receive notifications of this issue, there is a Subscribe button on the right too

Thanks

[baloo]

@gre +1

[mkonicek]

Hey guys, I've just removed the warning :) Context: https://github.com/facebook/react-native/commit/5f77f15bac82c7a13605fdbd1ee7e2823c1821bf

Lots of people report something similar to this:

I get this warning randomly even without nested ScrollViews. No clue what it means.

I completely agree and don't think the warning is very useful. I'm closing this issue (the warning won't show up anymore in 0.24 and above).

Regarding the second part of the issue description:

and sometimes the ScrollView inside will jump to the top or bottom

Please report that separately (with a video!) and ideally send a pull request with a fix.

[mkonicek]

To clarify, here's what the warning actually means. You can see I manage to scroll the ScrollView even when dragging the slider:
https://vid.me/t5hY

This only happens on iOS and someone should fix that. But the warning pops up in many normal cases too, like when flinging the slider vertically. In this case scrolling is good but the warning still pops up.

It's not clear to me whether this GitHub issue was about the warning itself or about the ScrollView not taking rejection well. The warning was not actionable and it is gone now, let's discuss the ScrollView not taking rejection well separately (ideally someone with iOS knowledge could send a pull request with a fix).

[GantMan]

Do you think it's wise to do this to scrollview? People won't understand.

...poor poor scrollview

[Emilios1995]

@mkonicek Thanks, but did your commit get merged? I'm still getting the warning in 0.24

[grayboxpdx]

@mkonicek Same here, I'm still getting the warning in 0.24.1

[creeperyang]

@chirag04 not work. More details?