stream-chat-react-native-core 8.4.1-beta.1 → 8.4.1-beta.3

package/src/components/MessageInput/MessageInput.tsx

@@ -70,8 +70,6 @@ const styles = StyleSheet.create({
   autoCompleteInputContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    paddingLeft: 16,
-    paddingRight: 16,
   },
   composerContainer: {
     alignItems: 'center',
@@ -92,7 +90,7 @@ const styles = StyleSheet.create({
   optionsContainer: {
     flexDirection: 'row',
   },
-  replyContainer: { paddingBottom: 12, paddingHorizontal: 8 },
+  replyContainer: { paddingBottom: 0, paddingHorizontal: 8, paddingTop: 8 },
   sendButtonContainer: {},
   suggestionsListContainer: {
     position: 'absolute',
@@ -494,7 +492,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                       styles.inputBoxContainer,
                       {
                         borderColor: grey_whisper,
-                        paddingVertical: command ? 8 : 12,
                       },
                       inputBoxContainer,
                       isFocused ? focusedInputBoxContainer : null,
@@ -505,6 +502,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         <Reply />
                       </View>
                     )}
+
                     <AttachmentUploadPreviewList />
                     {command ? (
                       <CommandInput disabled={!isOnline} />

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -32,7 +32,7 @@ export const MessageUserReactionsItem = ({
   const { id, name, type } = reaction;
   const {
     theme: {
-      colors: { black, grey_gainsboro, white },
+      colors: { accent_blue, black, grey, grey_gainsboro, light_blue, white },
       messageMenu: {
         userReactions: {
           avatarContainer,
@@ -40,13 +40,13 @@ export const MessageUserReactionsItem = ({
           avatarName,
           avatarNameContainer,
           avatarSize,
-          filledBackgroundColor,
-          iconFilledColor,
-          iconUnFilledColor,
+          filledBackgroundColor = light_blue,
+          iconFilledColor = accent_blue,
+          iconUnFilledColor = grey,
           radius,
           reactionBubbleBackground,
           reactionBubbleBorderRadius,
-          unfilledBackgroundColor,
+          unfilledBackgroundColor = grey_gainsboro,
         },
       },
     },

package/src/components/MessageMenu/ReactionButton.tsx

@@ -29,12 +29,13 @@ export const ReactionButton = (props: ReactionButtonProps) => {
   const { Icon, onPress, selected, type } = props;
   const {
     theme: {
+      colors: { light_blue, accent_blue, white, grey },
       messageMenu: {
         reactionButton: {
-          filledBackgroundColor,
-          filledColor,
-          unfilledBackgroundColor,
-          unfilledColor,
+          filledBackgroundColor = light_blue,
+          filledColor = accent_blue,
+          unfilledBackgroundColor = white,
+          unfilledColor = grey,
         },
         reactionPicker: { buttonContainer, reactionIconSize },
       },

package/src/components/MessageMenu/__tests__/ReactionButton.test.tsx

@@ -34,9 +34,7 @@ describe('ReactionButton', () => {
     );
 
     // Check if the unselected pathFill color is rendered by the mock Icon
-    expect(
-      getByText(defaultTheme.messageMenu.reactionButton.unfilledColor.toString()),
-    ).toBeTruthy();
+    expect(getByText(defaultTheme.colors.grey.toString())).toBeTruthy();
   });
 
   it('should call onPress function with the correct reaction type when pressed', () => {
@@ -72,6 +70,6 @@ describe('ReactionButton', () => {
       </ThemeProvider>,
     );
 
-    expect(getByText(defaultTheme.messageMenu.reactionButton.filledColor.toString())).toBeTruthy();
+    expect(getByText(defaultTheme.colors.accent_blue.toString())).toBeTruthy();
   });
 });

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -2135,7 +2135,6 @@ exports[`Thread should match thread snapshot 1`] = `
               },
               {
                 "borderColor": "#ECEBEB",
-                "paddingVertical": 12,
               },
               {},
               null,
@@ -2148,8 +2147,6 @@ exports[`Thread should match thread snapshot 1`] = `
                 {
                   "alignItems": "center",
                   "flexDirection": "row",
-                  "paddingLeft": 16,
-                  "paddingRight": 16,
                 },
                 {},
               ]
@@ -2171,13 +2168,13 @@ exports[`Thread should match thread snapshot 1`] = `
                     "flex": 1,
                     "fontSize": 16,
                     "includeFontPadding": false,
-                    "padding": 0,
-                    "paddingTop": 0,
+                    "paddingVertical": 12,
                     "textAlignVertical": "center",
                   },
                   {
                     "color": "#000000",
                     "maxHeight": 85,
+                    "paddingHorizontal": 16,
                     "textAlign": "left",
                   },
                   {},

package/src/contexts/themeContext/utils/theme.ts

@@ -478,10 +478,10 @@ export type Theme = {
       height?: number;
     };
     reactionButton: {
-      filledColor: ColorValue;
-      unfilledColor: ColorValue;
-      filledBackgroundColor: ColorValue;
-      unfilledBackgroundColor: ColorValue;
+      filledColor?: ColorValue;
+      unfilledColor?: ColorValue;
+      filledBackgroundColor?: ColorValue;
+      unfilledBackgroundColor?: ColorValue;
     };
     reactionPicker: {
       buttonContainer: ViewStyle;
@@ -497,11 +497,11 @@ export type Theme = {
       avatarSize: number;
       container: ViewStyle;
       contentContainer: ViewStyle;
-      filledBackgroundColor: ColorValue;
+      filledBackgroundColor?: ColorValue;
       flatlistColumnContainer: ViewStyle;
       flatlistContainer: ViewStyle;
-      iconFilledColor: ColorValue;
-      iconUnFilledColor: ColorValue;
+      iconFilledColor?: ColorValue;
+      iconUnFilledColor?: ColorValue;
       radius: number;
       reactionBubble: ViewStyle;
       reactionBubbleBackground: ViewStyle;
@@ -509,7 +509,7 @@ export type Theme = {
       reactionSelectorContainer: ViewStyle;
       reactionsText: TextStyle;
       title: TextStyle;
-      unfilledBackgroundColor: ColorValue;
+      unfilledBackgroundColor?: ColorValue;
     };
   };
   messagePreview: {
@@ -660,12 +660,12 @@ export type Theme = {
       item: {
         container: ViewStyle;
         countText: TextStyle;
-        filledBackgroundColor: ColorValue;
+        filledBackgroundColor?: ColorValue;
         icon: ViewStyle;
-        iconFillColor: ColorValue;
+        iconFillColor?: ColorValue;
         iconSize: number;
-        iconUnFillColor: ColorValue;
-        unfilledBackgroundColor: ColorValue;
+        iconUnFillColor?: ColorValue;
+        unfilledBackgroundColor?: ColorValue;
       };
     };
     reactionListTop: {
@@ -1275,12 +1275,7 @@ export const defaultTheme: Theme = {
       title: {},
     },
     bottomSheet: {},
-    reactionButton: {
-      filledBackgroundColor: Colors.light_blue,
-      filledColor: Colors.accent_blue,
-      unfilledBackgroundColor: Colors.white,
-      unfilledColor: Colors.grey,
-    },
+    reactionButton: {},
     reactionPicker: {
       buttonContainer: {},
       container: {},
@@ -1295,11 +1290,8 @@ export const defaultTheme: Theme = {
       avatarSize: 64,
       container: {},
       contentContainer: {},
-      filledBackgroundColor: Colors.light_blue,
       flatlistColumnContainer: {},
       flatlistContainer: {},
-      iconFilledColor: Colors.accent_blue,
-      iconUnFilledColor: Colors.grey,
       radius: 2,
       reactionBubble: {},
       reactionBubbleBackground: {},
@@ -1307,7 +1299,6 @@ export const defaultTheme: Theme = {
       reactionSelectorContainer: {},
       reactionsText: {},
       title: {},
-      unfilledBackgroundColor: Colors.grey_gainsboro,
     },
   },
   messagePreview: {
@@ -1481,12 +1472,8 @@ export const defaultTheme: Theme = {
       item: {
         container: {},
         countText: {},
-        filledBackgroundColor: Colors.light_blue,
         icon: {},
-        iconFillColor: Colors.accent_blue,
         iconSize: 16,
-        iconUnFillColor: Colors.grey,
-        unfilledBackgroundColor: Colors.grey_gainsboro,
       },
     },
     reactionListTop: {
@@ -1533,7 +1520,6 @@ export const defaultTheme: Theme = {
       container: {},
     },
     targetedMessageContainer: {},
-    unreadUnderlayColor: Colors.bg_gradient_start,
     videoThumbnail: {
       container: {},
       roundedView: {},

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.4.1-beta.1"
+  "version": "8.4.1-beta.3"
 }