@100mslive/react-native-room-kit/lib/module/components/PollAndQuizSheetScreen.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet } from 'react-native';
import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from 'react-native-reanimated';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { useIsLandscapeOrientation } from '../utils/dimension';
export const PollAndQuizSheetScreen = ({
  children,
  zIndex,
  disableAnimation
}) => {
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const {
    width
  } = useSafeAreaFrame();
  const xPosition = useSharedValue(disableAnimation ? 0 : 1);
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(xPosition.value, [0, 1], [1, 0]),
    transform: [{
      translateX: interpolate(xPosition.value, [0, 1], [0, isLandscapeOrientation ? width * 0.6 : width], 'clamp')
    }]
  }), [isLandscapeOrientation]);
  React.useEffect(() => {
    if (disableAnimation) {
      return;
    }
    xPosition.value = withTiming(0, {
      duration: 150
    });
    return () => {
      cancelAnimationFrame(xPosition.value);
    };
  }, []);
  const unmountScreenWithAnimation = React.useCallback(cb => {
    if (disableAnimation) {
      cb();
      return;
    }
    xPosition.value = withTiming(1, {
      duration: 150
    }, () => {
      runOnJS(cb)();
    });
  }, [disableAnimation]);
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.absolute, {
      zIndex
    }, animatedStyle]
  }, children ? /*#__PURE__*/React.cloneElement(children, {
    unmountScreenWithAnimation
  }) : null);
};
const styles = StyleSheet.create({
  absolute: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    overflow: 'hidden'
  }
});
//# sourceMappingURL=PollAndQuizSheetScreen.js.map