@100mslive/react-native-room-kit/lib/module/components/AnimatedHeader.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, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
import { useHeaderHeight } from './Header';
export const AnimatedHeader = ({
  children,
  offset
}) => {
  const headerHeight = useHeaderHeight();
  const animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
      transform: [{
        translateY: interpolate(offset.value, [0, 1], [-headerHeight, 0])
      }]
    };
  }, [headerHeight]);
  const animatedProps = useAnimatedProps(() => {
    return {
      pointerEvents: offset.value === 0 ? 'none' : 'auto'
    };
  }, []);
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.container, animatedStyles],
    animatedProps: animatedProps
  }, children);
};
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    width: '100%',
    zIndex: 1
  }
});
//# sourceMappingURL=AnimatedHeader.js.map