aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBrian Kim <brian@tagg.id>2021-06-02 11:58:59 -0700
committerBrian Kim <brian@tagg.id>2021-06-02 11:58:59 -0700
commit43a420ec518f122b684bb9d2f4dd4043bf65d2d2 (patch)
tree2493f8acf92a7da552522adb0a2f52f9297c9117
parent68fcf7c533ba7612c94760b1171c506f64bfc0ae (diff)
Some cosmetic changes
-rw-r--r--src/assets/images/Group 479.jpgbin0 -> 753 bytes
-rw-r--r--src/assets/images/Group 479.svg5
-rw-r--r--src/routes/tabs/NavigationBar.tsx185
3 files changed, 87 insertions, 103 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/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 0e08d834..1693d057 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -6,13 +6,8 @@ import {useSelector} from 'react-redux';
import {NavigationIcon} from '../../components';
import {NO_NOTIFICATIONS} from '../../store/initialStates';
import {RootState} from '../../store/rootReducer';
-import {ScreenType, NotificationType} from '../../types';
-import {
- haveUnreadNotifications,
- getUnreadNotifications,
- SCREEN_WIDTH,
- isIPhoneX,
-} from '../../utils';
+import {ScreenType} from '../../types';
+import {haveUnreadNotifications, SCREEN_WIDTH, isIPhoneX} from '../../utils';
import MainStackScreen from '../main/MainStackScreen';
import {
NOTIFICATION_ICON_GRADIENT,
@@ -21,6 +16,7 @@ import {
} from '../../constants';
import {normalize} from 'react-native-elements';
import {numberWithCommas} from '../../utils';
+import PillIcon4 from '../../assets/images/Group 479.svg';
const Tabs = createBottomTabNavigator();
@@ -32,13 +28,6 @@ const NavigationBar: React.FC = () => {
const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
(state: RootState) => state,
);
-
- const [unread, setUnread] = useState({
- CMT: 4,
- FR_REQ: 5,
- PR_V: 3,
- TAG: 7,
- });
const [showIcon, setShowIcon] = useState<boolean>(true);
const [iconStart, setIconStart] = useState<number[]>([0, -100]);
const [tipStart, setTipStart] = useState<number[]>([0, -100]);
@@ -50,31 +39,18 @@ const NavigationBar: React.FC = () => {
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 navBarPos = 20;
- const tipSize = 8;
const [
unreadNotificationsPresent,
setUnreadNotificationsPresent,
] = useState<boolean>(false);
- const countNotifications = (
- notificationsList: NotificationType[],
- values: string[],
- ) => {
- let outputNum = 0;
- for (const n of notificationsList) {
- if (values.includes(n.notification_type)) {
- outputNum++;
- }
- }
- return outputNum;
- };
-
useEffect(() => {
const determine = async () => {
setUnreadNotificationsPresent(
@@ -90,7 +66,12 @@ const NavigationBar: React.FC = () => {
useEffect(() => {
setTimeout(() => {
- console.log('notifications', notifications.length, 'unread', unread);
+ console.log(
+ 'notifications',
+ notifications.length,
+ 'unread',
+ notificationSets,
+ );
if (iconRef.current) {
iconRef.current.measure(
(
@@ -132,12 +113,12 @@ const NavigationBar: React.FC = () => {
console.log('ISSUE', iconRef.current);
}
}, 100);
- }, [unread, iconRef, tipRef]);
+ }, [notificationSets, iconRef, tipRef]);
useEffect(() => {
if (timeCount) {
setTimeout(() => {
- setShowIcon(false);
+ setTimeOut(true);
}, 5000);
}
}, [timeCount]);
@@ -156,68 +137,68 @@ const NavigationBar: React.FC = () => {
return (
<>
- {unread && Object.keys(unread).length !== 0 && showIcon && (
- <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 && (
- <>
- <Image
- source={require('../../assets/images/pill-icon-4.png')}
- 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>
- )}
+ {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}) => {
@@ -320,22 +301,16 @@ const NavigationBar: React.FC = () => {
const styles = StyleSheet.create({
purpleContainer: {
- // borderWidth: 1,
flex: 1,
justifyContent: 'center',
position: 'absolute',
zIndex: 999,
- // flexDirection: 'row',
- // bottom: 50,
- // height: normalize(20),
},
iconPurple: {
padding: 5,
borderRadius: 15,
flex: 1,
flexDirection: 'row',
- // justifyContent: 'center',
- // alignContent: 'center',
alignItems: 'center',
},
text: {
@@ -344,21 +319,25 @@ const styles = StyleSheet.create({
fontSize: normalize(10),
justifyContent: 'center',
alignItems: 'center',
+ marginRight: 10,
},
tip: {
- // borderWidth: 1,
position: 'absolute',
zIndex: 999,
height: 12,
- // aspectRatio: 12 / 8,
flex: 1,
resizeMode: 'contain',
},
indicationIcon: {
- height: 15,
- width: 15,
+ height: 14,
+ width: 14,
margin: 2,
},
+ svgIndicationIcon: {
+ height: 14,
+ width: 14,
+ margin: 3,
+ },
});
export default NavigationBar;