React Native Images for Multiple Screens

Question

I have an image which I want to display in top half of my screen. I'm using flux like this.

            <View style={{flex:0.5}}>
                <Image
                    style={{width:null, height:null, flex:1, resizeMode:'stretch'}}
                            source={require('../../../Images/salad-congo.png')}>
                </Image>
            </View>
            <View style={{flex:0.5, backgroundColor:'yellow'}}>
                <Text>Hello</Text>
            </View>

Problem: The problem is my image does not fit for all screen sizes. If I'm opening my app in landscape mode the image is centered instead of covering whole width and height of upper half. In case I use 'resizeMode='stretch'' my whole image is destroyed in pixels, and becomes un viewable. How can I make my image appear big for large screens, and small for small screens obviously covering the whole screen. Is there something I need to do with my image's resolutions? Or provide multiple images? If yes then how to handle them for both android and IOS

Answer 1

So I solved the issue by creating a single large image of 2056x2056, and then by using Flex properly to obtain the desired result. Tested the result on a couple of phones and tablets. Working Fine.

 <View style={{flex:1}}>
            <View style={{flex:0.6, alignItems:'stretch'}}>
                <Image style={{flex:1, width: null, height: null }}
                       source={require('../../../Images/salad-congo2056x2056.png')}/>
            </View>

            <View style={{flex:0.1, backgroundColor:'#ffffff'}}>
                // Intentional gap
            </View>

            <View style={{flex:0.3, backgroundColor:'red'}}>
                // Anything here
            </View>
 </View>