react-native-web
Version:
React Native for Web
94 lines (93 loc) • 2.23 kB
Flow
/**
* Copyright (c) Nicolas Gallagher.
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import * as React from 'react';
import StyleSheet from '../StyleSheet';
import createElement from '../createElement';
const ANIMATION_DURATION = 300;
declare function getAnimationStyle(animationType: any, visible: any): any;
export type ModalAnimationProps = {|
animationType?: ?('none' | 'slide' | 'fade'),
children?: any,
onDismiss?: ?() => void,
onShow?: ?() => void,
visible?: ?boolean,
|};
declare function ModalAnimation(props: ModalAnimationProps): React.Node;
const styles = StyleSheet.create({
container: {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 9999
},
animatedIn: {
animationDuration: `${ANIMATION_DURATION}ms`,
animationTimingFunction: 'ease-in'
},
animatedOut: {
pointerEvents: 'none',
animationDuration: `${ANIMATION_DURATION}ms`,
animationTimingFunction: 'ease-out'
},
fadeIn: {
opacity: 1,
animationKeyframes: {
'0%': {
opacity: 0
},
'100%': {
opacity: 1
}
}
},
fadeOut: {
opacity: 0,
animationKeyframes: {
'0%': {
opacity: 1
},
'100%': {
opacity: 0
}
}
},
slideIn: {
transform: 'translateY(0%)',
animationKeyframes: {
'0%': {
transform: 'translateY(100%)'
},
'100%': {
transform: 'translateY(0%)'
}
}
},
slideOut: {
transform: 'translateY(100%)',
animationKeyframes: {
'0%': {
transform: 'translateY(0%)'
},
'100%': {
transform: 'translateY(100%)'
}
}
},
hidden: {
opacity: 0
}
});
const animatedSlideInStyles = [styles.container, styles.animatedIn, styles.slideIn];
const animatedSlideOutStyles = [styles.container, styles.animatedOut, styles.slideOut];
const animatedFadeInStyles = [styles.container, styles.animatedIn, styles.fadeIn];
const animatedFadeOutStyles = [styles.container, styles.animatedOut, styles.fadeOut];
export default ModalAnimation;