Categories
React Native Answers

How to fit Image in containing View, not the whole screen size with React Native?

Spread the love

Sometimes, we want to fit Image in containing View, not the whole screen size with React Native.

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

How to fit Image in containing View, not the whole screen size with React Native?

To fit Image in containing View, not the whole screen size with React Native, we set resizeMode to cover.

For instance, we write

const style = StyleSheet.create({
  imageStyle: {
    alignSelf: "center",
    height: "100%",
    width: "100%",
  },
});

//...

const Comp = () => {
  //...
  return (
    <View>
      <Image
        style={styles.imageStyle}
        resizeMode={"cover"}
        source={item.image}
      />
    </View>
  );
};

to add an Image with the resizeMode prop set to cover.

This will make it fit to the View wrapped around it.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.