Animation transition not smooth

[butri71]

Hi,

I'm using react-navigation 5 on Expo with a floating tab layout

During the first couple of clicks the animation is not smooth, it looks like it moves a little bit, gets stuck and then completes the move the the other tab.

After the first few animation everything runs smoothly.

Is there any specific config that I can use like to modify ease, speed of transition or similar

Thanks

[Saff-Elli-Khan]

I'm also facing the same issue!

[torgeadelin]

Looking into trying to improve this in the upcoming future.

[butri71]

@torgeadelin any news on this? Thanks

[torgeadelin]

Hi,

I'm afraid I didn't have time to look into this. I'm planning to rewrite the animation logic and hopefully this will get fixed. Again, not sure how soon this will happen.

Sorry for the vague reply, but I don't want to estimate what I cannot measure.

[butri71]

Hi,

Understand, thanks for the reply!

[GuillaumeRZ]

Hey ! Any update on this ? Thank for your time ! :)

[suraj-ingle]

This seem to be a issue due tho the fact that JavaScript is single threaded. Here is an amazing explanation to how the animation is handled under the hood.

[dongdyang]

+1

[hraschan]

Facing the same issue

[hraschan]

@torgeadelin Is this repository still maintained somehow ?

[caglardurmus]

You can try 'useNativeDriver: true'.

Go to TabBarElement.js

Line 113:

    Animated.spring(val, {
      toValue: 1,
      useNativeDriver: true,
    });

Line 432:

style={{
                transform: [
                  {
                    translateX: animatedPos.interpolate({
                      inputRange: [0, 1],
                      outputRange: [prevPos, pos],
                    })
                  }
                ]
              }}

[butri71]

You can try 'useNativeDriver: true'.

Go to TabBarElement.js

Line 113:

    Animated.spring(val, {
      toValue: 1,
      useNativeDriver: true,
    });

Line 432:

style={{
                transform: [
                  {
                    translateX: animatedPos.interpolate({
                      inputRange: [0, 1],
                      outputRange: [prevPos, pos],
                    })
                  }
                ]
              }}

@torgeadelin has already replied above that useNativeDriver: true won't solve the issue. Has it worked for you?

[jonklein]

I'm seeing something similar - I suspect this is less about the tab bar animation itself, and more about the load/performance of the tabs being rendered for the first time with asset loading, etc.

[github-actions]

Stale issue message