Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Responsive image in React Native

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.

Tags:

2

Answers


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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search