title: Nested Transparent View with background color in react native?
body: <p>i want to add a transparent child view with background color, so what i did is the child has border bottom left radius and it's transparent and it's parent has background color of white but this is what i achieved, what i want to do is the white background not override the transparent view with border bottom left radius:</p>
  <p><a href="https://i.stack.imgur.com/285ej.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/285ej.png" alt="result" /></a></p>
  <p>my current code:</p>
  <pre><code>&lt;StyledView1&gt;
    &lt;StyledView2 /&gt;
  &lt;/StyledView1&gt;
  &lt;MainContentContainer
    topRightRadius
    bottomLeftRadius
    bottomRightRadius
  &gt; ....
  
  
  const StyledView1 = styled.View`
    height: 100px;
    background-color: #fff;
  `;
  
  const StyledView2 = styled.View`
    height: 100px;
    background-color: transparent;
    border-bottom-left-radius: 75px;
  `;
  
  const MainContentContainer = styled.View&lt;MainContentSectionProps&gt;`
    flex: 1;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background-color: green;
    ${(props) =&gt; css`
      ${props.topLeftRadius &amp;&amp; `border-top-left-radius: ${BORDER_RADIUS}px;`}
      ${props.topRightRadius &amp;&amp;
      `border-top-right-radius: ${BORDER_RADIUS}px;`}
      ${props.bottomLeftRadius &amp;&amp;
      `border-bottom-left-radius: ${BORDER_RADIUS}px;`}
      ${props.bottomRightRadius &amp;&amp;
      `border-bottom-right-radius: ${BORDER_RADIUS}px;`}
    `};
  `;
  </code></pre>
  <p>below is the design i want to achieve with this:</p>
  <p><a href="https://i.stack.imgur.com/M6D3c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6D3c.png" alt="design" /></a></p>