skip to Main Content

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?

2

Answers


  1. Use resizemode to control the scaling of an image, e.g. cover

    Scale the image uniformly (maintain the image’s aspect ratio)

    Login or Signup to reply.
  2. 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%',
      },
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search