How to fit Image in containing View with React Native?

Sometimes, we want to fit Image in containing View with React Native.

In this article, we’ll look at how to fit Image in containing View with React Native.

How to fit Image in containing View with React Native?

To fit Image in containing View with React Native, we can set the width of the Image to '100%'.

For instance, we write:

import * as React from 'react';
import { View, Image } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
import { WebView } from 'react-native-webview';

export default function App() {
  const [text, setText] = React.useState();
  return (
    <View style={{ width: 200, height: 300 }}>
      <Image
        source="https://picsum.photos/200/300"
        style={{
          width: '100%',
          height: undefined,
          aspectRatio: 1,
        }}
      />
    </View>
  );
}

to set the style prop of the Image to

{
  width: '100%',
  height: undefined,
  aspectRatio: 1,
}

to make the width of the image fit to the View‘s width.

And we set the aspectRatio to 1 to make the height the same as the width.

Conclusion

To fit Image in containing View with React Native, we can set the width of the Image to '100%'.