CODEWITHSUNDEEP
imagereact-nativeflux
Muhammad Ahsan
Muhammad Ahsan

Reputation: 259

React Native Images for Multiple Screens

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

Upvotes: 3

Views: 2622

Answers (2)

Muhammad Ahsan
Muhammad Ahsan

Reputation: 259

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>

Upvotes: 0

Rodrigo
Rodrigo

Reputation: 234

Import Dimensions From react native and then use it to set the size of your image

import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get("window").width;
const logo = require("logo.png");

in the return of render:

<Image source={logo} style={styles.logo} />


const styles = StyleSheet.create({
logo: {
height: SCREEN_WIDTH * 0.65,
width: SCREEN_WIDTH * 0.65,
marginLeft: SCREEN_WIDTH * 0.2

}})

Upvotes: 0

Related Questions