From 913e321498b87163a19fa12e95d79fcd4d1b0b29 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 12:28:41 -0400 Subject: Clean up code --- src/components/suggestedPeople/BadgesDropdown.tsx | 13 ++++++------ src/screens/suggestedPeople/SPBody.tsx | 25 ++++++++--------------- 2 files changed, 15 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index bc4e7a54..0d4725d9 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -1,6 +1,6 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {Image, StyleSheet} from 'react-native'; +import {Image, ImageSourcePropType, StyleSheet} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import Animated, {Easing} from 'react-native-reanimated'; @@ -8,19 +8,18 @@ import {UniversityType, UniversityBadge} from '../../types'; import {UniversityIcon} from '..'; import {normalize, SCREEN_WIDTH} from '../../utils'; import UniversityIconClicked from './UniversityIconClicked'; + interface BadgesDropdownProps { university: UniversityType; localBadges: { badge: UniversityBadge; - img: string; + img: ImageSourcePropType; }[]; - badges: UniversityBadge[]; } const BadgesDropdown: React.FC = ({ university, localBadges, - badges, }) => { // Used to toggle between dropdown being displayed and not const [displayBadges, setDisplayBadges] = useState(false); @@ -33,7 +32,7 @@ const BadgesDropdown: React.FC = ({ // Initialize position of badges to 0 const defineBadgePositions = () => { let localTop: Animated.Value[] = []; - badges.forEach(() => { + localBadges.forEach(() => { localTop.push(new Animated.Value(0)); }); setTop(localTop); @@ -43,7 +42,7 @@ const BadgesDropdown: React.FC = ({ // Displays badges dropdown by updating top [state] for every badge const animate = () => { - for (let i = 0; i < badges?.length; i++) { + for (let i = 0; i < localBadges?.length; i++) { if (top) { Animated.timing(top[i], { toValue: i * 40 + 50, @@ -56,7 +55,7 @@ const BadgesDropdown: React.FC = ({ // Draws back displayed badges by setting top [state] to 0 for every badge const animateBack = () => { - for (let i = 0; i < badges?.length; i++) { + for (let i = 0; i < localBadges?.length; i++) { if (top) { Animated.timing(top[i], { toValue: 0, diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index c22f8143..352e4433 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,6 +1,12 @@ import {useNavigation} from '@react-navigation/native'; import React, {Fragment, useEffect, useMemo, useState} from 'react'; -import {StyleSheet, Text, View} from 'react-native'; +import { + ImageSourcePropType, + ScrollView, + StyleSheet, + Text, + View, +} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; @@ -43,7 +49,7 @@ const SPBody: React.FC = ({ const [localBadges, setLocalBadges] = useState< { badge: UniversityBadge; - img: string; + img: ImageSourcePropType; }[] >([]); const navigation = useNavigation(); @@ -138,9 +144,7 @@ const SPBody: React.FC = ({ {firstItem && 'Suggested People'} - {localBadges && ( - - )} + {localBadges && } @@ -267,17 +271,6 @@ const styles = StyleSheet.create({ shadowOffset: {width: 2, height: 2}, shadowOpacity: 0.5, }, - body: {}, - button: { - justifyContent: 'center', - alignItems: 'center', - width: SCREEN_WIDTH * 0.4, - aspectRatio: 154 / 33, - borderWidth: 2, - borderColor: '#fff', - borderRadius: 3, - marginRight: '2%', - marginLeft: '1%', }, }); -- cgit v1.2.3-70-g09d2 From 9df26f5ff25b4a6953518639d7dfcd16a03802a3 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 12:36:12 -0400 Subject: Clean up code, Refactor --- src/components/suggestedPeople/BadgeIcon.tsx | 57 +++++++++++++++++++++++ src/components/suggestedPeople/BadgesDropdown.tsx | 46 ++---------------- src/components/suggestedPeople/index.ts | 1 + 3 files changed, 62 insertions(+), 42 deletions(-) create mode 100644 src/components/suggestedPeople/BadgeIcon.tsx (limited to 'src') diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx new file mode 100644 index 00000000..e8425308 --- /dev/null +++ b/src/components/suggestedPeople/BadgeIcon.tsx @@ -0,0 +1,57 @@ +import {useNavigation} from '@react-navigation/core'; +import React from 'react'; +import {Image, ImageSourcePropType, StyleSheet} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import LinearGradient from 'react-native-linear-gradient'; +import {UniversityBadge} from '../../types'; +import {normalize} from '../../utils'; + +interface BadgeIconProps { + badge: UniversityBadge; + img: ImageSourcePropType; +} + +const BadgeIcon: React.FC = ({badge, img}) => { + const navigation = useNavigation(); + return ( + { + navigation.navigate('MutualBadgeHolders', { + badge_id: badge.id, + badge_title: badge.name, + badge_img: img, + }); + }}> + + + + + ); +}; + +const styles = StyleSheet.create({ + badgeBackground: { + width: '100%', + height: '100%', + borderRadius: 50, + justifyContent: 'center', + alignItems: 'center', + }, + badgeButton: { + width: normalize(30), + height: normalize(30), + borderRadius: 30, + }, + icon: { + width: '60%', + height: '60%', + }, +}); + +export default BadgeIcon; diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 0d4725d9..50f924e4 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -5,7 +5,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import Animated, {Easing} from 'react-native-reanimated'; import {UniversityType, UniversityBadge} from '../../types'; -import {UniversityIcon} from '..'; +import {BadgeIcon, UniversityIcon} from '..'; import {normalize, SCREEN_WIDTH} from '../../utils'; import UniversityIconClicked from './UniversityIconClicked'; @@ -105,30 +105,7 @@ const BadgesDropdown: React.FC = ({ zIndex: -1 * badge.id, }, ]}> - { - navigation.navigate('MutualBadgeHolders', { - badge_id: badge.id, - badge_title: badge.name, - badge_img: img, - }); - }}> - - - - + ))} @@ -136,18 +113,6 @@ const BadgesDropdown: React.FC = ({ }; const styles = StyleSheet.create({ - badgeBackground: { - position: 'absolute', - width: '100%', - height: '100%', - borderRadius: 50, - borderColor: 'transparent', - borderWidth: 1, - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - }, badgesContainer: { flexDirection: 'column', justifyContent: 'space-between', @@ -156,12 +121,9 @@ const styles = StyleSheet.create({ left: '5%', paddingBottom: '2%', }, - badgeButton: { - width: 30, - height: 30, - borderRadius: 15, + animatedBadgeView: { + position: 'absolute', }, - animatedBadgeView: {position: 'absolute'}, universityIconContainer: { width: normalize(31), height: normalize(38), diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts index 339c9ae0..14c2eb71 100644 --- a/src/components/suggestedPeople/index.ts +++ b/src/components/suggestedPeople/index.ts @@ -1,3 +1,4 @@ export {default as MutualFriends} from './MutualFriends'; export {default as BadgesDropdown} from './BadgesDropdown'; export {default as SPTaggsBar} from './SPTaggsBar'; +export {default as BadgeIcon} from './BadgeIcon'; -- cgit v1.2.3-70-g09d2 From 7f47d1f36255ff1e42efea1d0cf6c1b97fc557b1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 14:52:49 -0400 Subject: Finish styling badges --- src/components/suggestedPeople/BadgeIcon.tsx | 13 ++++-- src/screens/suggestedPeople/SPBody.tsx | 61 +++++++++++++++++++--------- 2 files changed, 51 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx index e8425308..8f576a43 100644 --- a/src/components/suggestedPeople/BadgeIcon.tsx +++ b/src/components/suggestedPeople/BadgeIcon.tsx @@ -1,6 +1,12 @@ import {useNavigation} from '@react-navigation/core'; import React from 'react'; -import {Image, ImageSourcePropType, StyleSheet} from 'react-native'; +import { + Image, + ImageSourcePropType, + StyleProp, + StyleSheet, + ViewStyle, +} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import {UniversityBadge} from '../../types'; @@ -9,13 +15,14 @@ import {normalize} from '../../utils'; interface BadgeIconProps { badge: UniversityBadge; img: ImageSourcePropType; + style?: StyleProp; } -const BadgeIcon: React.FC = ({badge, img}) => { +const BadgeIcon: React.FC = ({badge, img, style}) => { const navigation = useNavigation(); return ( { navigation.navigate('MutualBadgeHolders', { badge_id: badge.id, diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 352e4433..9708a652 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,17 +1,11 @@ import {useNavigation} from '@react-navigation/native'; import React, {Fragment, useEffect, useMemo, useState} from 'react'; -import { - ImageSourcePropType, - ScrollView, - StyleSheet, - Text, - View, -} from 'react-native'; +import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; -import {SPTaggsBar} from '../../components'; -import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople'; +import {UniversityIcon} from '../../components'; +import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople'; import {BADGE_DATA} from '../../constants/badges'; import { ProfilePreviewType, @@ -34,7 +28,6 @@ const SPBody: React.FC = ({ user, university, mutual_friends, - social_links, suggested_people_url, friendship, badges, @@ -130,8 +123,7 @@ const SPBody: React.FC = ({ userXId: loggedInUserId === user.id ? undefined : user.id, screenType, }); - }} - style={styles.nameInfoContainer}> + }}> {user.first_name} @{user.username} @@ -144,20 +136,35 @@ const SPBody: React.FC = ({ {firstItem && 'Suggested People'} - {localBadges && } + - + {user.id !== loggedInUserId && } - + {localBadges.length !== 0 && ( + // Badges aligned left and spaced as if there are 5 items + + {localBadges.map(({badge, img}, index) => ( + + ))} + {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( + + ))} + + )} @@ -223,7 +230,6 @@ const styles = StyleSheet.create({ textShadowRadius: normalize(2), letterSpacing: normalize(2), }, - nameInfoContainer: {}, addButton: { justifyContent: 'center', alignItems: 'center', @@ -271,6 +277,21 @@ const styles = StyleSheet.create({ shadowOffset: {width: 2, height: 2}, shadowOpacity: 0.5, }, + universityIcon: { + left: '5%', + width: normalize(31), + height: normalize(38), + }, + badgeContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-evenly', + marginBottom: 25, + }, + badge: { + width: normalize(52), + height: normalize(52), + borderWidth: 1, }, }); -- cgit v1.2.3-70-g09d2 From 0a7a50d53ab4f34f07c4a66c38c7a6bd6d89c550 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 14:54:28 -0400 Subject: Remove test border --- src/screens/suggestedPeople/SPBody.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 9708a652..3d7cf3f2 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -291,7 +291,6 @@ const styles = StyleSheet.create({ badge: { width: normalize(52), height: normalize(52), - borderWidth: 1, }, }); -- cgit v1.2.3-70-g09d2 From f7e5b61a7b81610f87f1650a3a3d4c2ba56665fe Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 15:03:55 -0400 Subject: Lint --- src/components/suggestedPeople/BadgesDropdown.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 50f924e4..716aec48 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -1,12 +1,11 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {Image, ImageSourcePropType, StyleSheet} from 'react-native'; +import {ImageSourcePropType, StyleSheet} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import LinearGradient from 'react-native-linear-gradient'; import Animated, {Easing} from 'react-native-reanimated'; -import {UniversityType, UniversityBadge} from '../../types'; import {BadgeIcon, UniversityIcon} from '..'; -import {normalize, SCREEN_WIDTH} from '../../utils'; +import {UniversityBadge, UniversityType} from '../../types'; +import {normalize} from '../../utils'; import UniversityIconClicked from './UniversityIconClicked'; interface BadgesDropdownProps { @@ -26,7 +25,6 @@ const BadgesDropdown: React.FC = ({ // Determines the absolute position of the individual badges [0, i * 40] let [top, setTop] = useState[]>([]); - const navigation = useNavigation(); useEffect(() => { // Initialize position of badges to 0 -- cgit v1.2.3-70-g09d2 From c6253ba5aa32638b63eb6ba1fcd11db6f8b6ba90 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 15:06:05 -0400 Subject: Lint (again) --- src/components/suggestedPeople/BadgesDropdown.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 716aec48..7b35c61a 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -1,4 +1,3 @@ -import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {ImageSourcePropType, StyleSheet} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; -- cgit v1.2.3-70-g09d2 From 0cdd6943aa37dbcc69ee161f3b853169464950fa Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 26 May 2021 17:43:30 -0700 Subject: Code refactor minor --- src/screens/suggestedPeople/SPBody.tsx | 55 ++++++++++++++++------------------ 1 file changed, 25 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 3d7cf3f2..eb80da49 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -115,20 +115,30 @@ const SPBody: React.FC = ({ [suggested_people_url], ); - const NamePlate = () => { - return ( - { - navigation.navigate('Profile', { - userXId: loggedInUserId === user.id ? undefined : user.id, - screenType, - }); - }}> - {user.first_name} - @{user.username} - - ); - }; + const NamePlate = () => ( + { + navigation.navigate('Profile', { + userXId: loggedInUserId === user.id ? undefined : user.id, + screenType, + }); + }}> + {user.first_name} + @{user.username} + + ); + + const Badges = () => ( + // Badges aligned left and spaced as if there are 5 items + + {localBadges.map(({badge, img}, index) => ( + + ))} + {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( + + ))} + + ); return ( @@ -149,22 +159,7 @@ const SPBody: React.FC = ({ {user.id !== loggedInUserId && } - {localBadges.length !== 0 && ( - // Badges aligned left and spaced as if there are 5 items - - {localBadges.map(({badge, img}, index) => ( - - ))} - {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( - - ))} - - )} + {localBadges.length !== 0 && } -- cgit v1.2.3-70-g09d2 From f1830b4e48887014d3561ff359f323635a25bc71 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 26 May 2021 17:44:05 -0700 Subject: Move dropdown to legacy --- src/components/suggestedPeople/BadgesDropdown.tsx | 130 --------------------- src/components/suggestedPeople/index.ts | 1 - .../suggestedPeople/legacy/BadgesDropdown.tsx | 130 +++++++++++++++++++++ 3 files changed, 130 insertions(+), 131 deletions(-) delete mode 100644 src/components/suggestedPeople/BadgesDropdown.tsx create mode 100644 src/components/suggestedPeople/legacy/BadgesDropdown.tsx (limited to 'src') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx deleted file mode 100644 index 7b35c61a..00000000 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React, {useEffect, useState} from 'react'; -import {ImageSourcePropType, StyleSheet} from 'react-native'; -import {TouchableOpacity} from 'react-native-gesture-handler'; -import Animated, {Easing} from 'react-native-reanimated'; -import {BadgeIcon, UniversityIcon} from '..'; -import {UniversityBadge, UniversityType} from '../../types'; -import {normalize} from '../../utils'; -import UniversityIconClicked from './UniversityIconClicked'; - -interface BadgesDropdownProps { - university: UniversityType; - localBadges: { - badge: UniversityBadge; - img: ImageSourcePropType; - }[]; -} - -const BadgesDropdown: React.FC = ({ - university, - localBadges, -}) => { - // Used to toggle between dropdown being displayed and not - const [displayBadges, setDisplayBadges] = useState(false); - - // Determines the absolute position of the individual badges [0, i * 40] - let [top, setTop] = useState[]>([]); - - useEffect(() => { - // Initialize position of badges to 0 - const defineBadgePositions = () => { - let localTop: Animated.Value[] = []; - localBadges.forEach(() => { - localTop.push(new Animated.Value(0)); - }); - setTop(localTop); - }; - defineBadgePositions(); - }, []); - - // Displays badges dropdown by updating top [state] for every badge - const animate = () => { - for (let i = 0; i < localBadges?.length; i++) { - if (top) { - Animated.timing(top[i], { - toValue: i * 40 + 50, - duration: 150, - easing: Easing.linear, - }).start(); - } - } - }; - - // Draws back displayed badges by setting top [state] to 0 for every badge - const animateBack = () => { - for (let i = 0; i < localBadges?.length; i++) { - if (top) { - Animated.timing(top[i], { - toValue: 0, - duration: 150, - easing: Easing.linear, - }).start(); - } - } - }; - - return ( - - { - const updatedBadges = !displayBadges; - setDisplayBadges(updatedBadges); - if (updatedBadges) { - animate(); - } else { - animateBack(); - } - }}> - {displayBadges ? ( - - ) : ( - - )} - - {localBadges && - localBadges.map(({badge, img}, index) => ( - - - - ))} - - ); -}; - -const styles = StyleSheet.create({ - badgesContainer: { - flexDirection: 'column', - justifyContent: 'space-between', - alignItems: 'center', - width: 38, - left: '5%', - paddingBottom: '2%', - }, - animatedBadgeView: { - position: 'absolute', - }, - universityIconContainer: { - width: normalize(31), - height: normalize(38), - }, -}); - -export default BadgesDropdown; diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts index 14c2eb71..34bb96d4 100644 --- a/src/components/suggestedPeople/index.ts +++ b/src/components/suggestedPeople/index.ts @@ -1,4 +1,3 @@ export {default as MutualFriends} from './MutualFriends'; -export {default as BadgesDropdown} from './BadgesDropdown'; export {default as SPTaggsBar} from './SPTaggsBar'; export {default as BadgeIcon} from './BadgeIcon'; diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx new file mode 100644 index 00000000..267355f3 --- /dev/null +++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx @@ -0,0 +1,130 @@ +import React, {useEffect, useState} from 'react'; +import {ImageSourcePropType, StyleSheet} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import Animated, {Easing} from 'react-native-reanimated'; +import {BadgeIcon, UniversityIcon} from '../..'; +import {UniversityBadge, UniversityType} from '../../../types'; +import {normalize} from '../../../utils'; +import UniversityIconClicked from '../UniversityIconClicked'; + +interface BadgesDropdownProps { + university: UniversityType; + localBadges: { + badge: UniversityBadge; + img: ImageSourcePropType; + }[]; +} + +const BadgesDropdown: React.FC = ({ + university, + localBadges, +}) => { + // Used to toggle between dropdown being displayed and not + const [displayBadges, setDisplayBadges] = useState(false); + + // Determines the absolute position of the individual badges [0, i * 40] + let [top, setTop] = useState[]>([]); + + useEffect(() => { + // Initialize position of badges to 0 + const defineBadgePositions = () => { + let localTop: Animated.Value[] = []; + localBadges.forEach(() => { + localTop.push(new Animated.Value(0)); + }); + setTop(localTop); + }; + defineBadgePositions(); + }, []); + + // Displays badges dropdown by updating top [state] for every badge + const animate = () => { + for (let i = 0; i < localBadges?.length; i++) { + if (top) { + Animated.timing(top[i], { + toValue: i * 40 + 50, + duration: 150, + easing: Easing.linear, + }).start(); + } + } + }; + + // Draws back displayed badges by setting top [state] to 0 for every badge + const animateBack = () => { + for (let i = 0; i < localBadges?.length; i++) { + if (top) { + Animated.timing(top[i], { + toValue: 0, + duration: 150, + easing: Easing.linear, + }).start(); + } + } + }; + + return ( + + { + const updatedBadges = !displayBadges; + setDisplayBadges(updatedBadges); + if (updatedBadges) { + animate(); + } else { + animateBack(); + } + }}> + {displayBadges ? ( + + ) : ( + + )} + + {localBadges && + localBadges.map(({badge, img}, index) => ( + + + + ))} + + ); +}; + +const styles = StyleSheet.create({ + badgesContainer: { + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + width: 38, + left: '5%', + paddingBottom: '2%', + }, + animatedBadgeView: { + position: 'absolute', + }, + universityIconContainer: { + width: normalize(31), + height: normalize(38), + }, +}); + +export default BadgesDropdown; -- cgit v1.2.3-70-g09d2