diff options
| -rw-r--r-- | src/assets/images/empty_notifications.png | bin | 0 -> 7787 bytes | |||
| -rw-r--r-- | src/constants/constants.ts | 5 | ||||
| -rw-r--r-- | src/constants/strings.ts | 4 | ||||
| -rw-r--r-- | src/screens/main/NotificationsScreen.tsx | 36 | ||||
| -rw-r--r-- | src/screens/main/notification/EmptyNotificationView.tsx | 48 |
5 files changed, 82 insertions, 11 deletions
diff --git a/src/assets/images/empty_notifications.png b/src/assets/images/empty_notifications.png Binary files differnew file mode 100644 index 00000000..5a5828e4 --- /dev/null +++ b/src/assets/images/empty_notifications.png diff --git a/src/constants/constants.ts b/src/constants/constants.ts index f58aa686..3c43fb6c 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -75,6 +75,11 @@ export const AVATAR_GRADIENT = { end: '#215151', }; +export const NOTIFICATION_GRADIENT = [ + 'rgba(247, 248, 248, 1)', + 'rgba(247, 248, 248, 0)', +]; + export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, FACEBOOK: FACEBOOK_FONT_COLOR, diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 9680320a..5a9be5fc 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -44,13 +44,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; 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'; export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code'; +export const UP_TO_DATE = 'Up-to-Date!'; export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!'; export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'; export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category'; -export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
\ No newline at end of file +export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 266ba3f9..ca921f75 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -13,6 +13,7 @@ import { import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {Notification} from '../../components/notifications'; +import EmptyNotificationView from './notification/EmptyNotificationView'; import { loadUserNotifications, updateNewNotificationReceived, @@ -29,6 +30,7 @@ const NotificationsScreen: React.FC = () => { (state: RootState) => state.user, ); const [refreshing, setRefreshing] = useState(false); + const [noNotification, setNoNotification] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>( undefined, @@ -128,6 +130,9 @@ const NotificationsScreen: React.FC = () => { {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, ]); + setNoNotification( + todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, + ); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( @@ -152,16 +157,24 @@ const NotificationsScreen: React.FC = () => { <Text style={styles.headerText}>Notifications</Text> <View style={styles.underline} /> </View> - <SectionList - contentContainerStyle={styles.container} - sections={sectionedNotifications} - keyExtractor={(item, index) => index.toString()} - renderItem={renderNotification} - renderSectionHeader={renderSectionHeader} - refreshControl={ - <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> - } - /> + {noNotification && ( + <View style={styles.emptyViewContainer}> + <EmptyNotificationView /> + </View> + )} + + {!noNotification && ( + <SectionList + contentContainerStyle={styles.container} + sections={sectionedNotifications} + keyExtractor={(item, index) => index.toString()} + renderItem={renderNotification} + renderSectionHeader={renderSectionHeader} + refreshControl={ + <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> + } + /> + )} </SafeAreaView> ); }; @@ -195,6 +208,9 @@ const styles = StyleSheet.create({ marginBottom: '2%', fontSize: 15, }, + emptyViewContainer: { + marginTop: '22%', + }, }); export default NotificationsScreen; diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx new file mode 100644 index 00000000..f43cfb2a --- /dev/null +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -0,0 +1,48 @@ +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; |
