CODEWITHSUNDEEP
react-nativeimage-resizing
Queen
Queen

Reputation: 571

How to resize an image in different screens in react native

I am new in react native. I would like to resize the image in different screens. For example, if a screen of a cell phone is bigger, I want to use the bigger image. I put the following code inside my view container:

<Image style={styles.img}
          source={require('myimage')}
        />
                <Text style={styles.item_normal}>Test1</Text>
                    <Text style={styles.itemInfo_small}>Test2</Text>

        <Button_yellow  onPress={ () => { this.onPressEnter() }}  label="Enter" icon="yellow" />

Here is my styles:

const styles = StyleSheet.create({
        container: {
        flex: 1,
            backgroundColor: '#FFFFFF',
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height,
        },
      img: {
    width: 100, 
    height: 80,
    marginTop: 10,
        marginBottom: 10,
    },
    itemInfo_small: {
            fontSize: 12,
            color: '#000000',
            textAlign: 'center',
        marginBottom: 5,
        },

Can you please help me how to resize it?

Upvotes: 1

Views: 2135

Answers (2)

Aboobakkar P S
Aboobakkar P S

Reputation: 806

The following Code worked for me,

<Image style={{flex: 1,
               width: null,
               height: null}}
               source={require('myimage')}
/>

Image is Stretched for Outer Flex Size.

Upvotes: 4

Alexander Vitanov
Alexander Vitanov

Reputation: 4141

You can use percentage like so:

width: Dimensions.get('window').width * percentage / 100,
height: Dimensions.get('window').height * percentage / 100

Upvotes: 2

Related Questions