RCTScrollEvent: "UI API called from background thread"

[HeEAaD]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: 1000.0.0 (current master, 6dd9d16)
2. node -v: v8.1.3
3. npm -v: 5.0.3
4. yarn --version (if you use Yarn): 0.27.5

Then, specify:

• Target Platform: iOS

• Development Operating System: macOS

• Build tools: Xcode 9 beta 3

Steps to Reproduce

1. create a react native app with a ScollView
2. open the app in Xcode 9
3. scroll the scroll view
4. observe the runtime issues of Xcode 9

Expected Behavior

No runtime issues should occur.

Actual Behavior

The scrollView property of RCTScrollEvent is accessed, but not on the main thread:

Reproducible Demo

https://github.com/HeEAaD/Demo-ReactNative-UI-not-on-main-thread

1. yarn install
2. open ReactNativeUINotOnMainThread.xcodeproj with Xcode 9
3. run scheme ReactNativeUINotOnMainThread
4. wait until the app is launched in the simulator
5. scroll a bit in the app
6. observe the runtime issues in Xcode

Possible fix

RCTEventDispatcher calls -[RCTScrollEvent body] on a background thread. Therefore this method should not access its scroll view. We can initialize RCTScrollEvent with contentOffset, contentInset, contentSize, frame and zoomScale of the scroll view rather then the scroll view itself.