Animate react navigation bottom tab navigation screen's components on load or when displayed in React Native

I am searching to find a tutorial to implement lazy loading or showing some animation to the screen when bottom nav is routed to another screen(when screen changes) instead of displaying it without any animation. I did not find page transaction animation. but I managed to animate components in the screen when page opens, so that users see some animation when they open screen. Lazy loading is only implemented on first time navigation loads.

I used react-native-animatable to animate component. I don't know if I am doing it in the correct way or not.

Here is my code.

constructor(props: any) {        super(props)        this.state = {         dummyKey:4564654        };}componentDidMount(){    this.props.navigation.addListener('focus', (e: any) => {          if(e){                   this.setState({dummyKey:Math.random()})       }     })}render(){<Animatable.View key={this.state.dummyKey} animation={'bounceIn'} >     //View to animate when loaded</Animatable.View>              }

I got these results

my Question

1. Is this the correct way to do, what are the pros and cons?
2. How to achieve screen translation animation when screens are changed? (I only see animation for stack nav screen change but not bottom tab nav)
3. If I add ref to Animatable.View component and if I try to call animation like here on didcomponentmount animation is not getting triggered why(or can you please provide any example)?

Also how to animate react navigation stack nav header when hiding and showing.