'ReactNative overlap image on a specific location of background image

I want to place an image on a specific location of my background image, we can consider I am using the RN ImageBackground element and have a full width/height background image in it and the resizeMode is set to contain. So now I want to add my logo to the Y location of the background image. How can I achieve this?

enter image description here

I tried to use marginTop for my image component but it won't be at the same location for every devices. If the aspect ratio is different, then my image will go up or down and won't be located at the desired location. I also tried to handle it by using a formula like viewportHeight * 0.15 to achieve this but didn't work as expected..

I think the only way to handle it is by having a formula to maintain the marginTop property for every aspect ratio, what do you think?



Solution 1:[1]

just take BackgroundImage as your main view and in side backgroundimage create 4 another view vertically and inside the second view just place your logo it'll work same for all devices

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sumit_VE