Анимация в нижней вкладке навигации работает только один раз - реагирует навигация

Question

У меня есть нижняя вкладка навигатора (реагирует навигация) и LayoutAnimation.easeInEaseOut () в componentDidMount.Это дает хорошую анимацию между значком вкладки и именем.Но анимация происходит только один раз.Это не оживляет после этого.

Посмотрите видео здесь

https://youtu.be/H0AL6DZCimQ

PS посмотрите на нижнюю панель вкладок для анимации значков в видео.

const TabNavigator = createBottomTabNavigator({
  Home,
  Events,
  Search,
})

Home.js

class Home extends Component<Props> {
  componentDidMount() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    //LayoutAnimation.easeInEaseOut(); //keeping it here or in componentDidMount doesn't affect 
    return (
      <View style={styles.container}>
        <Text>Home!!</Text>
      </View>
    );
  }
}

Events.js

class Events extends Component<Props> {
  componentDidMount() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Events!!</Text>
      </View>
    );
  }
}

Search.js

class Search extends Component<Props> {
  componentDidMount() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Search!!</Text>
      </View>
    );
  }
}