FlatFeed image size issue

Question

I am working on a react native app that is using the FlatFeed component but the images when displayed in the feed are being cropped. How do I stop the image from being cropped?

I am posting activities with an image to the feed server side in Python using the following code:

client = stream.connect(STREAM_API_KEY, STREAM_KEY_SECRET)
user_feed = client.feed('timeline', user_id)
user_feed.add_activity({'actor': client.users.create_reference(user_id),'verb': 'post', 'object': message, 'image': front_image_url})

This is the react native code for the FlatFeed:

<StreamApp
            apiKey={apiKey}
            appId={appId}
            token={this.state.token}
          >
            <FlatFeed
              notify
              feedGroup="timeline"
              options={{
                limit: 10,
              }}
              notify
              navigation={this.props.navigation}
              Activity={(props) => (
                <TouchableOpacity
                  onPress={() => this._onPressActivity(props.activity)}
                >
                  <Activity
                    {...props}

                    Footer={
                      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <LikeButton reactionKind="heart" {...props} />
                      </View>
                    }
                  />
                </TouchableOpacity>
              )}
            />
          </StreamApp>

The actual image and what it looks like in the feed are here: This is how the FlatFeed displays the image

This is an example image that the feed is pulling in from a public S3 bucket

How do I stop the image from being cropped?

Any help much appreciated, thanks.

Answer 1

You may want to add resizeMode="contain" at Image component - https://github.com/GetStream/react-native-activity-feed/blob/master/src/components/Activity.js#L223.

But to add this prop, you will have to provide your own Content component to Activity component. So I suggest something like following (check the comments in code):

<StreamApp
    apiKey={apiKey}
    appId={appId}
    token={this.state.token}
>
    <FlatFeed
        notify
        feedGroup="timeline"
        options={{
          limit: 10,
        }}
        notify
        navigation={this.props.navigation}
        Activity={(props) => (
            <TouchableOpacity
                onPress={() => this._onPressActivity(props.activity)}
            >
                <Activity
                    {...props}
                    Footer={
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <LikeButton reactionKind="heart" {...props} />
                        </View>
                    }

                    // This is mostly copied from source of default `Content` component
                    // https://github.com/GetStream/react-native-activity-feed/blob/master/src/components/Activity.js#L193
                    Content={() => {
                        const width =
                        props.imageWidth != null
                            ? props.imageWidth
                            : Dimensions.get('window').width;
                        const { object, image, attachments } = props.activity;
                        let { text } = props.activity;
                        const { Card } = props;
                        if (text === undefined) {
                        if (typeof object === 'string') {
                            text = object;
                        } else {
                            text = '';
                        }
                        }
                        text = text.trim();

                        return (
                        <View>
                            {Boolean(text) && (
                            <View style={{
                                paddingBottom: 15,
                                paddingLeft: 15,
                                paddingRight: 15,
                            }}>
                                <Text>{this.renderText(text, props.activity)}</Text>
                            </View>
                            )}

                            {Boolean(image) && (
                                <Image
                                    style={{ width, height: width }}
                                    source={{ uri: image }}
                                    // Either `contain` or `stretch`, depending on your requirement
                                    resizeMode="contain"
                                />
                            )}

                            {attachments &&
                                attachments.images &&
                                attachments.images.length > 0 && (
                                    <Image
                                        style={{ width, height: width }}
                                        source={{ uri: attachments.images[0] }}
                                        // Either `contain` or `stretch`, depending on your requirement
                                        resizeMode="contain"
                                    />
                            )}
                            {attachments &&
                                attachments.og &&
                                Object.keys(attachments.og).length > 0 &&
                                <Card
                                    title={attachments.og.title}
                                    description={attachments.og.description}
                                    image={
                                        attachments.og.images && attachments.og.images.length > 0
                                            ? attachments.og.images[0].image
                                            : null
                                    }
                                    url={attachments.og.url}
                                    og={attachments.og} />
                            }
                        </View>
                        );                        
                    }}
                />
            </TouchableOpacity>
        )}
    />
</StreamApp>