React native: how to split backgroundColor of circular View into 2 different colors?

Question

I have several circular Animated.View's with different backgroundColors here in RN. I want to, ideally via styles, split the backgroundColor to be half and half, 2 dynamic colors like these:

Ive tried putting a separate View as a child of my parent Animated.View to be the other half of the color, but this doesn't work/keep the circular styling. The code:

<TouchableWithoutFeedback
  style={globalStyles.button}
  disabled={isDisabled || isPending || !isOpen}
  hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}
  onPressIn={onPressIn}
  onPressOut={onPressOut}
  onPress={onPress}
>
  <Animated.View
    style={[
      globalStyles.buttonInner,
      applyButtonWidth(innerWidth),
      { backgroundColor },
    ]}
  >
    {content}
  </Animated.View>
</TouchableWithoutFeedback>

I cant find anything on this. How can I split the backgroundColor here?

Answer 1

Just a few improvements in Tom's answer. In the code below, I use Styled Components just to help organize the code and easily reuse components.

import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components/native';

const size = 200;

const Circle = styled.View`
  border-radius: ${size};
  height: ${size};
  width: ${size};
  display: flex;
  overflow: hidden;
  flex-direction: row;
`;

const InnerCircle = styled.View`
  background-color: ${(props) => props.color || '#fbc2ea'};
  height: ${size};
  width: ${size / 2};
`;

const App = ({ color }) => (
  <Circle>
    <InnerCircle color="#fbcbda" />
    <InnerCircle color="#c02b3e" />
  </Circle>
);

export default App;

Here's a Snack to help you test.

And a screenshot: