[🐛] Bug Report Title - MessageContent not rendering newlines

[ShubhamPatilsd]

Issue

When entering new lines in chat, StreamChat doesn't render the message with those new lines. (String reported from server has new lines: "This is a test message\n\n\n\nAnd I am down here!"

import { View, Text } from "react-native";
import React from "react";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageProps,
  MessageSimple,
  useMessageContext,
} from "stream-chat-expo";
import { StreamChatGenerics } from "~/types";
import { CustomText } from "../CustomText";
import MessageReply from "./MessageReply";

const ChatMessage: React.FC<MessageProps<StreamChatGenerics>> = (props) => {
  const item = props.message.groupStyles
    ? (props.message?.groupStyles as string[])[0]
    : props.groupStyles;
  const isTopMessage = item === "single" || item === "top" || !!props.message?.quoted_message_id;

  return (
    <View>
      <Message
        {...props}
        MessageSimple={StyledMessage}
        showAvatar={
          !!props.message.quoted_message_id ||
          (!!props.message.quoted_message_id && !isTopMessage && !props.lastGroupMessage)
            ? true
            : !!props.message.quoted_message_id
            ? true
            : isTopMessage
        }
      />
    </View>
  );
};

export default ChatMessage;

const StyledMessage: React.FC<Partial<MessageProps<StreamChatGenerics>>> = (props) => {
  const { message } = useMessageContext();
  // if (!props.message) return null;
  console.log(JSON.stringify(message.text));
  const hasReactions = message?.latest_reactions && message.latest_reactions.length > 0;

  return (
    <View style={{ paddingTop: hasReactions ? 12 : 8 }}>
      <View className="-mb-2 pl-[14px]">
        {message.quoted_message_id && (
          <View className="">
            <View className=" top-1/2  h-4 w-[20px]  rounded-tl-lg border-l-2 border-t-2 border-core-300"></View>
            <View className="mb-3 ml-6">
              <MessageReply message={message} />
            </View>
          </View>
        )}
      </View>

      <MessageSimple
        {...props}
        MessageContent={(props) => <MessageContent {...props} />}
        MessageAvatar={(props) => (
          <View className="mr-[5px] h-full ">
            <MessageAvatar {...props} />
          </View>
        )}
      />
    </View>
  );
};

<MessageList<StreamChatGenerics>
          Message={ChatMessage}
          onThreadSelect={(thread) => {
            setThread(thread);
            router.push(`/${type === "GROUP" ? "group" : "dm"}/thread`);
          }}
        />

Screen.Recording.2024-01-03.at.12.10.21.mov

Steps to reproduce

Steps to reproduce the behavior:
Seems to be behavior across most StreamChat apps? I tried the Slack demo and it seems to be an issue as well.

Expected behavior

Streamchat renders the newline breaks without squashing them down.

Project Related Information

Customization

When changing MessageContent prop to render text using React Native's text component, newlines were rendered properly.

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:

{
  "name": "@dimension/expo",
  "version": "0.1.0",
  "main": "index.tsx",
  "scripts": {
    "clean": "git clean -xdf .expo .turbo node_modules",
    "dev": "pnpm with-env expo start --ios",
    "dev:android": "pnpm with-env expo start --android",
    "dev:ios": "pnpm with-env expo start --ios",
    "lint": "eslint .",
    "lint:fix": "pnpm lint --fix",
    "type-check": "tsc --noEmit",
    "with-env": "dotenv -e ../../.env --",
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "nuke-ios": "rm -rf ios/build; rm -rf ios/Pods; rm -rf ios/Podfile.lock"
  },
  "dependencies": {
    "@clerk/clerk-expo": "^0.16.4",
    "@emoji-mart/data": "^1.1.2",
    "@expo/metro-config": "^0.7.1",
    "@gorhom/bottom-sheet": "5.0.0-alpha.1",
    "@react-native-community/netinfo": "9.3.10",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@shopify/flash-list": "1.4.3",
    "@tanstack/react-query": "^4.29.5",
    "@trpc/client": "^10.34.0",
    "@trpc/react-query": "^10.34.0",
    "@trpc/server": "^10.34.0",
    "dotenv-cli": "^6.0.0",
    "expo": "~49.0.5",
    "expo-asset": "~8.10.1",
    "expo-auth-session": "~5.0.2",
    "expo-av": "~13.4.1",
    "expo-clipboard": "~4.3.0",
    "expo-constants": "~14.4.2",
    "expo-crypto": "~12.4.1",
    "expo-document-picker": "~11.5.4",
    "expo-file-system": "~15.4.2",
    "expo-haptics": "~12.4.0",
    "expo-image": "~1.3.2",
    "expo-image-manipulator": "~11.3.0",
    "expo-image-picker": "~14.3.2",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-media-library": "~15.4.1",
    "expo-router": "^2.0.0",
    "expo-secure-store": "~12.3.1",
    "expo-sharing": "~11.5.0",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "expo-web-browser": "~12.3.2",
    "lodash.debounce": "^4.0.8",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-email-link": "^1.14.5",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-popover-view": "^5.1.7",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.1",
    "react-native-svg": "13.9.0",
    "react-native-toast-message": "^2.1.6",
    "seamless-immutable": "^7.1.4",
    "stream-chat-expo": "^5.14.1",
    "superjson": "1.9.1",
    "tabler-icons-react-native": "^2.17.1",
    "tailwind-merge": "^1.12.0",
    "zustand": "^4.3.7"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/runtime": "^7.21.0",
    "@dimension/api": "*",
    "@dimension/db": "*",
    "@dimension/tailwind-config": "*",
    "@expo/config-plugins": "^6.0.1",
    "@types/babel__core": "^7.20.0",
    "@types/lodash.debounce": "^4.0.7",
    "@types/react": "^18.0.38",
    "@types/seamless-immutable": "^7.1.16",
    "@types/webpack-env": "^1.18.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.39.0",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.3"
  },
  "private": true
}

react-native info output:

System:
  OS: macOS 14.1.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 88.55 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.6.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.8.1
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.11.13.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: 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: 17.0.8.1
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: Not found

• 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
    Using iOS 17 with latest iPhone emulator

Additional context

Screenshots

Click To Expand

---

[Whycodex]

I would like to fix this. Can I please take up this issue?

[khushal87]

If you can sure please feel free to pick this up @Whycodex. You can always raise a PR and we can review.