ScrollView: Unsupported top level event "topScroll" dispatched

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

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

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

Sorry, the target platform should be Android(8.0.0)

@hramos

@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

@hramos

@hramos I am having the same problem. I think horizontal scrollview has a trouble in all cases.
It works well on react-native@0.49.5, but this error has occurred since version react-native@0.50.0-rc.0

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'
  }
});

@hramos

@hramos I am having the same problem.

@hramos

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

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.

@hramos

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

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

I still have this problem into 0.50.2

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

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

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

Still having the issue in 0.50.3.

@hramos

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.

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.

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.

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

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

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

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

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>

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",

React sync for revisions 85d05b3...4eeee35

Navigation Menu

Repository navigation

ScrollView: Unsupported top level event "topScroll" dispatched #16522

Is this a bug report?

Have you read the Contributing Guidelines?

Environment

Steps to Reproduce

91 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ScrollView: Unsupported top level event "topScroll" dispatched #16522

Description

Is this a bug report?

Have you read the Contributing Guidelines?

Environment

Steps to Reproduce

Activity

hramos commented on Oct 24, 2017

znacloud commented on Oct 25, 2017

znacloud commented on Oct 25, 2017

ifsnow commented on Nov 6, 2017

codeYDH commented on Nov 6, 2017

kelset commented on Nov 6, 2017

rabingaire commented on Nov 6, 2017

bvaughn commented on Nov 6, 2017

Kottidev commented on Nov 7, 2017

ide commented on Nov 7, 2017

amirkheirabadi73 commented on Nov 8, 2017

awnali commented on Nov 8, 2017

PetrVasilev commented on Nov 9, 2017

kelset commented on Nov 10, 2017

Omniwheel commented on Nov 10, 2017

91 remaining items

AliSarraf commented on Apr 21, 2018

wnr commented on May 9, 2018

eroosenmaallen commented on Jun 28, 2018

torbentschechne commented on Aug 27, 2018

igrishaev commented on Sep 6, 2018

clewiston commented on Sep 26, 2018

eliakorkmaz commented on Dec 13, 2018

eliakorkmaz commented on Dec 13, 2018

tapz commented on Mar 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions