title: React native: how to split backgroundColor of circular View into 2 different colors?
body: <p>I have several circular <code>Animated.View</code>'s with different <code>backgroundColor</code>s here in RN. I want to, ideally via styles, split the <code>backgroundColor</code> to be half and half, 2 dynamic colors like these:</p>
  <p><a href="https://i.stack.imgur.com/8eNEk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8eNEk.png" alt="enter image description here" /></a></p>
  <p>Ive tried putting a separate <code>View</code> as a child of my parent <code>Animated.View</code> to be the other half of the color, but this doesn't work/keep the circular styling. The code:</p>
  <pre class="lang-jsx prettyprint-override"><code>&lt;TouchableWithoutFeedback
    style={globalStyles.button}
    disabled={isDisabled || isPending || !isOpen}
    hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}
    onPressIn={onPressIn}
    onPressOut={onPressOut}
    onPress={onPress}
  &gt;
    &lt;Animated.View
      style={[
        globalStyles.buttonInner,
        applyButtonWidth(innerWidth),
        { backgroundColor },
      ]}
    &gt;
      {content}
    &lt;/Animated.View&gt;
  &lt;/TouchableWithoutFeedback&gt;
  </code></pre>
  <p>I cant find anything on this. How can I split the <code>backgroundColor</code> here?</p>