Making a round image Button by Adding image inside TouchableOpacity in React Native

Question

I want to create a round Button for profile pic in React Native, but it did not work. The button should be round and clickable, and should have a pmg image inside it. What am I doing wrong here?

I used a blue background image, then on top op it TouchableOpacity wrapper for holding the image as button.

const Main = () => {
    return (
        // Container
        <View style={styles.container} >
            <ImageBackground
                source={require('../images/background.png')}
                style={styles.backgroundImage}>

                <View>
                    <TouchableOpacity style={styles.profileButton}>
                        <Image source={require('../images/profilePicture/boy.png')} />
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        // paddingTop: '6%',
        flex: 1,
    },

    backgroundImage: {
        flex: 1,
        resizeMode: "cover",
        width: '100%',
        height: '100%',
    },

    topBar: {
        height: '40%',
        // color : 'red',
        // flex: 1,
        // alignItems: 'stretch'
    },

    profileButton: {
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.2)',
        alignItems: 'center',
        justifyContent: 'center',
        width: '13%',
        height: 50,
        // backgroundColor: '#fff',
        borderRadius: 50,
    },
});

export default Main;

Answer 1

Be sure to add image dimensions. Lol. I completely forgot that:

profileButton: {
        borderWidth: 1,
        // borderColor: 'rgba(0,0,0,0.2)',
        width: '13%',
        height: 50,
        backgroundColor: '#fff',
        borderRadius: 50,
        padding: '1%',
        margin: '1%',
    },

    profileImage: {
        height: undefined,
        width: undefined,
        flex: 1
    },