How to animate switching tabs using react navigation bottom tabs

Question

I need to make simple slide animation when switching tabs without sharp twitching and i also need to refresh the tab to get effect from updated state

I tried two ways

First:

1. added unmountOnBlur: true; to bottom tabs navigator
2. wrapped the tabs with Animated.View with slide animation
3. added focus and blur event listeners which i use to control when start animation

but this way have problems:

• State just doesn't updating
• Screen instantly updating without blur animation after tab select and it is causes annoying visual defect: sharp twitching before animation of second tab starts

Second way:

1. everything of the first way butunmountOnBlur: false;

that correction fixes problem with State, but i still have problem with instantly updating without blur animation and it causes another problem:

• right after tab select the tab content disappears for a moment and appears again

How i can animate transition between tabs without visual defects and save state updating after select tab

Answer 1

try using createMaterialTopTabNavigator because that animates between tabs by default, and setting tabBarPosition="bottom" in the navigator.

I'm not sure what you mean by:

i also need to refresh the tab to get effect from updated state

Hopefully this fixes the problem anyway