How can i make truly circular TocuhableOpacity on React-Native ? UI part is seeming circular but clicke event is still rectangular

Question

i want to ask how can i make TouchableOpacity completely circular? This is some kind a tricky issue for me because ui side is seemings circular shape but when i try to click edges as thinking its a rectangular, click events triggering from edges. I don't want that at all. I want fully circular shaped button for both ui & click event sides. I'd be appreciated if you could help me, Thanks. Best regards.

            <TouchableOpacity
                style={{
                    width: 50,
                    height: 50,
                    borderRadius: 100,
                    alignItems: "center",
                    justifyContent: "center",
                }}
                pressRetentionOffset={0.5}
                onPress={() => { }}>

                {/* some kind of codes here... */}
     
            </TouchableOpacity>

Answer 1

write a code like this and try

<TouchableOpacity
   style={{
     borderColor:'black',
     alignItems:'center',
     justifyContent:'center',
     width:100,
     height:100,
     borderRadius:50,
   }}
 >
     {=====some write a code here====}
 </TouchableOpacity>