React-native: 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

[rabingaire]

I also have the same issue !!! Please fix this fast.

[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 https://github.com/facebook/react-native/commit/1b71e03932f44e212b297b2c1e02100b6de74b93 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!

[cleandersonlobo]

Same issue.

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

"react-native": "^0.50.3"

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

[MedericPixium]

Same issue on
"react-native": "^0.50.3"
using a horizontal Scrollview for my carousel

[light-fury]

Any updates with this issue?

I really need it to be done asap.

[chrispaynter]

I'm also having this issue. There is a modal on the same page that is triggered by a button. If I open the modal and then close it, the Unsupported top level event type "topScrollBeginDrag" dispatched no longer appears and my caurosel works as expected.

[lee-d]

We as well experience the same error with v0.50.2. We implemented a pageable horizontal ScrollView. iOS-Simulator works fine. Only Android-Simulator breaks on interaction.

Update:
I forgot to mention that we are using Storybook to get a Preview of our Components. When creating the StorybookUI we set the onDeviceUI-flag to false because of a bug in a previous Storybook version.
The bug in Storybook was fixed and after activating onDeviceUI the bug does not occur anymore.

[MedericPixium]

@Sergeypt423 Agreed we are supposed to launch our app by the end of the month and it would be very nice to have it fixed by then T_T

[legion-zver]

Same issue. Use 0.50.3 version, and only on Android this problem (((

[nimamyscreen]

same issue
"react": "16.0.0",
"react-native": "0.50.3",

[pangpond]

me too with
"react": "16.0.0",
"react-native": "0.50.3",

[cleandersonlobo]

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

"react-native": "0.49.5",

[ddman]

me too with
"react": "16.0.0",
"react-native": "0.50.1",

[ide]

Just to set expectations, I am not aware of anyone looking into this issue. Having been in similar situations in the past, two things that have worked well to get unblocked are forking+fixing the issue locally and contracting an expert.

[rolignu2]

same issue

"react": "16.0.0",
"react-native": "0.50.3"

[bvaughn]

Just to set expectations, I am not aware of anyone looking into this issue.

This is mostly true. Dmitry and I have talked about it a few times but neither of us have had time to look into it yet. It's on my wish list for things I'd like to find time to do but I don't know when that will happen yet.

If someone in the community has bandwidth to look into it - that would be ideal.

[ifsnow]

@bvaughn @ide

I have found the cause of error in [email protected] and how to fix it. However, I realized that there was no problem in current master branch, so I think it doesn't make sense to solve the issue in 0.50.3 branch.

current status

• ReactNativeRenderer-dev.js : no problem (master)
• ReactNativeFiber-dev.js : error (v0.50.3)

the cause of error

Horizontal scrollview uses AndroidHorizontalScrollView instead of RCTScrollView. The problem is that AndroidHorizontalScrollView does not register custom direct events (topScroll, topScrollBeginDrag, ...).

The events should be registered during the initialization of the three modules(RCTScrollView,
AndroidHorizontalScrollView, AndroidHorizontalScrollContentView), but it seems to be a problem.

Adding the following code to ReactHorizontalScrollViewManager solves the problem.

@Override
public @Nullable Map getExportedCustomDirectEventTypeConstants() {
  return createExportedCustomDirectEventTypeConstants();
}

public static Map createExportedCustomDirectEventTypeConstants() {
  return MapBuilder.builder()
    .put(ScrollEventType.SCROLL.getJSEventName(), MapBuilder.of("registrationName", "onScroll"))
    .put(ScrollEventType.BEGIN_DRAG.getJSEventName(), MapBuilder.of("registrationName", "onScrollBeginDrag"))
    .put(ScrollEventType.END_DRAG.getJSEventName(), MapBuilder.of("registrationName", "onScrollEndDrag"))
    .put(ScrollEventType.MOMENTUM_BEGIN.getJSEventName(), MapBuilder.of("registrationName", "onMomentumScrollBegin"))
    .put(ScrollEventType.MOMENTUM_END.getJSEventName(), MapBuilder.of("registrationName", "onMomentumScrollEnd"))
    .build();
}

I think it is necessary to improve the initialization part of ScrollView. I will work on this later.

I hope this helps.

[MedericPixium]

@ifsnow I have modified the file in my node module however the error remains. do I have to recompile from the src?

[ifsnow]

@MedericPixium Check out this manual first.

[bvaughn]

Thanks for digging into this issue and sharing your findings, @ifsnow ❤️

I'm still concerned that it addresses a symptom without understanding the underlying cause though. As I mentioned in a previous comment, events like "_topScroll_", "_topScrollBeginDrag_", etc. are actually _supposed_ to be available for all view manager types by default because of how this code works.

Maybe I'm misunderstanding your comment?

[bvaughn]

I just ran the open-source RNTester app on Android but was unable to reproduce the error being reported. I ran it from both master and the 0.50-stable branch (where 0.53 was released from). Adding this to the fact that internally (at Facebook) we aren't seeing this problem- and I'm not sure of how best the proceed.

[K-Leon]

Well i think there’s really something off. I‘m seeing this one very often:

Unsupported top level event type "topTouchStart" dispatched Unsupported top level event type "topTouchStart" dispatched

I believe it‘s not so specific to ScrollView, but more related to a behavioral change of the validation / Check Code (maybe with React 16 or an assert that didn“t fire before?)

[ifsnow]

@bvaughn I also wonder why suddenly there is a problem. Unfortunately, at least in my environment, errors still occur. I looked a little bit further and hope it helps.

Below is the process I understood.

1. Creates native component using requireNativeComponent, then createReactNativeComponentClass is called internally.
   https://github.com/facebook/react-native/blob/v0.50.3/Libraries/ReactNative/requireNativeComponent.js#L196

2. View’s config is saved in internal map to load lazy.
   https://github.com/facebook/react-native/blob/v0.50.3/Libraries/Renderer/ReactNativeFiber-dev.js#L2966

3. View is created and is registered events when creating instance. (createInstance)
   https://github.com/facebook/react-native/blob/v0.50.3/Libraries/Renderer/ReactNativeFiber-dev.js#L3054

Take a closer look

• Sample code that causes the problem.

render() {
  return (
    <ScrollView horizontal>
      <View style={styles.dummy}></View>
    </ScrollView>
  );
}

• The process of creating views
• createReactNativeComponentClass : RCView
• createReactNativeComponentClass : RCTImageView
• createReactNativeComponentClass : RCTTextInlineImage
• createReactNativeComponentClass : RCTScrollView
• createReactNativeComponentClass : AndroidHorizontalScrollView
• createReactNativeComponentClass : AndroidHorizontalScrollContentView
• createInstance : RCView
  7-1. call getViewConfig() of createReactNativeComponentClass
  7-2. try to register default event types, but UIManager.ViewManagerNames is undefined, so the default events are not registered.
  https://github.com/facebook/react-native/blob/v0.50.3/Libraries/ReactNative/requireNativeComponent.js#L62
• createInstance : AndroidHorizontalScrollContentView
• createInstance : AndroidHorizontalScrollView

RCTScrollView is not called because it is not created. It has override method to register events(topScroll,...).

Why UIManager.ViewManagerNames is undefined seems to be a clue to solving.

[bvaughn]

7-2. try to register default event types, but UIManager.ViewManagerNames is undefined, so the default events are not registered.

Ooh! Thanks @ifsnow! That could be useful info. Let me chat with Dmitry about it.

[comfly]

The default event types should be registered in case UIManager.ViewManagerNames is undefined. The else clause there merges in events from a ViewManager and UIManager.genericBubblingEventTypes/genericDirectEventTypes which are default and exported with UIManagerModule creation.

[ifsnow]

@bvaughn @comfly That’s right. What you say is an important part. I think I found a clue to solving this mystery.

There are no 5 events(topScroll, …) in getDirectEventTypeConstants of 0.50.3 branch.

0.50.3 branch

https://github.com/facebook/react-native/blob/v0.50.3/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java#L83

master branch

https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java#L78

[bvaughn]

Ooh snap! So the native code is trailing behind in this branch!

We added those events types _after_ (ca834f9) when we realized that several viewmanagers didn't explicitly define them.

The code for UIManagerModuleConstants in master looks right, but the code in 0.50-stable is missing a few event types. Fortunately the version in 0.51-stable also looks correct.

Thanks @ifsnow!

[bvaughn]

cc @grabbou Can we get that change (ca834f9) cherry-picked into the 0.50 branch and released as 0.50.4?

[grabbou]

Going to do that right now.

[kelset]

Just tested 0.50.4 and the error is no more.

Thanks @bvaughn & @grabbou !

[asgvard]

Perfect, Thanks! Funny thing that I've just encountered this issue for the first time like 30 minutes ago, googled for this issue, and saw that the fix version is going to be released pretty much now hahah :)

[mc-tracker]

could anyone please explain this case?In react-native 0.54

[Amurmurmur]

@mc-tracker Reset cache.
Please run:

npm start -- --reset-cache

[mc-tracker]

@Amurmurmur rebuild apk resolved it , thanks anyways

[MedericPixium]

Thank you, updated to 0.54 and fixed it

[K-Leon]

@bvaughn Thank‘s for this fix! But it seems something is still off on a different place: i‘m seeing this issue with topTouchStart

[bvaughn]

@K-Leon "_topTouchStart_" (TouchEventType.START) is specified as one of the default bubbling event types. This means it should always be mixed in, by one of the following code paths:

Are views are being lazy-loaded?

• Yes:
  requireNativeComponent >
  UIManager.getDefaultEventTypes >
  UIManagerModuleConstantsHelper.getDefaultExportableEventTypes >
  UIManagerModuleConstants.getBubblingEventTypeConstants

• No:
  requireNativeComponent >
  UIManager.genericBubblingEventTypes >
  UIManagerModuleConstants.getBubblingEventTypeConstants

Quickly spot-checking the v0.50.4 branch, all of the above codepaths seem to be in-sync with master.

[bvaughn]

Did you try resetting cache (as specified above)?

npm start -- --reset-cache

[meinto]

Yea version v0.50.4 fixed the issue :+1:

In my case to get it work, i had to remove to android/app/build folder first to remove already built apks.

[hssrrw]

I've just started a new project with React Native 0.50.4. I see the error on iOS every time pressing Back button in toolbar or performing swipe-back gesture in NavigatorIOS component.

Can I fix this the way it fixed in Android? Can't find the place with UIManager constants in iOS sources though.

[bvaughn]

I'm not very familiar with the native iOS code. But it looks like RCTComponentData.m gathers native events and exposes them to RCTUIManager.m which passes on to JS. I added some logging to requireNativeComponent just to double check the event types it gets, and it shows that RCTScrollView specifies topScroll as one of its directEventTypes. Seems like it should work fine?

[Narutuffy]

If someone is facing the same problem in expo, try updating expo SDK to 23 and the expo app too. I didn't update the app and lost a lot of time on that.

[K-Leon]

@bvaughn I'm still seeing it on android - event after cache clear. I can only reproduce it on android in production - i've still no idea where it is triggered. Even though this crash is new and currently the most "popular".

[nhoxbypass]

still happen in RN 0.51

[4thjuly]

My app was working fine until I updated to Expo 2.2.0 on my phone and now I get this error

[marc9000]

Still happening for 0.51.0. Confirming that moving to ^0.49.5 does the trick.

It seems like it's for all sorts of components, e.g. happened to TouchableOpacity for me.

[dcu-sharepoint]

@ifsnow; now that you can @override whatever function you're overriding, what do the rest of us mere mortals do to fix our issue the with the red horror screen from an app update. In my case, all I did was add a StatusBar component without any code yet!.... go figure, add one problem, get may problems back.... as usual, an app update that shows up as an error for the rest of us.....

[ifsnow]

@marc9000 @dcu-sharepoint @nhoxbypass I don't get any more errors in RB 0.51.
Could you show me the code that caused the problem? or Try the code below in your new project.

In my case, It works well in RB 0.51(Android 6.0)

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="blue"
          barStyle="light-content"
        />

        <TouchableOpacity>
          <Text>Click</Text>
        </TouchableOpacity>

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

[meurling]

Hi! I use RN --V0.51 and get the same error with the following code:
I only get the error however, when I am pressing down the TouchableOpacity object and drag it in the scrollview. When I am only touching the background of the scrollview and drag, everything works fine!
Please help! :)

<View>
                <ScrollView 
                    horizontal={true}
                    style={{marginBottom: 3}}
                    showsHorizontalScrollIndicator={false}
                >
                    <View style={styles.circleMargin} >
                    <Text style={styles.categoryText}> Drinks </Text>
                        <TouchableOpacity onPress={() => setCategory("drinks", selectedCategory)} >
                            <View style={styles.circle} >
                                <Entypo 
                                    name="drink" 
                                    size={categorySize} 
                                    color={ (selectedCategory === "drinks") ? selectedColor : iconColor} 
                                    style={styles.categoryIcon} />
                            </View>
                        </TouchableOpacity>
                    </View>
                 </ScrollView>
            </View>

[cyphire]

Is my issue related to this? I am in 0.51 and when I build an app for production I get a crash on startup (my first screen has a ScrollView with no parameters).

I traced the error to: Subscribable.js:

the this.subscribableSubscriptions is null, and it shouldn't be. That is why the crash comes on the ForEach.

Here is the current code...

  componentWillUnmount: function() {
      this._subscribableSubscriptions.forEach(
      (subscription) => subscription.remove()
    );
     this._subscribableSubscriptions = null;
  },

When I modify the code to this, the crash goes away...

componentWillUnmount: function() {
  console.log(`Subscribable - error location? ${this._subscribableSubscriptions}`)  
  if (false) {
    this._subscribableSubscriptions.forEach(
      (subscription) => subscription.remove()
    );
  }
    this._subscribableSubscriptions = null;
  },

What do you think?

[avshenuk]

@cyphire The same problem here. Release app without any big changes from my side started to throw the same error:

ReactNative: TypeError: undefined is not an object (evaluating 

'this._subscribableSubscriptions.forEach')

This error is located at:
  in ScrollView
in t
in t
in RCTView
in r
in Connect(r)
in RCTView
in a
in n
in t
in RCTView
in RCTView
in t, stack:
componentWillUnmount@210:183
<unknown>@153:2884
<unknown>@41:51861
mountClassInstance@41:51916
<unknown>@41:58934
beginWork@41:58969
q@41:88677
ee@41:89278
ne@41:90352
ue@41:92806
ae@41:92107
enqueueSetState@41:25532
setState@48:846
onStateChange@303:5122

[avshenuk]

Decreased the version of React native to 0.49.5 and it works now.
@cyphire Do you think we should create an issue ?

[dody87]

I'm using NavigatorIOS and also I had the same problem when it goes back.

In order to fix it, i added the code below into my screen component. The error has been changed for a warning, but it works.

class Principal extends Component { static propTypes = { title: PropTypes.string.isRequired }...

[cyphire]

I have created an issue:

https://github.com/facebook/react-native/issues/17358

Just to note, I just created a (uses ScrollView as it's base) in a brand new app and it had same behavior. Nothing to do with Events, keyboard, etc.

[avshenuk]

Thanks Brian. Actually there is already an issue:
https://github.com/facebook/react-native/issues/17348

On Tue, Dec 26, 2017 at 11:40 PM Brian B. Canin [e-mail]
wrote:

I have created an issue:

17358 https://github.com/facebook/react-native/issues/17358

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/16522#issuecomment-354015888,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEXdyPUvNfaSDOJ4af5SIaeteZtz3-jVks5tEWfJgaJpZM4QEhWw
.

[cyphire]

Closed my issue for the other one.

---

Brian B. Canin brian.[email protected]

858-945-5601 (cell)

On Tue, Dec 26, 2017 at 5:13 PM, avshenuk [e-mail] wrote:

Thanks Brian. Actually there is already an issue:
https://github.com/facebook/react-native/issues/17348

On Tue, Dec 26, 2017 at 11:40 PM Brian B. Canin [e-mail]
wrote:

I have created an issue:

17358 https://github.com/facebook/react-native/issues/17358

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
issuecomment-354015888>,
or mute the thread
AEXdyPUvNfaSDOJ4af5SIaeteZtz3-jVks5tEWfJgaJpZM4QEhWw>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/16522#issuecomment-354018586,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAUnhm6Ls_T-lv4nG4ZOQ2FCh61-14UXks5tEW-RgaJpZM4QEhWw
.

[otoinsa]

I have the same issue, using NavigatorIOS and pressing back button/swiping back to previous view. On dev builds works fine, however on production builds it just outright crashes. In my case there are no scroll views involved, just some View's with 1 image between them.

The funny thing is, when I use ScrollView component, not View, all is fine.

I'm on 0.51 and would really like to get rid of this nasty bug,
come to think of it - how come no one noticed it and released another React Native version?
Each update makes React Native a little better and generally worse in reliability regard :D FML, I use this in production ;(

[smhmayboudi]

I am a new bee worker and I follow these instruction:

1. create-react-native-app testApp
2. cd testApp
3. yarn upgrade
4. [I copy the last sample code at https://facebook.github.io/react-native/docs/navigation.html to app.js]
5. yarn start
6. start Expo app on iOS
7. scan the barcode
8. I got RDS (RED DEAD SCREEN) !?

[peterlevel1]

a magic tour for this bug

device: macbook pro 2015

system: sierra 10.12.6

react-native: 0.51.0

platform: IOS App

simulator:

also meet the bug which the same to the title: Unsupported top level event "topScroll" .
Now I am gonna tell you a tale about what I met today !

when I met the bug this afternoon, I do the search work: Unsupported top level event "topScroll" ,
and I came here to see you guys talking about this issue, I saw some guy said [email protected] would fix this problem, so: yarn remove react-native --save && yarn add [email protected] --save, and it just can not downloaded, so I changed the tool to be cnpm: cnpm i [email protected], and it was downloaded. I met depressions when react-native run-ios building the package, so I run: cnpm remove react-native --save. I like react-native, so it can not stop my steps,
I planned to do some fallbacks that I just do not click the back button on the simulator until facebook engineers handle this bug. so I run: yarn add react-native --save(NOTICE: I do not enter the version, it would be the latest !).

what I only want is just back to the prev page, the codes cause that the back button of the navigator can not be tapped.

```javascript:
class SecondScene extends Component {

onPressPrev = () => {
this.props.navigator.pop();
}

render() {
return (
SecondScene! haha!

so what r u gonna do ?





);
}
}
```

then, you enter the next page, and when you click the back button, you would receive these codes if you do that:

Unsupported top level event "topScroll" dispatched.

[mjugger]

I updated to 0.50.4 and ran npm start-- --reset-cache, but I still get the topScrollBeginDrag issue.
I'm on android and my dependencies are as follows:
"dependencies": { "d3-array": "^1.2.1", "d3-scale": "^1.0.7", "d3-shape": "^1.2.0", "expo": "23.0.4", "intl": "^1.2.5", "native-base": "^2.3.6", "prop-types": "^15.6.0", "react": "16.0.0", "react-native": "0.50.4", "react-native-easy-grid": "^0.1.15", "react-native-slider": "^0.11.0", "react-native-vector-icons": "^4.4.2", "react-navigation": "^1.0.0-beta.21", "react-redux": "^5.0.6", "redux": "^3.7.2", "redux-saga": "^0.16.0" }

I'm experiencing this with the react-native scrollview and with the naiveBase tab component

[anoopmundathan]

Same error for me as well while running on andriod 7.0 . Here is my package.json

"dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "0.50.4",
    "react-native-elements": "0.19.0",
    "react-navigation": "1.0.0-beta.23",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0"
  }

render function looks as below

render() {
    return(
      <ScrollView
        horizontal
        pagingEnabled
        style={{flex: 1}}>
        {this.renderSlides()}
      </ScrollView>
    )
  }

[njho]

It appears that removing

keyExtractor={(item, index) => index}

removes this error. Obviously not the ideal solution however.

[mjugger]

@njho
do you mean digging into the code base for nativebase components to remove that from an effected component?

[njho]

No I mean just in the props for ScrollView @mjugger

[hugtrueme]

Hey guys, you can try to follow this instruction ( https://facebook.github.io/react-native/docs/upgrading.html ) to set your project to 0.49.5, then this error will disappear.

Remember, let your version number are match each other. (https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md)

After change the version number, run 'npm install' on command line in your project directory.

my package.json:

{
"name": "WorkoutJournal",
"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": "22.0.0",
"react": "16.0.0-beta.5",
"react-native": "0.49.5",
"react-navigation": "^1.1.2"
}
}

my app.json

{
"expo": {
"sdkVersion": "22.0.0"
}
}

Please note this table, use right version for all.

react-native | react | expo | sdkVersion in app.json |
0.46.x | 16.0.0-alpha.12 | 19.x.x | "19.0.0" |
0.47.x | 16.0.0-alpha.12 | 20.x.x | "20.0.0" |
0.48.x | 16.0.0-alpha.12 | 21.x.x | "21.0.0" |
0.49.x | 16.0.0-beta.5 | 22.x.x | "22.0.0" | <--- you need use this line
0.50.x | 16.0.0 | 23.x.x | "23.0.0" |
0.51.x | 16.0.0 | 24.x.x | "24.0.0" |
0.52.x | 16.2.0 | 25.x.x | "25.0.0" |
(the table is from https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md)

[oonxt]

same error for me...
and works after set my project to 0.49.5.
but, some other packages got error, SafeAreaView undefined .

[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.

[hugtrueme]

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

https://github.com/facebook/react-native/issues/16522#issuecomment-368242086

[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.

[gregbenner]

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.

[elbsurfer]

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