Further improvements for RNW

There are a few places where I think the implementation could work better with RNW. The “web” implementation may be OK for React DOM apps, but since it doesn’t rely on RNW at all, it can’t provide related functionality like automatic RTL layout flipping. The “react-native” implementation on web pulls in Animated which can add to the bundle size and runs animations on the main thread. I noticed some helpful ScrollView props like scrollEnabled are not available either.

react-native implementation

DefaultJSItemAnimator

You could create a separate .web.js implementation that doesn’t import Animated and instead relies on CSS transitions (as the web implementation does).

Related question: I’m not sure why there is a web-specific fork in this code. Why is native getting passed left/top props rather than a style prop?

    private _getNativePropObject(x: number, y: number): object {
        const point = { left: x, top: y };
        return !IS_WEB ? point : { style: point };
    }

web implementation

The layout of the wrapping divs in some components doesn’t match RN, as they are not styled the same as the view flex containers.

ScrollViewer.tsx

Remove componentWillMount and replace componentWillReceiveProps with componentDidUpdate.

scrollTo can be smoother by relying on the browser’s built-in smooth scrolling, which RNW relies on in ScrollView.

You might also want to include a caveat about using RNW + window scrolling + Touchable items. The Touchables expect to be in ScrollView to correctly transfer the responder to the scroller as needed.

[naqvitalha]

Most of these are solved in v2. Closing.

[naqvitalha]

Eventually yes. First onLayout needs to be figured out to justify the performance cost. Anyways, the current implementation is working pretty well performance wise. Btw since everything is proxied through setNativeProps don’t you think you should try running it on a worker? Compute one frame early, I think the perf results will be amazing