React-native-animatable: Slow animation on nested components

[julesmoretti]

I am probably not doing this right and so would love some pointers to help me identify how to improve performance:

When the Opacity transition gets triggered from the this.state.BooleanTouchTrigger state, the transition is not existant, it just jumps to the end result. But when I increasing the duration time of the color transition to 2000, the color fades down but very slowly and in steps (1 > 0.6 > 0.2 > 0).

Is this because nested Animatable is not recommended?

<Animatable.View
    transition='opacity'
    duration={500}
    easing='linear'
    style={this.state.BooleanTouchTrigger?
        [styles.someCustomStyle, { opacity: 0}]:
        [styles.someCustomStyle, { opacity: 1}]
    }>
    <Animatable.Text
        transition='color'
        duration={200}
        easing='linear'
        onPress={ () => this.setState({BooleanTouchTrigger: !this.state.BooleanTouchTrigger}) }
        style={this.state.someOtherNestedLogic?
            [styles.anotherCustomOne, styles.anotherCustomOneSelected]:
            [styles.anotherCustomOne, styles.anotherCustomOneDeselected]}
        >M</Animatable.Text>

[oblador]

Hi you could try natively driven animations with this PR: https://github.com/oblador/react-native-animatable/pull/67

[oblador]

Btw, the cause here is likely a heavy render function in your component(s) which will block JS thread.

[julesmoretti]

@oblador - thank you for responding so quickly and giving me some pointers.

How would you recommend for me to analyze render functions in order to optimize the JS thread.

So far all I saw was a monitor on the android phone I am using but this shows fps and those are in the 60fps so not showing thread performances. Additionally I am using react-native run-android which I assume is not as fast as a production build would be, but then again I am still to figure out how to run the production build on my android to test performances.

So anyways long story short. Would love some pointers on how to optimize block JS thread. :)

[udfalkso]

Are you using remote debugging via chrome? I've found in my app that sometimes this can cause extremely slow fade effects on android, but running native in emulator performs much better. (This was with pre 1.0)

[oblador]

@julesmoretti: That's a very big subject I'm afraid, but yeah you should always test performance on a physical device with a production build otherwise you might end up optimizing the wrong things. Native animation drivers should fix the JS thread block issues though (and they are released in 1.0.0).

[julesmoretti]

@udfalkso - I am indeed running it on a device with Remote debugging and Hot loading and those 2/3 combined severely reduce performances. It is not an ideal work flow dev mode > dissable everything > check UX > put back in dev mode > change things > dissable and on and on... lol

@oblador - Thank you very much I hear you and yeah agree probably a conversation better kept around a diner table or something lol :)

Thank you both though.

[oblador]

Here's a bit on the subject from the official docs: https://facebook.github.io/react-native/docs/performance.html