Question 32895 in React native Question posted in
The official React Native documentation can be found here.

Resizing base64 to percentage of original in react-native – React native

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?

Tags:

2

Answers


  1. 0

    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. 0

    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