ScrollView: Unsupported top level event "topScroll" dispatched

[znacloud]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.4.0
npm: 5.3.0
Watchman: 4.7.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react-native: 0.50.0.rc1
react: 16.0.0

Target Platform: Android (8.0.0)

Steps to Reproduce

1. launch a scrollview page which has two Image as child
2. scroll this page
   3.show red box: Unsupported top level event "topScroll" dispatched

[hramos]

Can you reproduce the issue using Snack? This step is necessary for people to be able to see and debug the issue being reported.

[znacloud]

Sorry, the target platform should be Android(8.0.0)

[znacloud]

@hramos Sorry, I'm not familiar with Snack。Here is exception stack:

Unsupported top level event type "topScroll" dispatched
extractEvents
ReactNativeFiber-dev.js:3519:22
extractEvents
ReactNativeFiber-dev.js:3298:71
handleTopLevel
ReactNativeFiber-dev.js:3539:64

ReactNativeFiber-dev.js:3560:55
batchedUpdates
ReactNativeFiber-dev.js:2754:26
batchedUpdates
ReactNativeFiber-dev.js:202:35
batchedUpdatesWithControlledComponents
ReactNativeFiber-dev.js:209:34
_receiveRootNodeIDEvent
ReactNativeFiber-dev.js:3559:50
receiveEvent
ReactNativeFiber-dev.js:3564:60
__callFunction
MessageQueue.js:302:47

MessageQueue.js:116:26
__guard
MessageQueue.js:265:6
callFunctionReturnFlushedQueue
MessageQueue.js:115:17

when I remove key props from Image tag which is child of ScollView, this error dispears and show a WARNING instead.

Warning: Each child in a array or iterator should have unique "key" prop

[ifsnow]

@hramos I am having the same problem. I think horizontal scrollview has a trouble in all cases.
It works well on [email protected], but this error has occurred since version [email protected]

The following simple code also causes an error when scrolling. tested on API 23(Android 6.0) and 24(Android 7.0).

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ScrollView
} from 'react-native';

export default class ScrollViewTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal>
          <View style={styles.dummy}></View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  dummy: {
    flex: 1,
    width: 1000,
    height: 400,
    backgroundColor: 'red'
  }
});

[codeYDH]

@hramos I am having the same problem.

[kelset]

Same issue here, tested on Android 7.1.2 and got this error for multiple events:

Unsupported top level event type "topScrollBeginDrag" dispatched
Unsupported top level event type "topScroll" dispatched
Unsupported top level event type "topScrollEndDrag" dispatched
Unsupported top level event type "topMomentumScrollBegin" dispatched
Unsupported top level event type "topScroll" dispatched
Unsupported top level event type "topMomentumScrollEnd" dispatched

@hramos I don't think it's replicable with Snack because it's related to RN 0.50

[bvaughn]

I believe this is related to changes on the native (UIManager) side and should be resolved with commit fdf0495.

The underlying cause was due to the way UIManager previously registered "default" event types. It was assumed that the first view manager to be loaded via requireNativeComponent would get the default events mixed in with its view-specific events. Unfortunately it turned out that in some cases, code referenced a view manager via UIManager.* before (or outside of) the first requireNativeComponent call, causing default event-types like "topScroll" to be lost.

The fix (fdf0495) was to refactor the native and JS code to explicitly request default event types.

[Kottidev]

@hramos we need to fix it quickly , many apps use ScrollView with horizontal=true

[ide]

Cherry-picked 1b71e03 into 0.50.2, which is now on npm.

[amirkheirabadi73]

I still have this problem into 0.50.2

[awnali]

i also faced same issue and then changed the react-native version from 0.50 to 0.49.* and everything works.

[PetrVasilev]

Yes! I also have this very bad problem, which killed my app

[kelset]

EDIT: actually I still have the issue, probably I didn't properly re-tested until today.

[Omniwheel]

Still having the issue in 0.50.3.

[donnes]

Here too, upgrading to 0.50.3 don't solved the problem for me.

[rambabusaravanan]

I'm also facing the same error "unsupported top level event type "topScroll" dispatched" when using scrollEnabled: true for TabNavigator in react-navigation which internally is a ScrollView

This error occurs in latest [email protected] but works fine in [email protected] (which is expo's latest supported version). Hence no issues in snack / can't show demo in snack @hramos

[booleanBoy]

0.50.3 hasn't solved the problem for me either.

I'm also finding that while I can still work on the emulator (as long as I don't scroll) the signed APK I'm building crashes when run on a device. Has anyone else experience this or is it an unrelated problem?

Edit: Apparently the crash is related to 0.50 but is due to a bug in uglify, so unrelated to scrollview

[Rom96]

You can use ViewPagerAndroid instead of ScrollView but this works only with Android devices. ( I hope I helped you :/ )

[booleanBoy]

Thanks @Rom96, that's a great temporary workaround for me as I'm only working on Android 👍

[bvaughn]

Hi @booleanBoy / @rambabusaravanan / @donnes / @Omniwheel

I'm confused by the fact that you're still seeing this issue and I'd like to get a little more background on what you're doing.

Taking ScrollView and the "topScroll " event type as an example. ScrollView registers its native code using requireNativeComponent which mixes in a set of shared, default event types which - in this case - includes the "topScroll" event (among others). Provided you're accessing ScrollView from the react-native-implementation then I think this should just work.

Are you by chance loading the view some other way? eg directly accessing UIManager["ScrollView"]?

[Amurmurmur]

Same issue. with RN 0.50.3
Did not exist in RN 0.49.5

Only Android.

Unsupported top level event type "topScrollBeginDrag" dispatched
ExceptionsManager.js:65
Unsupported top level event type "topScroll" dispatched
ExceptionsManager.js:65
Unsupported top level event type "topScroll" dispatched
ExceptionsManager.js:65
Unsupported top level event type "topScrollEndDrag" dispatched
ExceptionsManager.js:65
Unsupported top level event type "topMomentumScrollBegin" dispatched
ExceptionsManager.js:65
Unsupported top level event type "topScroll" dispatched
ExceptionsManager.js:65
Unsupported top level event type "topMomentumScrollEnd" dispatched
ExceptionsManager.js:65

[bvaughn]

@Amurmurmur Please see my question above your comment.

[iCodePup]

Same issue using react-native 0.50.3 and
https://github.com/react-native-community/react-native-tab-view
With scrollEnabled true.
Problem does not appear with 0.49.3

[Amurmurmur]

@bvaughn I use FlatList the following way:

  render () {
    let items = this.props.children

    return (
      <FlatList
        style={styles.list}
        data={items}
        onMomentumScrollEnd={this.onScrollEnd}
        keyExtractor={(item) => items.indexOf(item)}
        pagingEnabled
        horizontal
        renderSeparator={() => null}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        directionalLockEnabled
        renderItem={this._renderItem} />
    )
  }

[shawngustaw]

I noticed this when fooling around with react-navigation (w/ RN 50.0.3). Can reproduce by doing a simple Tab Navigator and doing a press and hold + drag gesture on a Tab. It's pretty easy to setup (I can paste code if needed) so hopefully that helps with reproducing.

[ifsnow]

@bvaughn As I mentioned before, the following simple code still has an error when scrolling. tested on API 23(Android 6.0) and 24(Android 7.0).

I think horizontal scrollview has a trouble in all cases

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ScrollView
} from 'react-native';

export default class ScrollViewTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal>
          <View style={styles.dummy}></View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  dummy: {
    flex: 1,
    width: 1000,
    height: 400,
    backgroundColor: 'red'
  }
});

[mhemrg]

Same issue. I changed the react-native version in the package.json file and now it works fine:

"react-native": "^0.49.5"

[meurling]

I am getting this error when trying to drag up my bottom tabbar, which shouldn't result in anything happening at all!

[andersonaddo]

@hugtrueme How are you guys downgrading? I've been trying to downgrade to 0.49.5 form 0.54.0, but when I do the whole app fails to start on my Android emulator.
My package.json:
{ "name": "ssnitmobileapp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.0.0-beta.5", "react-native": "0.49.5", "react-native-elements": "1.0.0-beta2", "react-native-maps": "^0.20.1", "react-native-vector-icons": "^4.5.0" }, "devDependencies": { "babel-jest": "22.4.1", "babel-preset-react-native": "4.0.0", "jest": "22.4.2", "react-test-renderer": "16.0.0-beta.5" }, "jest": { "preset": "react-native" } }

[chikarao]

I'm working on a Expo-generated app and got the message message about unsupported top level event type. The the app started back up when I restarted the app on the Expo console.

[ghost]

@andersonaddo, sorry for late, i posted my package.son & app.son on here.

#16522 (comment)

[mtmcfarl]

I'm having this issue on react-native 0.52.0. Below is my package.json. The error occurs when I tap the back button.

{
  "name": "App",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.11.1",
    "jest-expo": "25.0.0",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^25.0.0",
    "react": "16.2.0",
    "react-native": "0.52.0"
  }
}

[grath10]

Same issue on react-native 0.54.0， appreciate any help or advice as to solve this headache!

[kingofglory]

After I added a

<ScrollView /> 

into layout , the problem solved!

[AliSarraf]

+1 I'm having the same issue - would greatly appreciate any help!

Is there any way of fixing this without having to downgrade to 0.49.5? Because I need to run at least 0.50.3 due to some other project dependencies

[hramos]

Reopening as I noticed people are claiming this is still an issue in v0.54.0 (current stable).

Let's limit new comments to those with information pertaining to v0.54.0. If you are not running v0.54.0 or newer, please abstain from commenting on the issue.

[pascalporedda]

@hramos what information do you need? As I'am experiencing this issue as well, in a really simple app. Downgrading to react-native version 0.49.5 worked fine, but in the latest 0.54.2 it was broken for me.

All I did was create an app with react-native init, remove the scaffolding done by init and outputted some text. I'am running the app on the iPhone 6 Simulator as well as on a Google Pixel emulator, both were causing the same problem.

[hramos]

@pascalporedda if your repro steps match the original post, then I don’t think an update is necessary, other than perhaps mentioning its present in 54.2. If you have additional information on how this can be reproduced, that would help.

Ideally, if someone digs deep into the root cause, that’s the sort of information that would be helpful in this thread.

If your repro steps do not match the original, then I would report it as a new, distinct issue.

[jswhisperer]

Still an issue with react native 0.54

[AliSarraf]

After upgrading to v0.54.0, this error didn't trigger any more - thanks @hramos! :)

To give some more context, I'm setting the horizontal prop to true in the ScrollView component, this specific error was triggering on Android before when I was running v0.50.3.

[wnr]

We still encounter this issue with 0.55.4. We created a new project with react-native init ExampleApp, and then added two simple screens for NavigatorIOS to navigate between. We get the Unsupported top level event "topScroll" dispatched when the back button of the navigator is clicked. If we wrap the screens with ScrollView it works.

[eroosenmaallen]

We are seeing this error in rect-native 0.55.4.
For us, removing the key prop from child views mostly did the trick, but it's hackish and triggers the missing key warning.
Even without the key prop, the error happens on Samsung Galaxy S8 devices (and looks like S9, S7, S6, S5, but not personally verified). On Samsung devices, it seems to happen only on Release-signed builds. 0.55.4 fixes the Samsung issue.

[torbentschechne]

Hello,
I use 0.56 and still see this issue on iOS. I am using NavigatorIOS - this issue is still not solved, is it?

[igrishaev]

So do I with NavigatorIOS. The red screen with the same error occurs when I go back to the previous view.

[clewiston]

I'm seeing this in react-native ^0.56.0. Is the workaround still to wrap the NavigationIOS component in a ScrollView?

[eliakorkmaz]

version: 0.57.1, when you popBack with using NavigationIOS, this error happens.

[eliakorkmaz]

If the bug cause from Navigation and your needs are urgent & want to accomplish not scrollable component, you can solve it with using ScrollView and disable its scroll with scrollEnabled='false' for a temporary a way of running from the error.

<ScrollView scrollEnabled='false'>
          <SafeAreaView>
            <View>
                <Text>Current Scene: {this.props.title}</Text>
                <Button
                    onPress={this._onForward}
                    title="Tap me to load the next scene"
                  />
            </View>
      </SafeAreaView>
      </ScrollView> 

[tapz]

Is the root cause the same for other this kind of errors? I get one with gestures with both react-navigation and my own code. Both iOS and Android. This is a show stopper, as the app does not work at all anymore.

"react": "16.8.6",
"react-native": "0.59.2",
"react-native-gesture-handler": "1.1.0",
"react-navigation": "3.5.1",