title: ReactNative: place a view on top of the border of a Circle-View
body: <p>I have built a component, that draws a colored circle of a given size. In the center of the circle a number or character is shown:</p>
  
  <p><a href="https://i.stack.imgur.com/vu1KT.png" rel="nofollow"><img src="https://i.stack.imgur.com/vu1KT.png" alt="enter image description here"></a></p>
  
  <p>Also, a green circle should be displayed on the bottom-right-corner at the border of the circle.</p>
  
  <p>The ReactNative-StyleSheet looks as follows:</p>
  
  <pre><code>  circle: {
      width: 100, // this should be a "props"-value in future
      height: 100, // this should be a "props"-value in future
      borderRadius: 100/2,
      backgroundColor: 'red',
      alignItems: 'center',
      justifyContent: 'center',
    },
  
    circleCaption: {
      fontSize: 70,
    },
  
    symbol: {
      width: 16,
      height: 16,
      borderRadius: 16/2,
      backgroundColor: 'green',
      position: 'absolute',
      right: 8,
      bottom: 8,
    },
  </code></pre>
  
  <p>And the shape is placed into the view this way:</p>
  
  <pre><code>    &lt;View style={s.circle}&gt;
        &lt;Text style={s.circleCaption}&gt;A&lt;/Text&gt;
        &lt;View style={s.symbol} /&gt;
      &lt;/View&gt;
  </code></pre>
  
  <p>With these factors (right: 8, bottom: 8), the green circle is placed directly on the right/bottom-corner of the circle.</p>
  
  <p>How to place it dynamically with circle-sizes? How can I calculate the bottom/right-value?</p>
  
  <p>Also, if the character, number or symbol that is drawn in the center of the red circle would become too large to fit in the circle, the green circle is way off the circle and loses its fixed position. Any ideas about? Unfortunately, there is no Z-Index provided by ReactNative.</p>