fix: using borderTopLeft/Right radius coming from the theme

Author: vanGalilea

examples/TypeScriptMessaging/useStreamChatTheme.ts

@@ -14,49 +14,49 @@ export const useStreamChatTheme = () => {
     colors:
       colorScheme === 'dark'
         ? {
-          accent_blue: '#005FFF',
-          accent_green: '#20E070',
-          accent_red: '#FF3742',
-          bg_gradient_end: '#101214',
-          bg_gradient_start: '#070A0D',
-          black: '#FFFFFF',
-          blue_alice: '#00193D',
-          border: '#141924',
-          grey: '#7A7A7A',
-          grey_gainsboro: '#2D2F2F',
-          grey_whisper: '#1C1E22',
-          icon_background: '#FFFFFF',
-          modal_shadow: '#000000',
-          overlay: '#FFFFFFCC', // CC = 80% opacity
-          shadow_icon: '#00000080', // 80 = 50% opacity
-          targetedMessageBackground: '#302D22',
-          transparent: 'transparent',
-          white: '#101418',
-          white_smoke: '#13151B',
-          white_snow: '#070A0D',
-        }
+            accent_blue: '#005FFF',
+            accent_green: '#20E070',
+            accent_red: '#FF3742',
+            bg_gradient_end: '#101214',
+            bg_gradient_start: '#070A0D',
+            black: '#FFFFFF',
+            blue_alice: '#00193D',
+            border: '#141924',
+            grey: '#7A7A7A',
+            grey_gainsboro: '#2D2F2F',
+            grey_whisper: '#1C1E22',
+            icon_background: '#FFFFFF',
+            modal_shadow: '#000000',
+            overlay: '#FFFFFFCC', // CC = 80% opacity
+            shadow_icon: '#00000080', // 80 = 50% opacity
+            targetedMessageBackground: '#302D22',
+            transparent: 'transparent',
+            white: '#101418',
+            white_smoke: '#13151B',
+            white_snow: '#070A0D',
+          }
         : {
-          accent_blue: '#005FFF',
-          accent_green: '#20E070',
-          accent_red: '#FF3742',
-          bg_gradient_end: '#F7F7F7',
-          bg_gradient_start: '#FCFCFC',
-          black: '#000000',
-          blue_alice: '#E9F2FF',
-          border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
-          grey: '#7A7A7A',
-          grey_gainsboro: '#DBDBDB',
-          grey_whisper: '#ECEBEB',
-          icon_background: '#FFFFFF',
-          modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
-          overlay: '#00000099', // 99 = 60% opacity
-          shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
-          targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
-          transparent: 'transparent',
-          white: '#FFFFFF',
-          white_smoke: '#F2F2F2',
-          white_snow: '#FCFCFC',
-        },
+            accent_blue: '#005FFF',
+            accent_green: '#20E070',
+            accent_red: '#FF3742',
+            bg_gradient_end: '#F7F7F7',
+            bg_gradient_start: '#FCFCFC',
+            black: '#000000',
+            blue_alice: '#E9F2FF',
+            border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
+            grey: '#7A7A7A',
+            grey_gainsboro: '#DBDBDB',
+            grey_whisper: '#ECEBEB',
+            icon_background: '#FFFFFF',
+            modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
+            overlay: '#00000099', // 99 = 60% opacity
+            shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
+            targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
+            transparent: 'transparent',
+            white: '#FFFFFF',
+            white_smoke: '#F2F2F2',
+            white_snow: '#FCFCFC',
+          },
     spinner: {
       height: 15,
       width: 15,

examples/TypeScriptMessaging/yarn.lock

@@ -6861,10 +6861,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=
 
-stream-chat-react-native-core@4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-4.3.1.tgz#bc53a044c45b60f6bd3feb425e70100d077cc064"
-  integrity sha512-2DZO89EyDtXtmc5MhivD1kOOU6aklK/rgZVvo4RZ15419VlpVFqMjswvFAcF41z2ZJujP86cSSKg5YMhNy7uZw==
+stream-chat-react-native-core@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-4.6.0.tgz#444a88017c74e0b0ac0c8f030925320175c61934"
+  integrity sha512-065qcp5Bv0t6TFN+UIFZlaoUTh2aXbvwkDLWAJInWYUKuMFmZkYlSfqdw+XBN9tMVlmuxoL06jltVru8HpP/NQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.1.5"

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -143,7 +143,16 @@ const MessageContentWithContext = <
       colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
-          container: { borderRadius, borderRadiusL, borderRadiusS, ...container },
+          container: {
+            borderBottomLeftRadius,
+            borderBottomRightRadius,
+            borderRadius,
+            borderRadiusL,
+            borderRadiusS,
+            borderTopLeftRadius,
+            borderTopRightRadius,
+            ...container
+          },
           containerInner,
           errorContainer,
           errorIcon,
@@ -313,12 +322,20 @@ const MessageContentWithContext = <
             styles.containerInner,
             {
               backgroundColor,
-              borderBottomLeftRadius: applyBorderRadius('left_bottom', 'left_single'),
-              borderBottomRightRadius: applyBorderRadius('right_bottom', 'right_single'),
+              borderBottomLeftRadius:
+                borderBottomLeftRadius !== undefined
+                  ? borderBottomLeftRadius
+                  : applyBorderRadius('left_bottom', 'left_single'),
+              borderBottomRightRadius:
+                borderBottomRightRadius !== undefined
+                  ? borderBottomRightRadius
+                  : applyBorderRadius('right_bottom', 'right_single'),
               borderColor: isBorderColor ? backgroundColor : grey_whisper,
               borderRadius,
-              borderTopLeftRadius: applyBorderRadius('left_top', 'right_single'),
-              borderTopRightRadius: applyBorderRadius('right_top', 'right_single'),
+              borderTopLeftRadius:
+                borderTopLeftRadius !== undefined ? borderTopLeftRadius : borderRadiusL,
+              borderTopRightRadius:
+                borderTopRightRadius !== undefined ? borderTopRightRadius : borderRadiusL,
             },
             noBorder ? { borderWidth: 0 } : {},
             containerInner,