How to make a pill shaped TouchableOpacity in React Native?

I currently render my button with margins into a rectangular shape and am wondering how I can round the two sides to create a pill shaped icon. I've tried adding borderRadius to style and it doesn't seem to work. Am I missing something really simple that's built into TouchableOpacity?

const generateMargins = (direction: FloatDirection): string => {  // add margin to bottom if the tooltip is in the upper zone  const bottom = direction.vertical === "upper";  // add margin to top if the tooltip is in the lower zone  const top = direction.vertical === "lower";  // add margin to left if the tooltip is in the Right zone  const left = direction.horizontal === "right";  // add margin to right if the tooltip is in the Left zone  const right = direction.horizontal === "left";  const margin = {    top: top ? 20 : 0,    bottom: bottom ? 20 : 0,    left: left ? 6 : 0,    right: right ? 6 : 0  };  return `${margin.top}px ${margin.right}px ${margin.bottom}px ${    margin.right  }px`;};const Box = styled(TouchableOpacity)<IBoxProps>`  border-color: transparent;  border-top-left-radius: ${({ direction: { vertical, horizontal } }) =>    vertical === "lower" && horizontal === "right" ? "0" : borderRadius};  border-top-right-radius: ${({ direction: { vertical, horizontal } }) =>    vertical === "lower" && horizontal === "left" ? "0" : borderRadius};  border-bottom-left-radius: ${({ direction: { vertical, horizontal } }) =>    vertical === "upper" && horizontal === "right" ? "0" : borderRadius};  border-bottom-right-radius: ${({ direction: { vertical, horizontal } }) =>    vertical === "upper" && horizontal === "left" ? "0" : borderRadius};  box-shadow: 0 2px 8px ${colors.translucentGray};  padding: 7px 8px;  justify-content: flex-start;  margin: ${({ direction }) => generateMargins(direction)};  flex-direction: column;`;

Edit: I was indeed missing something - removing the border radius fixed it and allowed the pill shape to work.