2

I fetch some images from Facebook API and I want to display them responsive, to be 100% width and auto height. The problem seems to be that React Native crops my image.

I tried these solutions:

Solution 1

Solution 2

Also, I have tried to use react-native-auto-height-image and set it's width to the screen's one.

Actual code:

<TouchableOpacity onPress={() => Linking.openURL(post.url)}>
      <Card style={{ flex: 1 }}>
        <CardItem>
          <Left>
            <Thumbnail source={ThumbnailImage} />
            <Body>
              <Text>My text</Text>
              <Text note>{createdTime}</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem>
          <Body>
            <AutoHeightImage
              width={Dimensions.get('window').width - 35}
              source={{ uri: post.media.image.src }}
            />
            <Text style={{ marginTop: 10 }}>{post.description}</Text>
          </Body>
        </CardItem>
      </Card>
    </TouchableOpacity>

PS: Application is using Native Base as a UI library.

Grigore Budac
  • 1,351
  • 2
  • 15
  • 27

2 Answers2

2

This problem can easily solve by using paddingTop, width, and position. Just try below code.

<View style={{width:'100%',paddingTop:'100%'}}>
  <Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
 </View>

In the above code, change width and paddingTop as per the required image box size.

Nishant Singh
  • 477
  • 4
  • 8
0

I think that to solve this problem is simple, you could use Dimensions to set the width and height of the image with the width of the screen, like bellow:

import { Image, Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width;

<View>
    <Image source={...} style={{ width: screenWidth, height: screenWidth }} />
</View>

https://snack.expo.io/ryuCvY8cX

Mathias Silva
  • 61
  • 5