How to make a left side curve as if it were a U without absolute position?

Question

I want to make the curve that appears in the image, the one that has the gray color brackground that makes like a U. Without an absolute position for me, then I can use a button above that same background

Answer 1

What you do to get that red curve with no imports is to make a circle within the view and then do overflow:'hidden' in the parent view. So the circle doesn't overflow out of it. Next you make use of transform and translate to move it in the x and y direction to the left corner.

Full example here (https://snack.expo.dev/@heytony01/anxious-kiwi)

export default function App() {
  return (
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        <View style={{width:"90%",height:"15%",backgroundColor:"gray",borderRadius:"3%",flexDirection:"row",
        // Need this so the child view doesn't overflow it
        overflow:"hidden",}}>
            <View style={{
              // Makes a giant circle
              width:"100%",
              height:"200%",
              borderRadius:"100%",
              backgroundColor:"red", 
              // Adds a border with a color white
              borderColor:"white",
              borderWidth:2,
              // Move the cirlce to the left side
              transform:[
                {
                  translateX:-150
                },
                {
                  translateY:-50
                }
              ]
            }}>
            </View>
        </View>
    </View>
  );
}