[🐛] Bug Report Title - MessageContent not rendering newlines

ShubhamPatilsd commented 10 months ago

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`);
          }}
        />

https://github.com/GetStream/stream-chat-react-native/assets/55328098/d916c935-662d-4e8d-8d48-913bfeafb0f7

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`: ```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 - [x] **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 commented 5 months ago

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

khushal87 commented 4 months ago

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

GetStream / stream-chat-react-native