aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/images/Group 479.jpgbin0 -> 753 bytes
-rw-r--r--src/assets/images/Group 479.svg5
-rw-r--r--src/assets/images/Profile Icon.pngbin0 -> 1504 bytes
-rw-r--r--src/assets/images/pill-icon-1.pngbin0 -> 868 bytes
-rw-r--r--src/assets/images/pill-icon-2.pngbin0 -> 1276 bytes
-rw-r--r--src/assets/images/pill-icon-3.pngbin0 -> 1037 bytes
-rw-r--r--src/assets/images/pill-icon-4.pngbin0 -> 1249 bytes
-rw-r--r--src/assets/images/purple-tip.pngbin0 -> 680 bytes
-rw-r--r--src/components/moments/MomentPostContent.tsx8
-rw-r--r--src/constants/constants.ts4
-rw-r--r--src/routes/tabs/NavigationBar.tsx384
-rw-r--r--src/utils/common.ts4
12 files changed, 327 insertions, 78 deletions
diff --git a/src/assets/images/Group 479.jpg b/src/assets/images/Group 479.jpg
new file mode 100644
index 00000000..74abad92
--- /dev/null
+++ b/src/assets/images/Group 479.jpg
Binary files differ
diff --git a/src/assets/images/Group 479.svg b/src/assets/images/Group 479.svg
new file mode 100644
index 00000000..4e1eee01
--- /dev/null
+++ b/src/assets/images/Group 479.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="7.75104" cy="5.91915" rx="2.00104" ry="1.93282" fill="white"/>
+<path d="M7.75195 8.0791C5.67981 8.0791 4 9.6062 4 11.49H11.5039C11.5039 9.6062 9.8241 8.0791 7.75195 8.0791Z" fill="white"/>
+<path d="M7.99349 1C4.13109 1 1 4.13109 1 7.99349C1 11.1633 3.10881 13.8405 6 14.6987L8 17L9.98697 14.6987C12.8782 13.8405 14.987 11.1633 14.987 7.99349C14.987 4.13109 11.8559 1 7.99349 1Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/Profile Icon.png b/src/assets/images/Profile Icon.png
new file mode 100644
index 00000000..f8eae388
--- /dev/null
+++ b/src/assets/images/Profile Icon.png
Binary files differ
diff --git a/src/assets/images/pill-icon-1.png b/src/assets/images/pill-icon-1.png
new file mode 100644
index 00000000..06956c6a
--- /dev/null
+++ b/src/assets/images/pill-icon-1.png
Binary files differ
diff --git a/src/assets/images/pill-icon-2.png b/src/assets/images/pill-icon-2.png
new file mode 100644
index 00000000..b2370b80
--- /dev/null
+++ b/src/assets/images/pill-icon-2.png
Binary files differ
diff --git a/src/assets/images/pill-icon-3.png b/src/assets/images/pill-icon-3.png
new file mode 100644
index 00000000..6cdf0b15
--- /dev/null
+++ b/src/assets/images/pill-icon-3.png
Binary files differ
diff --git a/src/assets/images/pill-icon-4.png b/src/assets/images/pill-icon-4.png
new file mode 100644
index 00000000..6e132647
--- /dev/null
+++ b/src/assets/images/pill-icon-4.png
Binary files differ
diff --git a/src/assets/images/purple-tip.png b/src/assets/images/purple-tip.png
new file mode 100644
index 00000000..27f5a89a
--- /dev/null
+++ b/src/assets/images/purple-tip.png
Binary files differ
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 4a1f3894..c00433e7 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -35,13 +35,15 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
style,
momentTags,
}) => {
- const state: RootState = useStore().getState();
- const navigation = useNavigation();
- const dispatch = useDispatch();
const [elapsedTime, setElapsedTime] = useState('');
const [comments_count, setCommentsCount] = useState('');
const [tags, setTags] = useState<MomentTagType[]>(momentTags);
+ // const [visible, setVisible] = useState(false);
+ const state: RootState = useStore().getState();
+ const navigation = useNavigation();
+ const dispatch = useDispatch();
const imageRef = useRef(null);
+ // const [fadeValue, setFadeValue] = useState(new Animated.Value(0));
const [visible, setVisible] = useState(false);
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 99d3901b..e6c23554 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -21,6 +21,9 @@ export const AVATAR_GRADIENT_DIM = 50;
export const TAGG_ICON_DIM = 58;
export const TAGG_RING_DIM = normalize(60);
+// default height of the navigation bar, from react native library, unless on ipad
+export const NAV_BAR_HEIGHT = 49;
+
export const INTEGRATED_SOCIAL_LIST: string[] = [
'Instagram',
'Facebook',
@@ -89,6 +92,7 @@ export const BADGE_GRADIENT_REST = [
'rgba(78, 54, 41, 1)',
'rgba(236, 32, 39, 1)',
];
+export const NOTIFICATION_ICON_GRADIENT = ['#8F01FF', '#7B02DA'];
export const SOCIAL_FONT_COLORS = {
INSTAGRAM: INSTAGRAM_FONT_COLOR,
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 000ac614..1693d057 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,12 +1,22 @@
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import React, {Fragment, useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState, useRef} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
import {useSelector} from 'react-redux';
import {NavigationIcon} from '../../components';
import {NO_NOTIFICATIONS} from '../../store/initialStates';
import {RootState} from '../../store/rootReducer';
import {ScreenType} from '../../types';
-import {haveUnreadNotifications} from '../../utils';
+import {haveUnreadNotifications, SCREEN_WIDTH, isIPhoneX} from '../../utils';
import MainStackScreen from '../main/MainStackScreen';
+import {
+ NOTIFICATION_ICON_GRADIENT,
+ CHIN_HEIGHT,
+ NAV_BAR_HEIGHT,
+} from '../../constants';
+import {normalize} from 'react-native-elements';
+import {numberWithCommas} from '../../utils';
+import PillIcon4 from '../../assets/images/Group 479.svg';
const Tabs = createBottomTabNavigator();
@@ -18,9 +28,28 @@ const NavigationBar: React.FC = () => {
const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
(state: RootState) => state,
);
+ const [showIcon, setShowIcon] = useState<boolean>(true);
+ const [iconStart, setIconStart] = useState<number[]>([0, -100]);
+ const [tipStart, setTipStart] = useState<number[]>([0, -100]);
+ const [complete, setComplete] = useState<boolean>(false);
+ const [notificationSets, setNotificationSets] = useState({
+ CMT: 412314213123,
+ FR_REQ: 52131,
+ PR_V: 3,
+ TAG: 712321,
+ });
+ const [timeCount, setTimeCount] = useState<boolean>(false);
+ const [timeOut, setTimeOut] = useState<boolean>(false);
+ const iconRef = useRef(null);
+ const tipRef = useRef(null);
+ const pillTip = require('../../assets/images/purple-tip.png');
- const [unreadNotificationsPresent, setUnreadNotificationsPresent] =
- useState<boolean>(false);
+ const navBarPos = 20;
+
+ const [
+ unreadNotificationsPresent,
+ setUnreadNotificationsPresent,
+ ] = useState<boolean>(false);
useEffect(() => {
const determine = async () => {
@@ -28,82 +57,287 @@ const NavigationBar: React.FC = () => {
await haveUnreadNotifications(notifications),
);
};
+ // const establishUnread = async () => {
+ // setUnread(await getUnreadNotifications(notifications));
+ // };
determine();
+ // establishUnread();
}, [notifications]);
- return (
- <Tabs.Navigator
- screenOptions={({route}) => ({
- tabBarIcon: ({focused}) => {
- switch (route.name) {
- case 'Home':
- return <NavigationIcon tab="Home" disabled={!focused} />;
- case 'Search':
- return <NavigationIcon tab="Search" disabled={!focused} />;
- case 'Upload':
- return <NavigationIcon tab="Upload" disabled={!focused} />;
- case 'Notifications':
- return (
- <NavigationIcon
- newIcon={
- newNotificationReceived || unreadNotificationsPresent
- }
- tab="Notifications"
- disabled={!focused}
- />
- );
- case 'Chat':
- return <NavigationIcon tab="Chat" disabled={!focused} />;
- case 'Profile':
- return <NavigationIcon tab="Profile" disabled={!focused} />;
- case 'SuggestedPeople':
- return (
- <NavigationIcon tab="SuggestedPeople" disabled={!focused} />
+ useEffect(() => {
+ setTimeout(() => {
+ console.log(
+ 'notifications',
+ notifications.length,
+ 'unread',
+ notificationSets,
+ );
+ if (iconRef.current) {
+ iconRef.current.measure(
+ (
+ _fx: number,
+ _fy: number,
+ width: number,
+ height: number,
+ _px: number,
+ _py: number,
+ ) => {
+ console.log('HERE 1');
+ if (tipRef.current) {
+ tipRef.current.measure(
+ (
+ __fx: number,
+ __fy: number,
+ width2: number,
+ __height: number,
+ __px: number,
+ __py: number,
+ ) => {
+ const x = SCREEN_WIDTH / 2 - width / 2;
+ const y = isIPhoneX()
+ ? CHIN_HEIGHT + NAV_BAR_HEIGHT + navBarPos
+ : NAV_BAR_HEIGHT + navBarPos;
+ setIconStart([x, y]);
+ setTipStart([width / 2 - width2 / 2, height - 1]);
+ setTimeout(() => {
+ setComplete(true);
+ console.log('HERE 2');
+ }, 100);
+ setTimeCount(true);
+ },
);
- default:
- return <Fragment />;
- }
- },
- })}
- initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'}
- tabBarOptions={{
- showLabel: false,
- style: {
- backgroundColor: 'transparent',
- position: 'absolute',
- borderTopWidth: 0,
- left: 0,
- right: 0,
- bottom: '1%',
- },
- }}>
- <Tabs.Screen
- name="SuggestedPeople"
- component={MainStackScreen}
- initialParams={{screenType: ScreenType.SuggestedPeople}}
- />
- <Tabs.Screen
- name="Search"
- component={MainStackScreen}
- initialParams={{screenType: ScreenType.Search}}
- />
- <Tabs.Screen
- name="Notifications"
- component={MainStackScreen}
- initialParams={{screenType: ScreenType.Notifications}}
- />
- <Tabs.Screen
- name="Chat"
- component={MainStackScreen}
- initialParams={{screenType: ScreenType.Chat}}
- />
- <Tabs.Screen
- name="Profile"
- component={MainStackScreen}
- initialParams={{screenType: ScreenType.Profile}}
- />
- </Tabs.Navigator>
+ }
+ },
+ );
+ } else {
+ console.log('ISSUE', iconRef.current);
+ }
+ }, 100);
+ }, [notificationSets, iconRef, tipRef]);
+
+ useEffect(() => {
+ if (timeCount) {
+ setTimeout(() => {
+ setTimeOut(true);
+ }, 5000);
+ }
+ }, [timeCount]);
+
+ useEffect(() => {
+ setTimeout(() => {
+ console.log('complete', complete);
+ }, 100);
+ }, [complete]);
+
+ useEffect(() => {
+ setTimeout(() => {
+ console.log('iconRef', iconRef);
+ }, 60000);
+ });
+
+ return (
+ <>
+ {notificationSets &&
+ Object.keys(notificationSets).length !== 0 &&
+ showIcon &&
+ !timeOut && (
+ <View
+ style={[
+ styles.purpleContainer,
+ {bottom: iconStart[1], left: iconStart[0]},
+ ]}
+ ref={iconRef}>
+ <LinearGradient
+ colors={NOTIFICATION_ICON_GRADIENT}
+ style={styles.iconPurple}>
+ {notificationSets.CMT && (
+ <>
+ <Image
+ source={require('../../assets/images/pill-icon-1.png')}
+ style={styles.indicationIcon}
+ />
+ <Text style={styles.text}>
+ {numberWithCommas(notificationSets.CMT)}
+ </Text>
+ </>
+ )}
+ {notificationSets.FR_REQ && (
+ <>
+ <Image
+ source={require('../../assets/images/pill-icon-2.png')}
+ style={styles.indicationIcon}
+ />
+ <Text style={styles.text}>
+ {numberWithCommas(notificationSets.FR_REQ)}
+ </Text>
+ </>
+ )}
+ {notificationSets.PR_V && (
+ <>
+ <Image
+ source={require('../../assets/images/pill-icon-3.png')}
+ style={styles.indicationIcon}
+ />
+ <Text style={styles.text}>
+ {numberWithCommas(notificationSets.PR_V)}
+ </Text>
+ </>
+ )}
+ {notificationSets.TAG && (
+ <>
+ <PillIcon4 style={styles.indicationIcon} />
+ <Text style={styles.text}>
+ {numberWithCommas(notificationSets.TAG)}
+ </Text>
+ </>
+ )}
+ </LinearGradient>
+ <Image
+ style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]}
+ source={pillTip}
+ ref={tipRef}
+ />
+ </View>
+ )}
+ <Tabs.Navigator
+ screenOptions={({route}) => ({
+ tabBarIcon: ({focused}) => {
+ switch (route.name) {
+ case 'Home':
+ return <NavigationIcon tab="Home" disabled={!focused} />;
+ case 'Search':
+ return <NavigationIcon tab="Search" disabled={!focused} />;
+ case 'Upload':
+ return <NavigationIcon tab="Upload" disabled={!focused} />;
+ case 'Notifications':
+ return (
+ <NavigationIcon
+ newIcon={
+ newNotificationReceived || unreadNotificationsPresent
+ }
+ tab="Notifications"
+ disabled={!focused}
+ />
+ );
+ case 'Chat':
+ return <NavigationIcon tab="Chat" disabled={!focused} />;
+ case 'Profile':
+ return <NavigationIcon tab="Profile" disabled={!focused} />;
+ case 'SuggestedPeople':
+ return (
+ <NavigationIcon tab="SuggestedPeople" disabled={!focused} />
+ );
+ default:
+ return <Fragment />;
+ }
+ },
+ })}
+ initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'}
+ tabBarOptions={{
+ showLabel: false,
+ style: {
+ backgroundColor: 'transparent',
+ position: 'absolute',
+ borderTopWidth: 0,
+ left: 0,
+ right: 0,
+ bottom: '1%',
+ },
+ }}>
+ <Tabs.Screen
+ name="SuggestedPeople"
+ component={MainStackScreen}
+ initialParams={{screenType: ScreenType.SuggestedPeople}}
+ listeners={{
+ tabPress: (_) => {
+ setShowIcon(true);
+ },
+ }}
+ />
+ <Tabs.Screen
+ name="Search"
+ component={MainStackScreen}
+ initialParams={{screenType: ScreenType.Search}}
+ listeners={{
+ tabPress: (_) => {
+ setShowIcon(true);
+ },
+ }}
+ />
+ <Tabs.Screen
+ name="Notifications"
+ component={MainStackScreen}
+ initialParams={{screenType: ScreenType.Notifications}}
+ listeners={{
+ tabPress: (_) => {
+ setShowIcon(false);
+ },
+ }}
+ />
+ <Tabs.Screen
+ name="Chat"
+ component={MainStackScreen}
+ initialParams={{screenType: ScreenType.Chat}}
+ listeners={{
+ tabPress: (_) => {
+ setShowIcon(true);
+ },
+ }}
+ />
+ <Tabs.Screen
+ name="Profile"
+ component={MainStackScreen}
+ initialParams={{screenType: ScreenType.Profile}}
+ listeners={{
+ tabPress: (_) => {
+ setShowIcon(true);
+ },
+ }}
+ />
+ </Tabs.Navigator>
+ </>
);
};
+const styles = StyleSheet.create({
+ purpleContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ position: 'absolute',
+ zIndex: 999,
+ },
+ iconPurple: {
+ padding: 5,
+ borderRadius: 15,
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ text: {
+ margin: 2,
+ color: 'white',
+ fontSize: normalize(10),
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: 10,
+ },
+ tip: {
+ position: 'absolute',
+ zIndex: 999,
+ height: 12,
+ flex: 1,
+ resizeMode: 'contain',
+ },
+ indicationIcon: {
+ height: 14,
+ width: 14,
+ margin: 2,
+ },
+ svgIndicationIcon: {
+ height: 14,
+ width: 14,
+ margin: 3,
+ },
+});
+
export default NavigationBar;
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 95e77f64..049dae90 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -197,3 +197,7 @@ export const validateImageLink = async (url: string | undefined) => {
return false;
});
};
+
+export const numberWithCommas = (digits: number) => {
+ return digits.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:04:27 +0000