kalo banyak component view di rn, pasti navigasinya agak lama

LazyView.js

import React, { PureComponent } from 'react'
import { View, ViewPropTypes, Animated } from 'react-native'
import { withNavigationFocus } from 'react-navigation'
// import PropTypes from 'prop-types';

class LazyView extends PureComponent {
  state = {
    show: false,
    refresh: false
  };

  constructor (props) {
    super(props)
    this.fadeAnimation = new Animated.Value(0)
    setTimeout(() => {
      this.setState({ show: true })
      Animated.timing(this.fadeAnimation, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true
      }).start()
    }, 1)
  }

  componentDidMount () {
    // setTimeout(() => {
    //   this.setState({ show: true })
    //   Animated.timing(this.fadeAnimation, {
    //     toValue: 1,
    //     duration: 500,
    //     useNativeDriver: true
    //   }).start()
    // }, 1)
  }

  // componentDidUpdate(prevProps) {
  //   if(this.state.refresh){
  //     if (prevProps.isFocused !== this.props.isFocused){
  //       setTimeout(() => {
  //         this.setState({ show: true, refresh:false });
  //         setTimeout(() => {
  //           this.setState({ show: true })
  //           Animated.timing(this.fadeAnimation, {
  //             toValue: 1,
  //             duration: 500,
  //             useNativeDriver: true
  //           }).start()
  //         }, 1);
  //      }, 1);
  //     }
  //   }
  //   if(!this.props.isFocused){
  //     setTimeout(() => {
  //       this.setState({ show: false, refresh:true });
  //    }, 1);
  //   }
  // }
  render () {
    const { show } = this.state
    const { children, style } = this.props
    return <>{show ? <Animated.View style={[style, { opacity: this.fadeAnimation, width: '100%' }]}>{children}</Animated.View> : null}</>
  }
}

LazyView.propTypes = {
  style: ViewPropTypes.style
}

export default withNavigationFocus(LazyView)