React Native Image Resizemode – The right way to do

Total
0
Shares
React Native Image Resizemode

React Native Image Resizemode works properly in two conditions –

  1. When used as style property
  2. When used as component props

In this article we will see both the methods.

Condition 1: ResizeMode as Style property

Use ResizeMode as style property, when image source is remote –

image: {
     aspectRatio: 1, 
     flex: 1, 
     maxWidth: 300, 
     resizeMode: 'contain',
}

In the above example we used aspectRatio property to determine the height of image based on the width.

In the next code we will set the width in percentage and use resizeMode to be contain

image: {
     width: '100%', 
     height: 300, 
     resizeMode: 'contain'
}

Condition 2: ResizeMode as component props

Use ResizeMode as Image component props when image source is local. With the local image you can set both width and height as undefined and React Native will calculate the size automatically.

<Image
     resizeMode={'contain'}
     style={{flex: 1, height: undefined, width: undefined}}
     source={require('/path/to/local/image')}
 />

How resizing works in React-Native?

Always remember, in react native, there is no way to work with remote images without providing height, width values. You need to know these values. There is also a way by which you can work with only one value of either width or height. In that case you will need the value of aspect ratio.

For example,

Suppose size of your image is – 800 x 300 px

So, aspect ratio of image will be (width/height) – 800/300 = 8/3 = 2.67

Now, if you want to display the image of width 400 then you can use the code –

image: {
     aspectRatio: 2.67, 
     flex: 1, 
     width: 400, 
     resizeMode: 'contain',
}

You can also use maxWidth if you want the image to be responsive and within the maximum bounds.

What are different ResizeModes in React-native?

There are 5 types of ResizeModes in React Native – cover, contain, stretch, repeat, and center. The default value is cover. Let’s understand each of them one by one –

1. center – We will start with center. It places the image in the center of view, both horizontally and vertically. If the image is larger than the view, then it scaled down to fit. If it is smaller then it is centered. Check this code –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'yellow',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'center', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;
resizemode center react native

2. repeat – As the name indicates, repeat resizemode is used to fill the parent frame with image repeatedly. Check this code and see the output –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'repeat', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;
resizemode repeat react native image

3. stretch – This resizemode scales up/down an image to cover the frame. Due to this, the aspect ratio is not maintained and image is distorted. Code Example –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'stretch', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;
react native image resizemode stretch

4. contain – It will scale the image up or down and try to cover the frame at least in one direction. If height is greater than width and frame is landscape, then this mode will scale height up or down to match the height of frame and vice versa. Check the below code –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'contain', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;
image resizemode contain in react native

5. cover – This one is like contain mode but unlike contain it may expand out of the frame. cover mode tries to fit both height and width with frame keeping the aspect ratio. It keeps scaling the image up or down till both the axes are either equal or greater than frame. Code –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'cover', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;
cover resizemode of react native image

Conclusion

There are 5 types of resizemodes in react native image – cover, contain, stretch, repeat and center. In this article we saw the definition of each of these along with code examples. You can read more about resizeMode in the react native documentation. Images are bulky and needs optimization so always look out these optimization techniques.

Live Demo

Open Live Demo

React Native Series

Alert

  1. Basic Alert
  2. Dismiss on Clicking Outside
  3. Input Fields in Alert Dialog – Prompt()
  4. Dark-Light Theme of Dialog

ActivityIndicator

  1. Basic Circular Loader
  2. Change size of Circular Loader
  3. Show/hide Circular Loader
  4. Change color of Circular Loader

Button

  1. Simple Button
  2. Change Button Color
  3. Disable Button Click
  4. Disable touch sound on Button click

FlatList

  1. Simple List
  2. Single Item Selection from List
  3. Multiple Item Selection from List
  4. Adding separator between list items
  5. Multiple columns List
  6. Showing Message in Empty List
  7. Add Footer to the List
  8. Add Header to the List
  9. Horizontal List
  10. Inverted List
  11. Pull to Refresh in List
  12. Infinite Loading List

SectionList

  1. Section List

ScrollView

  1. ScrollView
  2. Stick Single Item at Header
  3. Stick Multiple Items at Header
  4. Stick Item at Footer
  5. Hide Sticky Element on Scroll

Image

  1. Display Image from remote url
  2. Display local storage image
  3. Display Base64 Image
  4. Display Gif & Webp Images
  5. Adding Blur to Image
  6. Displaying loader for Image
  7. Resizemode for Images
  8. Setting Default Placeholder Image
  9. Background Image

Modal

  1. Basic Modal
  2. Slide from bottom Modal
  3. Fade In Modal
  4. Transparent Overlay Modal

RefreshControl

  1. RefreshControl
  2. Change Refresh Loader Color
  3. Change Refresh Loader Size
  4. Change Refresh Loader Background Color
  5. Title under Refresh Loader
  6. Change color of title under refresh loader

StatusBar

  1. Get StatusBar Size
  2. Change StatusBar Background Color
  3. Display StatusBar icons & text in While Color
  4. Display StatusBar icons & text in Dark Color
  5. Hiding StatusBar
  6. Translucent StatusBar

Switch

  1. Simple Switch
  2. Disable Switch
  3. Change Switch Colors

Text

  1. Adding Text
  2. Bold Text
  3. Italic Text
  4. Underline Text
  5. Selecting Text for copy-paste
  6. Changing Highlight Color of Text Selection
  7. Fit text in View box
  8. Clickable anchors in text
  9. Truncate Lengthy Text

TextInput

  1. Simple Input Field
  2. Auto Capitalize Text in Input Field
  3. Multiline Input Field
  4. Hide Cursor in Input Field
  5. Clear input Field using X
  6. Clear input Field when focused
  7. Change Cursor Color in Input Field
  8. Disable input field
  9. Icon at the left of Input Field
  10. Dark-Light Keyboard
  11. Avoid Overlapping of Keyboard
  12. Limiting Characters in Input Field
  13. Numeric Keyboard
  14. Email Id Keyboard
  15. Phone number Keyboard
  16. Url Keyboard
  17. Placeholder in input field
  18. Placeholder Color in Input Field
  19. Password Input Field
  20. Programmatically select text in Input Field
  21. Change Text Selection Color in Input Field
  22. Select Whole text in Input Field on Focus
  23. Write text from center in input field
  24. Changing underline color of input field

TouchableWithoutFeedback

  1. TouchableWithoutFeedback

TouchableHighlight

  1. TouchableHighlight

TouchableOpacity

  1. TouchableOpacity

Pressable

  1. Pressable
  2. Creating Ripple Effect

Appearance

  1. Dark-Light System Color Scheme

AppState

  1. AppState – Foreground/Background State of App

ToastAndroid

  1. Creating Android Toast Message

Dimensions

  1. Getting Screen & Window Dimensions

Keyboard

  1. Dismiss Keyboard Programmatically

👉 Learn Material Design using React Native Paper