[🐛] EXPO - Image not filling chat bubble

[kevingaulin]

Issue

Describe your issue here

When i add a image attachment to a conversation, the image is not filling the bubble like the sample app.

Steps to reproduce

Steps to reproduce the behavior:

I use the same code for the channel screen as the sample app

import { useRouter } from "expo-router";
import React, { useEffect } from "react";
import { StyleSheet, View } from "react-native";
import {
  Channel,
  MessageInput,
  MessageList,
  useAttachmentPickerContext,
  useTheme,
} from "stream-chat-expo";

import { ChannelHeader } from "@/components/chat/channel/ChannelHeader";
import { Spinner } from "@/components/ui/spinner";
import { useStreamChat } from "@/hooks/useStreamChat";
import { useHeaderHeight } from "@react-navigation/elements";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ChannelScreen() {
  const router = useRouter();
  const { setThread, channel } = useStreamChat();
  const { setTopInset } = useAttachmentPickerContext();
  const headerHeight = useHeaderHeight();
  const { bottom } = useSafeAreaInsets();
  const {
    theme: {
      colors: { white },
    },
  } = useTheme();

  useEffect(() => {
    setTopInset(headerHeight);
  }, [headerHeight, setTopInset]);

  if (!channel) {
    return (
      <View
        style={{
          flex: 1,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Spinner />
      </View>
    );
  }

  return (
    <View
      style={[styles.flex, { backgroundColor: white, paddingBottom: bottom }]}
    >
      <Channel
        audioRecordingEnabled={true}
        channel={channel}
        keyboardVerticalOffset={headerHeight}
      >
        <ChannelHeader channel={channel}></ChannelHeader>

        <MessageList
          onThreadSelect={(thread) => {
            setThread(thread);
            router.push(`/channel/${channel.cid}/thread/${thread!.cid}`);
          }}
        />
        <MessageInput />
      </Channel>
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
});

Expected behavior

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---

[kevingaulin]

I found that i use nativewind and it's cause this issue. Some reset style maybe causing it.

here a reproductible example https://github.com/kevingaulin/stream-nativewind

[isekovanic]

Hi there @kevingaulin ,

Thanks for reporting this ! It appears that the default nativewind presets don't particularly play well with our gallery theme. The likely cause for this is the fact that the library itself adds flex wrappers around components in certain scenarios (a hint for this would the the Component.Interop wrappers it has around most RN primitives) and not having flex: 1 in some instances disallows the deeply nested Gallery components to fully expand (you can think of this as having a flex chain in the hierarchy and it being broken somewhere, hence the views having trouble stretching).

In your minimal reproducible sample, I was able to resolve this by adding the following to the theme:

messageSimple: {
      gallery: {
        thumbnail: { flex: 1 },
        galleryItemColumn: { flex: 1 }
      },
    }

I will not add this as a fix in the SDK for the time being, as it is a breaking change layout wise and it might confuse our already existing integrations, depending on how they're styled/themed. We'll consider perhaps adding this in V7 and pointing it out in the docs.

For now however, feel free to play around with the styles and add the aforementioned theme override.

I'll close this ticket in the meantime. Cheers !