fix: in app notification is not showing channel name and content (#7046)

Author: Rohit3523

app/containers/InAppNotification/NotifierComponent.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { ThemeContext, type TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants/colors';
+import NotifierComponent from './NotifierComponent';
+import { SubscriptionType } from '../../definitions';
+import {
+	BASE_ROW_HEIGHT,
+	BASE_ROW_HEIGHT_CONDENSED,
+	ResponsiveLayoutContext
+} from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+
+const responsiveLayoutProviderValue = {
+	fontScale: 1,
+	fontScaleLimited: 1,
+	isLargeFontScale: false,
+	rowHeight: BASE_ROW_HEIGHT,
+	rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED,
+	width: 300,
+	height: 800
+};
+
+const baseNotification = {
+	text: 'Hey! How are you doing?',
+	payload: {
+		_id: '1',
+		rid: 'rid-1',
+		name: 'general',
+		sender: { username: 'rocket.cat' },
+		type: SubscriptionType.CHANNEL
+	},
+	title: 'general',
+	avatar: 'rocket.cat'
+};
+
+const Wrapper = ({ children, theme = 'light' }: { children: React.ReactNode; theme?: TSupportedThemes }) => (
+	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
+		<ResponsiveLayoutContext.Provider value={responsiveLayoutProviderValue}>{children}</ResponsiveLayoutContext.Provider>
+	</ThemeContext.Provider>
+);
+
+export default {
+	title: 'InAppNotification'
+};
+
+export const DirectMessage = () => (
+	<Wrapper>
+		<NotifierComponent
+			notification={{
+				...baseNotification,
+				payload: {
+					...baseNotification.payload,
+					type: SubscriptionType.DIRECT,
+					sender: { username: 'diego.mello' }
+				},
+				title: 'diego.mello',
+				avatar: 'diego.mello'
+			}}
+		/>
+	</Wrapper>
+);
+export const ChannelMessage = () => (
+	<Wrapper>
+		<NotifierComponent notification={baseNotification} />
+	</Wrapper>
+);
+export const WithDarkTheme = () => (
+	<Wrapper theme='dark'>
+		<NotifierComponent notification={baseNotification} />
+	</Wrapper>
+);
+export const WithBlackTheme = () => (
+	<Wrapper theme='black'>
+		<NotifierComponent notification={baseNotification} />
+	</Wrapper>
+);

app/containers/InAppNotification/NotifierComponent.test.tsx

@@ -0,0 +1,4 @@
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+import * as stories from './NotifierComponent.stories';
+
+generateSnapshots(stories);

app/containers/InAppNotification/NotifierComponent.tsx

@@ -46,9 +46,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
-	inner: {
-		flex: 1
-	},
 	avatar: {
 		marginRight: 10
 	},
@@ -112,7 +109,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 			<Touch style={styles.content} onPress={onPress} hitSlop={BUTTON_HIT_SLOP} testID={`in-app-notification-${text}`}>
 				<>
 					<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
-					<View style={styles.inner}>
+					<View>
 						<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{title}
 						</Text>