How to vertically align image with resizeMode “contain” with React Native?

Sometimes, we want to vertically align image with resizeMode "contain" with React Native.

In this article, we’ll look at how to vertically align image with resizeMode "contain" with React Native.

How to vertically align image with resizeMode "contain" with React Native?

To vertically align image with resizeMode "contain" with React Native, we can use justifyContent.

For instance, we write:

import * as React from 'react';
import { View, Image } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ justifyContent: 'center', flex: 1 }}>
      <Image
        source={{ uri: 'https://picsum.photos/200/300' }}
        style={{ height: 100, width: 300 }}
        resizeMode="contain"
        resizeMethod="resize"
      />
    </View>
  );
}

to set justifyContent to 'center' to center align the Image vertically.

We also set the image height and width to make it display.

As a result, we should see the image display vertically centered.

Conclusion

To vertically align image with resizeMode "contain" with React Native, we can use justifyContent.