How to align both the Components in same in React Native - react-native

Question

I have created a progress bar in which i have rotated it to 90 degrees to make it vertical bar and then i have taken an battery image and tried to place the progress bar inside the battery but i couldn't able to place the image inside by using the position relative.
But when i use the position to be absolute the images gets aligned but i couldn't use paddingTop or PaddingBottom.
render() {
console.log("Progrss bar");
const barWidth = Dimensions.get("screen").width - 30;
const batteryWidth = Dimensions.get("screen").width;
const progressCustomStyles = {
backgroundColor: "red",
borderRadius: 0,
borderColor: "orange"
};
return (
<View style={styles.container}>
<View style={styles.angle}>
<View style={styles.progress}>
<ProgressBarAnimated
width={barWidth}
value={this.state.progress}
height={150}
borderRadius={0}
backgroundColor={
this.state.progress > 20 && this.state.progress < 90
? "yellow"
: this.state.progress >= 90
? "green"
: "red"
}
/>
</View>
<Image
style={{
width: batteryWidth,
height: 150,
position: "relative",
zIndex: 1
}}
source={require("./assets/battery.png")}
/>
</View>
</View>
);
Styles Used:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#FFFFFF"
},
angle: {
transform: [{ rotate: "-90deg" }]
},
progress: {
height: 100
}
});
Output i got:

Answer 1

It's going to be tedious to align an element perfectly inside of an image because any layout properties applied to the image will only conform to the bounding dimensions of the image. Since your image looks like two rectangles, you could try drawing it with Views instead. Example:
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ height: 20, width: 50, borderWidth: 5, borderBottomWidth: 0 }} />
<View style={{ height: 200, width: 100, borderWidth: 5, justifyContent: 'flex-end' }}>
<View style={{ height: 75, backgroundColor: 'green' }} />
</View>
</View>
);
}