How to create a border radius based off props in react native

Question

I have a tick icon and I'm trying to create a circle background fill in it. How do I correctly create a border radius which is half the size of the svg icon? I have tried using border radius: 50% which doesnt work in React Native, and also tried to divide the width and height of the props by 2 but I don't think I am doing that correctly.

It currently looks like this:

import React from 'react';
import Svg, { Path } from 'react-native-svg';
import styled from 'styled-components/native';

const TickIcon = ({ width = 16, height = 13 }) => (
  <Container>
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      overflow="visible"
      preserveAspectRatio="none"
      width={width}
      height={height}>
      <Path
        d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z"
        vectorEffect="non-scaling-stroke"
        fill="#fff"
        // fill="#d41f3a"
      />
    </Svg>
  </Container>
);

export default TickIcon;

const Container = styled.View`
  align-self: flex-start; 
  /* width: ${props => props.width / 2};  */
  /* height: ${props => props.height / 2};  */
  /* border-radius: 50%; */
  padding: 5px;
  justify-content: center;
  align-items: center;
  background-color: #d41f3a;

`;

score 1 · Accepted Answer · answered Jan 20 '22 at 09:20

Add a <circle> element right before the <path>. Set its radius (r) as height / 2, cx as width / 2, cy as height / 2:

<svg width="16" height="16">
  <circle r="8" cx="8" cy="8" fill="red" />
  <path d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z" fill="#fff" />
</svg>

How to create a border radius based off props in react native

1 Answers1