Inner shadow for group of objects

[ryskin]

I'm making an element with inner shadow and that's great if I need to make the background of my element just with color fill, but I need to apply a group of elements to the background and overlay it with inner shadow. I don't see the way how to do it. I will show screenshots.

how it should be

here is my code:

`<Group transform={[{ translateX: 100 }, { translateY: 200 }]}>

        </RoundedRect>
        <Mask mask={<RoundedRect x={0} y={0} width={200} height={80} r={40} color="#4D83B3" />}>
          <Circle cx={32} cy={40} r={120} color="#7AA2C6" />
          <Circle cx={32} cy={40} r={100} color="#9BB9D4" />
          <Circle cx={32} cy={40} r={80} color="#B4CBDF" />
        </Mask>

        <Circle cx={44} cy={40} r={32} color="#EFCD54">
          <Shadow dx={2} dy={4} blur={4} color="#FFFF" inner />
          <Shadow dx={-2} dy={-2} blur={2} color="#776A37" inner />
          <Shadow dx={0} dy={4} blur={4} color="#4E565A" />
        </Circle>
      </Group>`

[ryskin]

I did this, a problem in a lack of documentation ( I'm not sure I did it the right way but it worked.

<Group transform={[{ translateX: 100 }, { translateY: 200 }]}> <Group> <Group layer={ <Paint> <Shadow dx={0} dy={3} blur={4} color="#2C4357" inner /> <Shadow dx={0} dy={-4} blur={2} color="#B4B8C1" /> <Shadow dx={0} dy={4} blur={2} color="#FDFDFE" /> </Paint> } > <Mask mask={<RoundedRect x={0} y={0} width={200} height={80} r={40} color="#4D83B3" />} > <RoundedRect x={0} y={0} width={200} height={80} r={40} color="#4D83B3" /> <Circle cx={32} cy={40} r={120} color="#7AA2C6" /> <Circle cx={32} cy={40} r={100} color="#9BB9D4" /> <Circle cx={32} cy={40} r={80} color="#B4CBDF" /> </Mask> </Group> </Group> <Circle cx={44} cy={40} r={32} color="#EFCD54"> <Shadow dx={2} dy={4} blur={4} color="#FFFF" inner /> <Shadow dx={-2} dy={-2} blur={2} color="#776A37" inner /> <Shadow dx={0} dy={4} blur={4} color="#4E565A" /> </Circle> </Group>