React-navigation lag when switching to another tab. How to fix?

Question

iOS

Good afternoon. Given:

"react-native": "0.57.1"
"react-navigation": "^2.17.0"

I use createBottomTabNavigator:

const navigationOptions = ({ navigation }) => ({
  tabBarIcon: (options: TabBarIcon) => {
    const { routeName } = navigation.state;
    const icon = icons[routeName];
    return <Ionicons name={icon} size={25} color={options.tintColor} />;
  },
});

const RootNavigation = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Profile: {
      screen: ProfileScreen,
    },
    Cart: {
      screen: CartScreen,
    },
    Orders: {
      screen: OrdersScreen,
    },
  },
  {
    navigationOptions,
    tabBarOptions: {
      activeTintColor: '#025baa',
      inactiveTintColor: 'gray',
    },
  },
);

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <RootNavigation />;
  }
}

Problem: when you click on the icon, there should be a transition to the tab that was clicked on, but the transition occurs only if you then click on the next tab, and then go to the previous clicked one.
Video: https://streamable.com/j5g34
What could be causing this?

Answer 1

Issue resolved. The bug appears only on the emulator, on real devices everything works as intended.