TV.tsx

import React from 'react';
import { SvgXml } from 'react-native-svg';

const xml = `
  <svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
      d="M24.7424 13.729V3.16824C24.7424 1.41847 23.3577 0 21.6496 0H3.0928C1.3847 0 0 1.41847 0 3.16824V13.729C0 15.4788 1.3847 16.8973 3.0928 16.8973C3.66217 16.8973 4.12374 16.4244 4.12374 15.8412C4.12374 15.2579 3.66217 14.7851 3.0928 14.7851C2.52343 14.7851 2.06187 14.3123 2.06187 13.729V3.16824C2.06187 2.58498 2.52343 2.11216 3.0928 2.11216H21.6496C22.219 2.11216 22.6806 2.58498 22.6806 3.16824V13.729C22.6806 14.3123 22.219 14.7851 21.6496 14.7851C21.0803 14.7851 20.6187 15.2579 20.6187 15.8412C20.6187 16.4244 21.0803 16.8973 21.6496 16.8973C23.3577 16.8973 24.7424 15.4788 24.7424 13.729ZM18.5569 19.0094C18.165 19.0122 17.8054 18.7871 17.6291 18.4286L16.8868 16.8973H7.85579L7.11352 18.4286C6.85028 18.9314 6.24475 19.1291 5.746 18.8751C5.24725 18.6211 5.03565 18.0072 5.26815 17.4887L6.01042 15.9574C6.3586 15.2396 7.07337 14.7855 7.85579 14.7851H16.8868C17.6692 14.7855 18.384 15.2396 18.7322 15.9574L19.4744 17.4887C19.6304 17.8146 19.6119 18.1998 19.4256 18.5086C19.2393 18.8174 18.9112 19.0065 18.5569 19.0094ZM10.51 12H9.04V6.72H7.24V5.48H12.3V6.72H10.51V12ZM16.2069 12H14.4369L12.4669 5.48H14.0269L14.8169 8.52C14.9049 8.84893 14.98 9.16713 15.0552 9.48554C15.1424 9.85441 15.2295 10.2236 15.3369 10.61H15.3769C15.4842 10.2236 15.5714 9.85442 15.6585 9.48555C15.7337 9.16714 15.8089 8.84893 15.8969 8.52L16.6669 5.48H18.1769L16.2069 12Z"
      fill="#0F1E36" fill-opacity="0.5" />
  </svg>
`;

type Props = {
  barHeight: number;
  barWidth: number;
};

const Discover = ({ barHeight, barWidth }: Props) => (
  <SvgXml xml={xml} width={barHeight * 0.3135} height={barWidth * 0.25} />
);

export default Discover;