react-native-navigation/lib/module/components/Modal.js

React Native Navigation - truly native navigation for iOS and Android

"use strict";

import React, { useLayoutEffect, useRef } from 'react';
import { requireNativeComponent, View, StyleSheet, Dimensions } from 'react-native';
import { jsx as _jsx } from "react/jsx-runtime";
const RNNModalViewManager = requireNativeComponent('RNNModalViewManager');
const Container = rnnProps => {
  const viewRef = useRef(null);
  useLayoutEffect(() => {
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;
    viewRef?.current?.setNativeProps({
      width: windowWidth,
      height: windowHeight
    });
  }, []);
  return /*#__PURE__*/_jsx(View, {
    ref: viewRef,
    style: styles.container,
    collapsable: false,
    children: rnnProps.children
  });
};
export class Modal extends React.Component {
  static defaultProps = {
    transparent: false,
    blurOnUnmount: false,
    animationType: 'slide'
  };
  constructor(props) {
    super(props);
  }
  render() {
    const processed = this.proccessProps();
    if (this.props.visible) {
      return /*#__PURE__*/_jsx(RNNModalViewManager, {
        ...processed,
        children: /*#__PURE__*/_jsx(Container, {
          ...this.props
        })
      });
    } else {
      return null;
    }
  }
  proccessProps() {
    const processed = {
      ...this.props,
      style: styles.modal
    };
    if (this.props.animationType === 'none') {
      processed.animation = {
        showModal: {
          enabled: false
        },
        dismissModal: {
          enabled: false
        }
      };
    } else {
      const isSlide = this.props.animationType === 'slide';
      processed.animation = {
        showModal: {
          enter: isSlide ? showModalSlideEnterAnimations : showModalFadeEnterAnimations
        },
        dismissModal: {
          exit: isSlide ? dismissModalSlideExitAnimations : dismissModalFadeExitAnimations
        }
      };
    }
    return processed;
  }
}
const height = Math.round(Dimensions.get('window').height);
const SCREEN_ANIMATION_DURATION = 500;
const showModalSlideEnterAnimations = {
  translationY: {
    from: height,
    to: 0,
    duration: SCREEN_ANIMATION_DURATION,
    interpolation: {
      type: 'decelerate'
    }
  }
};
const dismissModalSlideExitAnimations = {
  translationY: {
    from: 0,
    to: height,
    duration: SCREEN_ANIMATION_DURATION,
    interpolation: {
      type: 'decelerate'
    }
  }
};
const showModalFadeEnterAnimations = {
  alpha: {
    from: 0,
    to: 1,
    duration: SCREEN_ANIMATION_DURATION,
    interpolation: {
      type: 'decelerate'
    }
  }
};
const dismissModalFadeExitAnimations = {
  alpha: {
    from: 1,
    to: 0,
    duration: SCREEN_ANIMATION_DURATION,
    interpolation: {
      type: 'decelerate'
    }
  }
};
const styles = StyleSheet.create({
  modal: {
    position: 'absolute'
  },
  container: {
    top: 0,
    flex: 1
  }
});
//# sourceMappingURL=Modal.js.map