overflow:hidden not working on imagebackground - css

Question

<ImageBackground
source={require('../../assets/frame.png')}
style={{
justifyContent: 'center',
alignItems: 'center',
height: 50,
width: 50
}}
>
<Image
source={
userData && userData?.avatar
? { uri: userData?.avatar }
: require('../../assets/avatar.png')
}
style={{
height: '100%',
width: '100%'
}}
/>
</ImageBackground>
I'm trying to put the image inside the frame and remove the overflow, how can I achieve that?
you can see it's extending past the frame

Answer 1

see the thing is the frame itself doesnt take the entire space, since its an image, and background image doesnt respect overflow:
Here is the solution
Ive just made resizeMode = "contain" and decreased the height relatively of player image.
Hope it works, feel free for doubts:
import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={require('./assets/frame.png')}
style={{
justifyContent: 'center',
alignItems: 'center',
height: 100,
width: 100,
overflow:'hidden',
backgroundColor:'yellow'
}}>
<Image
source={require('./assets/1659513190.png')}
style={{
height: '90%',
width: '100%',
overflow:'hidden',
marginBottom:10
}}
resizeMode="contain"
/>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
// justifyContent: 'center',
alignItems:"center",
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});