[🐛] Maximum update depth exceeded error happening when attaching images, Android Only

grid-dres commented 12 months ago

Issue

When using the stream-chat-react-native library in my React Native project, I encounter a "Maximum update depth exceeded" error specifically on Android devices when trying to attach an image to a chat message. This issue does not occur in the sample repository of stream-chat-react-native, nor does it happen on iOS devices in my project. The error is triggered after selecting an image from the camera roll, and it displays in the Chat Input for a moment with a reloading icon, indicating it's loading the image.

Sometimes the image is removed from the chat input automatically. Sometimes the image is left alone, but continues showing the reloading icons, and other times the app freezes with the above error message.

Code

import React from 'react';
import { View, StyleSheet, Platform, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
  Channel,
  Chat,
  MessageList,
  OverlayProvider as ChatOverlayProvider,
  MessageInput,
} from 'stream-chat-react-native';
import { WIDTH } from '~Services/Const';
import { getChatTheme, CHAT_BG_BASE } from './ChatTheme';
import { ChatLoadingSkeleton } from './ChatComponents/Skeleton';

const WrapperStyles = StyleSheet.create({
  wrapperContainer: {
    width: WIDTH,
    flex: 1,
    backgroundColor: CHAT_BG_BASE,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  chatBoxWrapper: {
    width: WIDTH,
    flex: 1,
  },
  errorText: {
    color: 'white',
  },
});

interface WrapperProps {
  children: React.ReactNode;
  keyboardVisible?: boolean;
}

const Wrapper = ({ keyboardVisible, children }: WrapperProps) => {
  const insets = useSafeAreaInsets();
  return (
    <View
      style={[
        WrapperStyles.wrapperContainer,
        !keyboardVisible && {
          marginBottom: insets.bottom > 0 ? 15 : 0,
        },
      ]}>
      {children}
    </View>
  );
};

const CHAT_THEME = getChatTheme();

export function ChatContainer({
  chatInit,
  chatError,
  chatClient,
  channel,
  panelVisible,
}) {
  if (!chatInit) {
    return (
      <Wrapper>
        <ChatLoadingSkeleton />
      </Wrapper>
    );
  } else if (chatError || !chatClient) {
    return (
      <Wrapper>
        <Text style={WrapperStyles.errorText}>Error Loading Chat</Text>
      </Wrapper>
    );
  }

  if (!channel || !chatClient) return null;

  return (
    <Wrapper keyboardVisible={panelVisible}>
      <ChatOverlayProvider
        bottomInset={0}
        topInset={0}
        value={{ style: CHAT_THEME }}>
        <Chat client={chatClient}>
          <Channel
            channel={channel}
            keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}>
            <View style={[WrapperStyles.chatBoxWrapper]}>
              {panelVisible && <MessageList />}
              <MessageInput />
            </View>
          </Channel>
        </Chat>
      </ChatOverlayProvider>
    </Wrapper>
  );
}

Steps to reproduce

Steps to reproduce the behavior:

Open the chat in the Android app. Try to attach an image to a chat message. Select an image from the camera roll. Observe the app throwing a "Maximum update depth exceeded" error.

Expected behavior

The expected behavior is that after selecting an image from the camera roll, it should be attached to the chat message without causing any errors, similar to how it works on iOS and in the sample repository.

Project Related Information

Customization

Click To Expand

```typescript jsx # 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`: ```json "dependencies": { "@react-native-camera-roll/camera-roll": "^5.3.1", "@react-native-clipboard/clipboard": "1.11.1", "@react-native-community/checkbox": "0.5.16", "@react-native-community/hooks": "2.8.1", "@react-native-community/netinfo": "11.1.0", "@react-native-community/push-notification-ios": "1.10.1", "@react-navigation/bottom-tabs": "6.5.8", "@react-navigation/drawer": "6.6.3", "@react-navigation/material-top-tabs": "6.6.3", "@react-navigation/native": "6.1.7", "@react-navigation/native-stack": "6.9.13", "@stream-io/flat-list-mvcp": "0.10.3", "react": "18.2.0", "react-dom": "17.0.2", "react-native": "0.72.7", "react-native-document-picker": "9.0.1", "react-native-fast-image": "8.6.3", "react-native-fs": "2.20.0", "react-native-gesture-handler": "2.13.4", "react-native-haptic-feedback": "1.13.0", "react-native-image-crop-picker": "0.39.0", "react-native-image-resizer": "1.4.5", "react-native-permissions": "3.6.1", "react-native-push-notification": "8.1.1", "react-native-reanimated": "3.5.4", "react-native-safe-area-context": "4.7.4", "react-native-screens": "3.27.0", "react-native-svg": "14.0.0", "react-native-svg-charts": "5.4.0", "react-native-video": "5.2.1", "react-native-video-cache": "2.7.4", "react-native-webview": "11.23.0", "react-redux": "7.2.1", "redux": "4.0.4", "redux-flipper": "2.0.2", "redux-thunk": "2.3.0", "stream-chat": "8.14.2", "stream-chat-react-native": "5.21.0" }, ``` (fyi, we have a lot of packages, i removed the ones i thought were irrelevant) **`react-native info` output:** ``` System: OS: macOS 14.1.1 CPU: (8) x64 Apple M1 Memory: 25.04 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: ~/.nvm/versions/node/v18.17.1/bin/node Yarn: version: 1.22.19 path: /opt/homebrew/bin/yarn npm: version: 9.6.7 path: ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: version: 2023.11.06.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.13.0 path: /opt/homebrew/opt/ruby@2.7/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.0 - iOS 17.0 - macOS 14.0 - tvOS 17.0 - watchOS 10.0 Android SDK: API Levels: - "28" - "29" - "30" - "31" - "32" - "33" - "34" Build Tools: - 29.0.2 - 30.0.2 - 30.0.3 - 31.0.0 - 32.0.0 - 32.1.0 - 33.0.0 System Images: - android-28 | Google APIs ARM 64 v8a - android-29 | Google APIs ARM 64 v8a - android-29 | Google Play ARM 64 v8a - android-32 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: version: 15.0.1/15A507 path: /usr/bin/xcodebuild Languages: Java: version: 11.0.11 path: /usr/bin/javac Ruby: version: 2.7.8 path: /opt/homebrew/opt/ruby@2.7/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.7 wanted: 0.72.7 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false ``` - **Platform that you're experiencing the issue on**: - [ ] iOS - [x] Android (simulator and physical device -pixel 6a) - [ ] **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:** - `5.21.0` - Device: Pixel 6a - [x] I am using a physical device - OS version: Android 14 - Emulator: Pixel 7 Pro, API 29 - [x] I am using a physical device - OS version: Android 10

Additional context

I'm in the process of upgrading react native versions v0.69.x to v0.72.7

build.gradle

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 23
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
        kotlinVersion = "1.7.0"
        googlePlayServicesVersion = "+"
    }

app/build.gradle

implementation project(':react-native-fs')

Screenshots

Click To Expand

khushal87 commented 11 months ago

Hey @grid-dres, can you share your getChatTheme function? Generally this kind of error happens when you execute a function inside the React Component although its hard to guess it for your case and we will have to deep dive as we could not reproduce this issue on our sample apps with no customizations.

grid-dres commented 11 months ago

@khushal87 here you go

import { Platform } from 'react-native';
import { DeepPartial, Theme, vw, ReactionData } from 'stream-chat-react-native';
import CommonStyle from '~Styles/CommonStyle';
import {
  PooIcon,
  ThumbsUpIcon,
  ThumbsDownIcon,
  JoyIcon,
  ScreamIcon,
  LoveIcon,
  MadIcon,
} from './ChatComponents/Icons';

const CHAT_TEXT_STYLE = {
  ...CommonStyle.Fonts.Nudista,
  fontSize: 16,
  lineHeight: 21,
  color: CommonStyle.Colors.Grey,
};

export const SYSTEM_MESSAGE_STYLE = {
  ...CommonStyle.Fonts.Nudista,
  fontSize: 12,
  color: CommonStyle.Colors.GrayGreen,
};

export const CHAT_CONTAINER_MARGIN = 15;
export const MESSAGE_BOX_RADIUS = 10;
export const MESSAGE_BOX_PADDING = 10;
export const BASE_AVATAR_SIZE = 36;
export const SMALL_AVATAR_SIZE = 15;
export const AVATAR_RIGHT_PADDING = 10;
export const MESSAGE_BASE_COLOR = 'transparent';
export const CHAT_BG_BASE = CommonStyle.Colors.Navy;
export const CHAT_SKELETON_BG = CommonStyle.Colors.MBGDarkest;
const MAX_WIDTH = vw(100) - CHAT_CONTAINER_MARGIN - MESSAGE_BOX_PADDING * 2;

export const REACTION_COLOR_MAP = {
  love: CommonStyle.Colors.ARed,
  like: CommonStyle.Colors.Blue,
  sad: CommonStyle.Colors.MBGLightest,
  haha: CommonStyle.Colors.AGreenLighter,
};
export const REACTION_DATA: ReactionData[] = [
  {
    Icon: LoveIcon,
    type: 'love',
  },
  {
    Icon: ThumbsUpIcon,
    type: 'like',
  },
  {
    Icon: ThumbsDownIcon,
    type: 'sad',
  },
  {
    Icon: JoyIcon,
    type: 'haha',
  },
  {
    Icon: ScreamIcon,
    type: 'wow',
  },
  {
    Icon: MadIcon,
    type: 'mad',
  },
  {
    Icon: PooIcon,
    type: 'poo',
  },
];

export const CHAT_MESSAGE_WIDTH =
  MAX_WIDTH - AVATAR_RIGHT_PADDING - BASE_AVATAR_SIZE;
export const REACTION_HEIGHT = 25;
export const REACTION_WIDTH = 45;
export const REACTION_ICON_SIZE = 14;
export const REACTION_BORDER_RADIUS = REACTION_HEIGHT / 2;
const INPUT_HEIGHT = 38;
export const CHAT_THEME: DeepPartial<Theme> = {
  attachmentPicker: {
    imageOverlay: {
      backgroundColor: CommonStyle.Colors.MBGDarkestOpaque,
    },
    imageOverlaySelectedComponent: {
      check: {
        marginRight: 3,
        marginTop: 3,
      },
    },
  },
  avatar: {
    BASE_AVATAR_SIZE: BASE_AVATAR_SIZE,
  },
  colors: {
    accent_blue: CommonStyle.Colors.Blue,
    bg_gradient_start: 'transparent',
    black: CommonStyle.Colors.Grey,
    blue_alice: CommonStyle.Colors.MBGLighter,
    overlay: CommonStyle.Colors.MBGDarkest,
    grey: CommonStyle.Colors.GrayGreen,
    grey_dark: CommonStyle.Colors.GrayGreen,
    targetedMessageBackground: CommonStyle.Colors.MBGDarkest,
    white: CommonStyle.Colors.MBGDark,
    white_smoke: CHAT_BG_BASE,
    white_snow: MESSAGE_BASE_COLOR,
  },
  imageGallery: {
    grid: {
      handle: {
        backgroundColor: CommonStyle.Colors.MBGDarker,
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
        borderWidth: 0,
      },
      contentContainer: {
        backgroundColor: CommonStyle.Colors.MBGDarker,
      },
      handleText: {
        ...CHAT_TEXT_STYLE,
        color: CommonStyle.Colors.Blue,
      },
    },
    header: {
      container: {
        backgroundColor: CommonStyle.Colors.DarkestNavy,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
      },
      usernameText: {
        ...CommonStyle.Fonts.UniviaBold,
        fontSize: 12,
        color: CommonStyle.Colors.Blue,
      },
      dateText: {
        ...CommonStyle.Fonts.Nudista,
        fontSize: 12,
        color: CommonStyle.Colors.White,
      },
    },
    footer: {
      container: {
        backgroundColor: CommonStyle.Colors.DarkestNavy,
      },
      imageCountText: {
        ...CommonStyle.Fonts.NudistaBold,
        color: CommonStyle.Colors.Blue,
        fontSize: 14,
      },
      innerContainer: {
        backgroundColor: CommonStyle.Colors.DarkestNavy,
      },
      leftContainer: {
        backgroundColor: CommonStyle.Colors.DarkestNavy,
        marginLeft: 0,
        paddingLeft: 15,
      },
      rightContainer: {
        backgroundColor: CommonStyle.Colors.DarkestNavy,
        marginRight: 0,
        paddingRight: 15,
      },
      centerContainer: {
        backgroundColor: CommonStyle.Colors.DarkestNavy,
      },
    },
  },
  messageList: {
    container: {
      backgroundColor: CHAT_BG_BASE,
    },
    scrollToBottomButton: {
      container: {
        backgroundColor: CommonStyle.Colors.Blue,
      },
    },
  },
  loadingIndicator: {
    container: {
      backgroundColor: CHAT_BG_BASE,
    },
    loadingText: {
      ...CHAT_TEXT_STYLE,
      fontSize: 16,
      color: CommonStyle.Colors.White,
    },
  },
  messageInput: {
    attachmentSelectionBar: {
      backgroundColor: CommonStyle.Colors.MBGDarkest,
    },
    container: {
      backgroundColor: CHAT_BG_BASE,
      borderColor: CHAT_BG_BASE,
    },
    editingStateHeader: {
      editingBoxHeaderTitle: {
        ...CommonStyle.Fonts.Nudista,
        textTransform: 'uppercase',
        fontSize: 12,
        color: CommonStyle.Colors.Blue,
      },
      editingBoxHeader: {
        borderColor: CommonStyle.Colors.MBGDarkest,
        paddingTop: 10,
        borderTopWidth: 1,
      },
    },
    giphyContainer: {
      backgroundColor: CommonStyle.Colors.Darkest,
    },
    giphyText: {
      color: CommonStyle.Colors.White,
    },
    imageUploadPreview: {
      dismiss: {
        right: 3,
        top: 3,
        backgroundColor: CommonStyle.Colors.WarningRed,
      },
    },
    inputBox: {
      color: CommonStyle.Colors.Grey,
    },
    inputBoxContainer: {
      backgroundColor: CommonStyle.Colors.MBGDark,
      borderColor: MESSAGE_BASE_COLOR,
      borderRadius: INPUT_HEIGHT / 2,
      minHeight: INPUT_HEIGHT,
      paddingVertical: 8,
      alignItems: 'center',
      justifyContent: 'center',
    },
    replyContainer: {
      width: '100%',
    },
    suggestions: {
      header: {
        padding: 0,
      },
      command: {
        title: {
          color: CommonStyle.Colors.White,
        },
      },
    },
    suggestionsListContainer: {
      flatlist: {
        borderRadius: 10,
        backgroundColor: CommonStyle.Colors.MBGDarkest,
        borderColor: CommonStyle.Colors.MBGDark,
        borderWidth: 1,
        overflow: 'hidden',
      },
    },
  },
  messageSimple: {
    container: {
      marginTop: 0,
    },
    card: {
      container: {
        width: MAX_WIDTH,
      },
    },
    avatarWrapper: {},
    actions: {
      container: {
        width: 400,
      },
      button: {
        backgroundColor: CommonStyle.Colors.Pink,
      },
      buttonText: {
        color: CommonStyle.Colors.Blue,
        ...CommonStyle.Fonts.UniviaBold,
      },
    },
    content: {
      container: {
        width: CHAT_MESSAGE_WIDTH,
        paddingTop: 0,
        paddingBottom: 0,
        backgroundColor: MESSAGE_BASE_COLOR,
        borderWidth: 0,
      },
      containerInner: {
        width: MAX_WIDTH - MESSAGE_BOX_PADDING * 2 - 1,
        backgroundColor: 'transparent',
        borderWidth: 0,
        paddingHorizontal: 0,
        borderRadius: 0,
        borderTopRightRadius: 0,
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
      },
      deletedContainerInner: {
        backgroundColor: 'transparent',
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        borderWidth: 0,
      },
      deletedText: {
        em: {
          ...SYSTEM_MESSAGE_STYLE,
        },
      },
      markdown: {
        view: {
          width: CHAT_MESSAGE_WIDTH,
          borderRadius: 0,
        },
        text: {
          ...CHAT_TEXT_STYLE,
        },
        paragraph: {
          marginTop: 3,
          marginBottom: 3,
        },
        paragraphCenter: {
          marginTop: 3,
          marginBottom: 3,
        },
        mentions: {
          ...CHAT_TEXT_STYLE,
          ...CommonStyle.Fonts.NudistaBold,
          color: CommonStyle.Colors.Blue,
        },
      },
      metaText: {
        ...CommonStyle.Fonts.UniviaBold,
        color: CommonStyle.Colors.MutedNavy,
        fontSize: 10,
        top: Platform.OS === 'ios' ? 3 : 0,
      },
      textContainer: {
        width: MAX_WIDTH,
        maxWidth: MAX_WIDTH,
        paddingHorizontal: 0,
        paddingVertical: 0,
        paddingTop: 0,
        paddingBottom: 0,
        borderWidth: 0,
        borderRadius: 0,

        onlyEmojiMarkdown: {
          text: {
            fontSize: 30,
          },
        },
      },
    },
    gallery: {
      // -2 because of the 2px border
      width: MAX_WIDTH - 2,
      image: {
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
      },
      galleryContainer: {
        marginVertical: 8,
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderBottomLeftRadius: 10,
      },
    },
    giphy: {
      container: {
        width: MAX_WIDTH - CHAT_CONTAINER_MARGIN * 2 - AVATAR_RIGHT_PADDING,
        marginBottom: 10,
        paddingVertical: 0,
        paddingHorizontal: 0,
        marginVertical: 0,
        marginHorizontal: 0,
        backgroundColor: 'transparent',
      },
      giphyContainer: {
        backgroundColor: CommonStyle.Colors.White,
        opacity: 0.2,
      },
      giphy: {
        paddingVertical: 0,
        marginVertical: 0,
        paddingTop: 0,
        marginTop: 0,
        width: MAX_WIDTH - CHAT_CONTAINER_MARGIN * 2 - AVATAR_RIGHT_PADDING,
        maxWidth: MAX_WIDTH - CHAT_CONTAINER_MARGIN * 2 - AVATAR_RIGHT_PADDING,
        alignSelf: 'flex-start',
        borderRadius: 10,
      },
      giphyMask: {
        opacity: 0,
      },
      giphyHeaderText: {
        ...CommonStyle.Fonts.Univia,
        fontSize: 12,
        color: CommonStyle.Colors.White,
        textTransform: 'uppercase',
      },
      giphyHeaderTitle: {
        ...CHAT_TEXT_STYLE,
        ...CommonStyle.Fonts.UniviaBold,
        color: CommonStyle.Colors.White,
        fontSize: 12,
        marginLeft: 3,
      },
      giphyText: {
        ...CHAT_TEXT_STYLE,
        ...CommonStyle.Fonts.UniviaBold,
        color: CommonStyle.Colors.White,
      },
      selectionContainer: {
        marginVertical: 8,
        borderTopLeftRadius: 5,
        borderTopRightRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5,
        borderWidth: 0,
      },
      buttonContainer: {
        marginTop: 8,
        borderColor: CommonStyle.Colors.MBGDarker,
      },
      send: {
        ...CHAT_TEXT_STYLE,
        fontSize: 12,
        color: CommonStyle.Colors.Blue,
        textTransform: 'uppercase',
      },
      cancel: {
        ...CHAT_TEXT_STYLE,
        fontSize: 12,
        color: CommonStyle.Colors.ARed,
        textTransform: 'uppercase',
      },
      shuffle: {
        ...CHAT_TEXT_STYLE,
        fontSize: 12,
        color: CommonStyle.Colors.GrayGreen,
        textTransform: 'uppercase',
      },
    },
    pinnedHeader: {
      container: {
        marginBottom: 0,
        marginTop: 10,
        justifyContent: 'flex-start',
        alignItems: 'center',
        height: 15,
      },
      label: {
        ...SYSTEM_MESSAGE_STYLE,
        color: CommonStyle.Colors.GrayGreen,
        marginTop: -5,
      },
    },
    reactionList: {
      middleIcon: {},
      radius: 2, // not recommended to change this
      reactionBubble: {},
      reactionSize: 24,
      strokeSize: 1, // not recommended to change this
    },
    status: {
      checkAllIcon: {
        width: 0,
        height: 0,
      },
      checkIcon: {
        width: 0,
        height: 0,
      },
    },
  },
  overlay: {
    reactions: {
      avatarSize: BASE_AVATAR_SIZE,
      container: {
        backgroundColor: CommonStyle.Colors.MBGLighter,
      },
      avatarName: {
        height: 0,
        width: 0,
      },
      title: {
        ...CHAT_TEXT_STYLE,
      },
    },
    reactionsList: {
      reactionList: {
        width: MAX_WIDTH,
        backgroundColor: CommonStyle.Colors.MBGLighter,
      },
      reactionSize: 20,
      reaction: {
        // backgroundColor: CommonStyle.Colors.MBGLighter,
        // width: REACTION_WIDTH,
        // height: REACTION_HEIGHT,
        // borderRadius: REACTION_WIDTH / 2,
      },
    },
  },
  reply: {
    container: {
      // width: CHAT_MESSAGE_WIDTH - MESSAGE_BOX_PADDING * 2,
      paddingLeft: 0,
    },
    textContainer: {
      borderRadius: 0,
    },
    messageContainer: {
      borderWidth: 0,
      borderTopRightRadius: 0,
      borderTopLeftRadius: 0,
      borderBottomRightRadius: 0,
      borderBottomLeftRadius: 0,
      backgroundColor: 'transparent',
    },
    textContainer: {
      paddingHorizontal: 0,
    },
    imageAttachment: {
      marginRight: 10,
    },
    markdownStyles: {
      view: {
        borderRadius: 0,
      },
      text: {
        ...CHAT_TEXT_STYLE,
        fontSize: 14,
        lineHeight: 16,
        color: CommonStyle.Colors.Grey,
      },
      mentions: {
        ...CHAT_TEXT_STYLE,
        ...CommonStyle.Fonts.NudistaBold,
        fontSize: 14,
        color: CommonStyle.Colors.Blue,
      },
    },
  },
  inlineDateSeparator: {
    container: {
      display: 'none',
    },
  },
};

export const updateTheme = (theme: DeepPartial<Theme>) => {
  return {
    ...theme,
  };
};

export const getChatTheme = () => {
  return updateTheme(CHAT_THEME);
};

khushal87 commented 11 months ago

Hey, @grid-dres, I tried your code but was not able to reproduce it. Can you please share with us a reproducible repro with your code so that we can test it on our side?

khushal87 commented 11 months ago

Alternatively you can also share your CommonStyle file, may be I am missing something there.

khushal87 commented 11 months ago

Closing this issue for long time of inactivity. Please try out the latest release and see if its still a problem and feel free to reopen the issue if the problem persists.

GetStream / stream-chat-react-native