Image component of React Native Elements library is cropping the image on resize

Question

I am new to react native and I am searching for a good component library, React Native Elements looked like a popular library but I can't get the image component working.

I have a really big image and it overflows the screen. I just added width: 100 and height: 100 with just 'react-native' Image component and it worked fine but not so with @rneui/themed, I am able to see only the top-left part of the image. I tried resizeMode: 'contain', there is no flex: 1 in the styles but still it doesn't work.

I am currently using Expo Go and testing in my android phone.

Any suggestions would be appreciated.

import { Text, Card, Image } from '@rneui/themed';

function HomeScreen() {

return (

   <View>
       <Image
          containerStyle={styles.imgStyle}
          source={startingImage}
       />
   </View>
  )
}

const styles = StyleSheet.create({
  imgStyle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    resizeMode: 'contain'
  },
})

Answer 1

It looks like the issue you are experiencing is due to the way you have set up your styles and perhaps also misunderstanding how resizeMode works with the Image component from @rneui/themed. In React Native Elements, the resizeMode should be applied directly to the Image component as a prop and not inside the containerStyle.

import { Text, Card, Image } from '@rneui/themed';
import { View, StyleSheet } from 'react-native';

function HomeScreen() {
  return (
    <View>
      <Image
        source={startingImage}
        style={styles.imgStyle} // Apply styles here
        resizeMode="contain" // Use resizeMode as a prop
      />
    </View>
  );
}

const styles = StyleSheet.create({
  imgStyle: {
    width: 100,      // Set a fixed width
    height: 100,     // Set a fixed height
  },
});