aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/images/no_chats.pngbin0 -> 28760 bytes
-rw-r--r--src/assets/images/no_chats@2x.pngbin0 -> 12709 bytes
-rw-r--r--src/assets/images/no_chats@3x.pngbin0 -> 46139 bytes
-rw-r--r--src/components/common/EmptyContentView.tsx132
-rw-r--r--src/constants/strings.ts2
-rw-r--r--src/screens/chat/ChatListScreen.tsx4
-rw-r--r--src/screens/main/NotificationsScreen.tsx4
-rw-r--r--src/screens/main/notification/EmptyNotificationView.tsx48
-rw-r--r--src/types/types.ts3
9 files changed, 143 insertions, 50 deletions
diff --git a/src/assets/images/no_chats.png b/src/assets/images/no_chats.png
new file mode 100644
index 00000000..4e321f17
--- /dev/null
+++ b/src/assets/images/no_chats.png
Binary files differ
diff --git a/src/assets/images/no_chats@2x.png b/src/assets/images/no_chats@2x.png
new file mode 100644
index 00000000..d906df09
--- /dev/null
+++ b/src/assets/images/no_chats@2x.png
Binary files differ
diff --git a/src/assets/images/no_chats@3x.png b/src/assets/images/no_chats@3x.png
new file mode 100644
index 00000000..f0f05c7b
--- /dev/null
+++ b/src/assets/images/no_chats@3x.png
Binary files differ
diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx
new file mode 100644
index 00000000..14ad4af1
--- /dev/null
+++ b/src/components/common/EmptyContentView.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import {Image, Text, StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+ UP_TO_DATE,
+ NO_NEW_NOTIFICATIONS,
+ FIRST_MESSAGE,
+ START_CHATTING,
+} from '../../constants/strings';
+import {NOTIFICATION_GRADIENT} from '../../constants/constants';
+import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../utils';
+import {EmptyViewProps} from '../../types/index';
+
+const EmptyContentView: React.FC<EmptyViewProps> = ({viewType}) => {
+ const _getNotificationImage = () => {
+ return (
+ <LinearGradient
+ style={styles.backgroundLinearView}
+ useAngle={true}
+ angle={180}
+ colors={NOTIFICATION_GRADIENT}>
+ <Image
+ source={require('../../assets/images/empty_notifications.png')}
+ />
+ </LinearGradient>
+ );
+ };
+
+ const _getChatImage = () => {
+ return (
+ <LinearGradient
+ style={styles.backgroundLinearView}
+ useAngle={true}
+ angle={180}
+ colors={NOTIFICATION_GRADIENT}>
+ <Image
+ style={styles.imageStyles}
+ source={require('../../assets/images/no_chats.png')}
+ />
+ </LinearGradient>
+ );
+ };
+
+ const _getImageForType = () => {
+ switch (viewType) {
+ case 'Notification':
+ return _getNotificationImage();
+ case 'ChatList':
+ return _getChatImage();
+ }
+ };
+
+ const _getTextForNotification = () => {
+ return (
+ <>
+ <View style={styles.topMargin}>
+ <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
+ </View>
+ <View>
+ <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+ </View>
+ </>
+ );
+ };
+
+ const _getTextForChat = () => {
+ return (
+ <View style={styles.chatTextStyles}>
+ <View style={styles.topMargin}>
+ <Text style={styles.upperTextStyle}>{START_CHATTING}</Text>
+ </View>
+ <View>
+ <Text style={styles.bottomTextStyle}>{FIRST_MESSAGE}</Text>
+ </View>
+ </View>
+ );
+ };
+
+ const _getTextForType = () => {
+ switch (viewType) {
+ case 'Notification':
+ return _getTextForNotification();
+ case 'ChatList':
+ return _getTextForChat();
+ }
+ };
+
+ return (
+ <View style={styles.container}>
+ {_getImageForType()}
+ {_getTextForType()}
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ topMargin: {
+ marginTop: SCREEN_HEIGHT * 0.025,
+ paddingBottom: '5%',
+ },
+ upperTextStyle: {
+ textAlign: 'center',
+ fontWeight: '700',
+ fontSize: normalize(23),
+ lineHeight: normalize(40),
+ },
+ chatTextStyles: {
+ width: '85%',
+ },
+ bottomTextStyle: {
+ textAlign: 'center',
+ color: '#808080',
+ fontWeight: '600',
+ fontSize: normalize(20),
+ lineHeight: normalize(30),
+ },
+ imageStyles: {
+ width: SCREEN_WIDTH * 0.72,
+ height: SCREEN_WIDTH * 0.72,
+ },
+ backgroundLinearView: {
+ borderRadius: (SCREEN_WIDTH * 0.72) / 2,
+ },
+});
+
+export default EmptyContentView;
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 50e4518b..e8f2725d 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -56,6 +56,8 @@ export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry';
export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture";
export const ERROR_UPLOAD_SP_PHOTO = 'Unable to update suggested people photo. Please retry!';
export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
+export const FIRST_MESSAGE = 'How about sending your first message to your friend';
+export const START_CHATTING = 'Let’s Start Chatting!';
export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index d2cfcb5d..1df5c2da 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -9,6 +9,7 @@ import {TabsGradient} from '../../components';
import {ChannelPreview, MessagesHeader} from '../../components/messages';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootReducer';
+import EmptyContentView from '../../components/common/EmptyContentView';
import {
LocalAttachmentType,
LocalChannelType,
@@ -99,6 +100,9 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
sort={{last_message_at: -1}}
maxUnreadCount={99}
Preview={ChannelPreview}
+ EmptyStateIndicator={() => {
+ return <EmptyContentView viewType={'ChatList'} />;
+ }}
/>
</View>
</Chat>
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 3efd9af8..9fbc4cfe 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -28,7 +28,7 @@ import {
import {RootState} from '../../store/rootReducer';
import {NotificationType, ScreenType} from '../../types';
import {getDateAge, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import EmptyNotificationView from './notification/EmptyNotificationView';
+import EmptyContentView from '../../components/common/EmptyContentView';
const NotificationsScreen: React.FC = () => {
const {newNotificationReceived} = useSelector(
@@ -304,7 +304,7 @@ const NotificationsScreen: React.FC = () => {
extraData={requestLimit}
ListEmptyComponent={
<View style={styles.emptyViewContainer}>
- <EmptyNotificationView />
+ <EmptyContentView viewType={'Notification'} />
</View>
}
/>
diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx
deleted file mode 100644
index f43cfb2a..00000000
--- a/src/screens/main/notification/EmptyNotificationView.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import {Image, Text, StyleSheet, View} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings';
-import {NOTIFICATION_GRADIENT} from '../../../constants/constants';
-import {SCREEN_HEIGHT, normalize} from '../../../utils';
-const EmptyNotificationView: React.FC = () => {
- return (
- <View style={styles.container}>
- <LinearGradient
- style={styles.backgroundLinearView}
- useAngle={true}
- angle={180}
- colors={NOTIFICATION_GRADIENT}>
- <Image
- source={require('../../../assets/images/empty_notifications.png')}
- />
- </LinearGradient>
- <View style={styles.topMargin}>
- <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
- </View>
- <View>
- <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
- </View>
- </View>
- );
-};
-
-const styles = StyleSheet.create({
- container: {alignItems: 'center'},
- topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
- upperTextStyle: {
- fontWeight: '700',
- fontSize: normalize(23),
- lineHeight: normalize(40),
- },
- bottomTextStyle: {
- color: '#2D3B45',
- fontWeight: '600',
- fontSize: normalize(20),
- lineHeight: normalize(40),
- },
- backgroundLinearView: {
- borderRadius: 135.5,
- },
-});
-
-export default EmptyNotificationView;
diff --git a/src/types/types.ts b/src/types/types.ts
index e7f651dc..ce39947c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -23,6 +23,9 @@ export interface CategoryPreviewType {
}
export type FriendshipStatusType = 'friends' | 'requested' | 'no_record';
+export interface EmptyViewProps {
+ viewType: 'Notification' | 'ChatList';
+}
export enum UniversityType {
Brown = 'Brown University',
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 21:26:01 +0000