[TouchableX] May conflict with UI thread

[ramroll]

I guess there is a problem in react native android's implementation. Maybe there is a thread sync. problem when sync the js-main thread with the android's UI thread.

I implemented a tabbar which implemented the same API as TarBarIOS.

The on press handler of TabbarItem is like this :

_press : function(tab) {
    this.setState({
        tab
    })
}

The setState function renew the entire tabbar. When I finished a problem occurs, ----in IOS the tabbar performance well, but in android there is 1-2s delay when I switch tab.

Follow the official document: https://facebook.github.io/react-native/docs/performance.html#content Sometimes, if we do an action in the same frame that we are adjusting the opacity or highlight of a component that is responding to a touch, we won't see that effect until after the onPress function has returned. If onPress does a setState that results in a lot of work and a few frames dropped, this may occur. A solution to this is to wrap any action inside of your onPress handler in requestAnimationFrame

Then I changed my code:

_press : function(tab) {
    requestAnimationFrame( () => {
        this.setState({
            tab
        })
    })    
}

The the problem solved..but I think this is only a temporary solution. Because when to use requestAnimationFrame is unpredictable and it's not elegant to use requestAnimationFrame anywhere.I guess there is a dead lock when react-native-android sync. send message to java module and wait signal. I'm reading react-native-android's source code, still unable to give a solution. I need help ...

[christopherdro]

Hey @ramroll! Closing this issue for now since it hasn't had any activity in a while.

Please feel free to re-open this issue if necessary or create a ticket on Product Pains so that other people can vote on it.

[duongtranpyco]

I had the same on Android, iOS was working really well. I checked JS fps and it was around 50 to 60 on iOS but on Android around 3 to 12.

Case: I draw a wave chart and use requestAnimationFrame to rerender the chart with new position(x, y). Version: 0.47.1