Skip to content

I need bubble to use the max device screen width,please #96

Description

@theBigGavin

非常感谢作者大大提供这么精美的对话控件,大大简化了我的APP开发。

Is your feature request related to a problem?

我在开发一个AI对话APP,大量的AI回复内容需要使用Markdown表现,其中带有一些表格。为了避免移动设备端的用户需要左右滑动才能够看全表格内容,我使用了 react-native-markdown-display ,利用了其将表格渲染为容器的宽度,而不是渲染为带有水平滚动条的表格。
但是如果bubble的宽度不能有效利用屏幕的宽度,那么这个表格显示的非常狭窄,用户体验并不好。(如下图所示)
Image

What solution would you suggest?

我希望达到的效果如下图所示
Image

Is there any additional solution to that?

目前,我通过调整 react-native-chat-ui/lib/components/Message/styles.js 中的设置实现了效果,但是这种打补丁的方法不够优雅,我希望未来的版本中能够提供实现这种效果的功能。

Code snippets 📝
If applicable, add code samples to help explain your feature.

diff --git a/node_modules/@flyerhq/react-native-chat-ui/lib/components/Message/styles.js b/node_modules/@flyerhq/react-native-chat-ui/lib/components/Message/styles.js
index 951a4c6..43f4be7 100644
--- a/node_modules/@flyerhq/react-native-chat-ui/lib/components/Message/styles.js
+++ b/node_modules/@flyerhq/react-native-chat-ui/lib/components/Message/styles.js
@@ -1,39 +1,40 @@
 import { StyleSheet } from 'react-native';
 const styles = ({ currentUserIsAuthor, message, messageWidth, roundBorder, theme, }) => StyleSheet.create({
-    container: {
-        alignItems: 'flex-end',
-        alignSelf: currentUserIsAuthor ? 'flex-end' : 'flex-start',
-        justifyContent: !currentUserIsAuthor ? 'flex-end' : 'flex-start',
-        flex: 1,
-        flexDirection: 'row',
-        marginBottom: message.type === 'dateHeader' ? 0 : 4 + message.offset,
-        marginLeft: 20,
-    },
-    contentContainer: {
-        backgroundColor: !currentUserIsAuthor || message.type === 'image'
-            ? theme.colors.secondary
-            : theme.colors.primary,
-        borderBottomLeftRadius: currentUserIsAuthor || roundBorder
-            ? theme.borders.messageBorderRadius
-            : 0,
-        borderBottomRightRadius: currentUserIsAuthor
-            ? roundBorder
-                ? theme.borders.messageBorderRadius
-                : 0
-            : theme.borders.messageBorderRadius,
-        borderColor: 'transparent',
-        borderRadius: theme.borders.messageBorderRadius,
-        overflow: 'hidden',
-    },
-    dateHeader: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 32,
-        marginTop: 16,
-    },
-    pressable: {
-        maxWidth: messageWidth,
-    },
+  container: {
+    alignItems: 'flex-end',
+    alignSelf: currentUserIsAuthor ? 'flex-end' : 'flex-start',
+    justifyContent: !currentUserIsAuthor ? 'flex-end' : 'flex-start',
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: message.type === 'dateHeader' ? 0 : 4 + message.offset,
+    marginLeft: 20,
+    marginRight: currentUserIsAuthor ? 0 : 20, // Added dynamic right margin
+  },
+  contentContainer: {
+    backgroundColor: !currentUserIsAuthor || message.type === 'image'
+      ? theme.colors.secondary
+      : theme.colors.primary,
+    borderBottomLeftRadius: currentUserIsAuthor || roundBorder
+      ? theme.borders.messageBorderRadius
+      : 0,
+    borderBottomRightRadius: currentUserIsAuthor
+      ? roundBorder
+        ? theme.borders.messageBorderRadius
+        : 0
+      : theme.borders.messageBorderRadius,
+    borderColor: 'transparent',
+    borderRadius: theme.borders.messageBorderRadius,
+    overflow: 'hidden',
+  },
+  dateHeader: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 32,
+    marginTop: 16,
+  },
+  pressable: {
+    // maxWidth: messageWidth, // Removed library constraint to allow bubble wrapper to expand
+  },
 });
 export default styles;
 //# sourceMappingURL=styles.js.map
\ No newline at end of file

Related issues/PRs

目前我没有看到有相关的issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions