Resizing base64 to percentage of original in react-native

March 8, 2023

I am rendering some base64 images in my react-native app, and it is working. However, right now it only seems to work when I assign a fixed height and width:

  <View>
    <Image
      source={{
        uri: logoStr,
      }}
      style={styles.logo}
    />
  </View>

const styles = StyleSheet.create({
  // other styles
  logo: {
    width: 270,
    height: 320,
    marginTop: '10%',
  },
});

Since the images I’m using are not always exactly the same dimensions I’d like to use percentages rather than fixed pixel values. However, when I try something like this:

const styles = StyleSheet.create({
  // other styles
  logo: {
    width: '25%',
    height: '25%',
    marginTop: '10%',
  },
});

… the image doesn’t render at all.

I also tried this:

  logo: {
    width: Dimensions.get('window').width * 0.25,
    height: Dimensions.get('window').height * 0.25,
    marginTop: '10%',
  },

… and I see the image, and the image shows the resized height correctly, but the width is clipped on either side. Ideas?

>Solution :

Maybe something like this?

 <View>
   <Image
     source={{
       uri: logoStr,
     }}
     style={styles.logo}
     resizeMode={"contain"}
   />
 </View>

const styles = StyleSheet.create({
  logo: {
     width: Dimensions.get('window').width * 0.25,
     height: Dimensions.get('window').height * 0.25,
     marginTop: '10%',
  },
});