src/components/profile/ProfileCutout.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react';
import Svg, {Polygon} from 'react-native-svg';
import {
  PROFILE_CUTOUT_CORNER_Y,
  PROFILE_CUTOUT_CORNER_X,
  PROFILE_CUTOUT_TOP_Y,
  PROFILE_CUTOUT_BOTTOM_Y,
} from '../../constants';
import {SCREEN_WIDTH} from '../../utils';

const ProfileCutout: React.FC = ({children}) => {
  return (
    <Svg width={SCREEN_WIDTH} height={PROFILE_CUTOUT_BOTTOM_Y}>
      <Polygon
        points={`0,${PROFILE_CUTOUT_CORNER_Y} ${PROFILE_CUTOUT_CORNER_X},${PROFILE_CUTOUT_TOP_Y} ${SCREEN_WIDTH},${PROFILE_CUTOUT_TOP_Y} ${SCREEN_WIDTH},${PROFILE_CUTOUT_BOTTOM_Y}, 0,${PROFILE_CUTOUT_BOTTOM_Y}`}
        fill={'white'}
      />
      {children}
    </Svg>
  );
};

export default ProfileCutout;