Unsupported top level event type "topScroll" dispatched

Question

I have a simple two page set up using the NavigatorIOS for an iOS app using React Native. After my app loads, I can click into the second page but when I click back (top left) then I get the following error:

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

<unknown>
ReactNativeFiber-dev.js:3560:55

batchedUpdates
ReactNativeFiber-dev.js:2754:26

batchedUpdatesWithControlledComponents
ReactNativeFiber-dev.js:209:34

_receiveRootNodeIDEvent
ReactNativeFiber-dev.js:3559:50

receiveEvent
ReactNativeFiber-dev.js:3564:60

__callFunction
MessageQueue.js:302:47

<unknown>
MessageQueue.js:116:26

__guard
MessageQueue.js:265:6

callFunctionReturnFlushedQueue
MessageQueue.js:115:17

The error occurs when running in the simulator and on the device (from xcode).

This is the code to my application. I'm sure I didn't initialize something correctly, I just don't seem to be able to find out what that is:

'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  Button,
  Text,
  View,
  NavigatorIOS
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scene: {
    padding: 10,
    paddingTop: 74,
    flex: 1,
  }
})

class PageFeedItem extends Component {
  render() {
    return(
      <View style={styles.scene}>
        <Text>Some text</Text>
      </View>
    );
  }
}

class PageFeed extends Component {
  constructor(props, context) {
    super(props, context);

    this.onShowFeedItem = this.onShowFeedItem.bind(this);
  }

  onShowFeedItem() {
    this.props.navigator.push({
      component: PageFeedItem,
      title: "Feed Item",
      passProps: {}
    });
  }

  render() {
    return(
      <View style={styles.scene}>
        <Text>Feeds</Text>
        <Button onPress={this.onShowFeedItem} title="Show Item"/>
      </View>
    );
  }
}

class Main extends Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          component: PageFeed,
          title: 'Home',
          passProps: {},
        }}
      />
    );
  }
}

export default Main;

UPDATE

Two things I have noticed since asking this question:

1) When the error occurs, by pressing ESC, the application seems to continue without problems.

2) Adding a Button to the second page and adding a handler to do a this.props.navigator.pop(); seems to work fine, i.e. doesn't resolve in an error.

Answer 1

i also faced same issue and then changed the react-native version from 0.50 to 0.49.* and everything works. its an known bug in latest version of react native

Answer 2

Wrap the screen with ScrollView.

render() {
    return (
      <ScrollView>
      <View>
        <Text>Test screen</Text>
      </View>
      </ScrollView>
     );
  }
}

Answer 3

Try to add this code in PageFeed class:

static propTypes = {
    title: PropTypes.string.isRequired,
    navigator: PropTypes.object.isRequired,
}