import { ObservableLightBox } from '@ulangi/ulangi-observable' ; import { autorun } from 'mobx' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { Platform , ViewProperties } from 'react-native' ; import * as Animatable from 'react-native-animatable' ; import { config } from '../../constants/config' ; export interface LightBoxAnimatableViewProps extends ViewProperties { observableLightBox : ObservableLightBox ; } @ observer export class LightBoxAnimatableView extends React . Component < LightBoxAnimatableViewProps > { private animationContainerRef ? : any ; private animationHandler ? : ( ) => void ; public componentDidMount ( ) { this . animationHandler = autorun ( ( ) : void => { if ( this . props . observableLightBox . state === 'willDismiss' && this . animationContainerRef ) { this . props . observableLightBox . pendingAnimations . push ( 'fading view' ) ; const fadeOutAnimation = Platform . OS === 'android' ? this . animationContainerRef . fadeOutDownBig ( 400 ) : this . animationContainerRef . fadeOutDown ( 200 ) ; fadeOutAnimation . then ( ( ) : void => { this . props . observableLightBox . removePendingAnimation ( 'fading view' ) ; } ) ; } } ) ; } public componentWillUnmount ( ) { if ( typeof this . animationHandler !== 'undefined' ) { this . animationHandler ( ) ; } } public render ( ) { return ( < Animatable . View testID = { this . props . testID } ref = { ( ref ) : void => { this . animationContainerRef = ref ; } } animation = "fadeInUp" duration = { config . lightBox . animationDuration } useNativeDriver style = { this . props . style } > { this . props . children } < /Animatable.View>); } }