react-native-ui-lib/lib/components/HighlighterOverlayView/index.js

[](https://stand-with-ukraine.pp.ua)

import React from 'react';
import { processColor, StyleSheet, Modal } from 'react-native';
// Import the Codegen specification for New Architecture
import HighlighterViewNativeComponent from "../../specs/HighlighterViewNativeComponent";
const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
const HighlighterOverlayView = props => {
  const {
    overlayColor,
    borderRadius,
    strokeColor,
    strokeWidth,
    visible,
    onRequestClose,
    highlightFrame,
    style,
    children,
    highlightViewTag,
    highlightViewTagParams,
    minimumRectSize,
    innerPadding
  } = props;

  // Process colors for New Architecture Codegen component
  const overlayColorToUse = processColor(overlayColor || DefaultOverlayColor);
  const strokeColorToUse = strokeColor ? processColor(strokeColor) : undefined;

  // Convert highlightViewTagParams to match native Codegen spec
  let nativeHighlightViewTagParams;
  if (highlightViewTagParams) {
    const padding = typeof highlightViewTagParams.padding === 'number' ? highlightViewTagParams.padding : 0;
    nativeHighlightViewTagParams = {
      paddingLeft: padding,
      paddingTop: padding,
      paddingRight: padding,
      paddingBottom: padding,
      offsetX: highlightViewTagParams.offset?.x || 0,
      offsetY: highlightViewTagParams.offset?.y || 0
    };
  }
  return <Modal visible={!!visible} animationType={'fade'} transparent onRequestClose={() => onRequestClose?.()}>
      <HighlighterViewNativeComponent highlightFrame={highlightFrame} style={[style, {
      ...StyleSheet.absoluteFillObject,
      backgroundColor: 'transparent'
    }]} overlayColor={overlayColorToUse} borderRadius={borderRadius} strokeColor={strokeColorToUse} strokeWidth={strokeWidth} highlightViewTag={highlightViewTag} highlightViewTagParams={nativeHighlightViewTagParams} minimumRectSize={minimumRectSize} innerPadding={innerPadding} testID={props.testID} accessible={props.accessible} />
      {children}
    </Modal>;
};
HighlighterOverlayView.displayName = 'IGNORE';
export default HighlighterOverlayView;