How do I center one image over another in React Native - react-native

Question

I'm trying to make a clock component with a face image and a needle centered on the clock in React Native.
does not allow embedding other Images.
I found a few posts for centering text over images but cannot find any way do center Image over images.
Edit:
I'm trying to find a way that avoids giving absolute position so the component can be dynamically sized.

Answer 1

If i understood correctly, you want to show one image over other image. With one as a Parent image and other as a child image without using absolute postion.
For this you can use ImageBackground Component provided by react-native and by setting its height and width with percentage value.
Below is the example :
Parent Image : Clock.png is an ImageBackground Component
Child Image : Needle.png is an Image Component
import React, { Component } from 'react'
import { StyleSheet, View, Text, ImageBackground, Image } from 'react-native'
export default class ImageView extends Component {
render() {
return (
<View
style={{
flex: 1
}}
>
<View
style={{
flex: 0.25,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red'
}}
>
<Text style={{ color: 'white', fontSize: 26 }}>I am Header</Text>
</View>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
// backgroundColor: 'blue',
borderWidth: 1,
borderColor: 'red'
}}
>
<ImageBackground
source={require('#assets/Clock.png')}
style={{
height: '60%',
width: '100%'
}}
resizeMode="contain"
>
<Image
style={{
marginTop: '4.5%',
alignSelf: 'center',
height: '30%',
width: '100%'
}}
resizeMode="contain"
source={require('#assets/Needle.png')}
/>
</ImageBackground>
</View>
</View>
)
}
}

Answer 2

Same as you would handle this in regular old html,css.
Use position:absolute then align the items so that they match how you expect.