Add top corner image with react native and UI Kitten-CodePudding

I need to do add the green circles at the top left corner of my React Native APP:

But I don't know how to do this. The green circles are technically a .png (I got the image) I tried this:

<Layout style={styles.container}>
        <Image source={require('../assets/style/images/Vector.png')}  style={styles.topImg}/>
        .......

</Layout>

const styles = StyleSheet.create({
    topImg: {
        position: 'absolute',
        width: 200,
        top: 50,
        left: 50,
        right: 0,
        bottom: 0,
    },
    container: {
        flex: 1,
        flexDirection: 'column'
    },
    layout: {
        justifyContent: 'center',
        alignItems: 'center',
    }
});

But It's not working, the green circles are not showns...

CodePudding user response：

Working example: https://snack.expo.dev/@msbot01/vengeful-croissant If you want to use image adjust the image as done for View

<View>
  <View style={{backgroundColor:'green', height:100, width:100, borderRadius:100, marginTop:-50,position:'absolute', opacity:0.5}}>
  </View>
  <View style={{backgroundColor:'green', height:100, width:100, borderRadius:100, marginLeft:-50,position:'absolute', opacity:0.4}}>
  </View>
</View>