aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/images/dummy_badge.pngbin0 -> 843 bytes
-rw-r--r--src/assets/images/football.pngbin0 -> 5374 bytes
-rw-r--r--src/constants/constants.ts2
-rw-r--r--src/routes/main/MainStackNavigator.tsx3
-rw-r--r--src/routes/main/MainStackScreen.tsx8
-rw-r--r--src/screens/badge/BadgeItem.tsx58
-rw-r--r--src/screens/badge/BadgeList.tsx43
-rw-r--r--src/screens/badge/BadgeListHeader.tsx32
-rw-r--r--src/screens/badge/BadgeScreenHeader.tsx39
-rw-r--r--src/screens/badge/BadgeSelection.tsx105
-rw-r--r--src/screens/badge/index.ts9
-rw-r--r--src/screens/index.ts1
12 files changed, 300 insertions, 0 deletions
diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/dummy_badge.png
new file mode 100644
index 00000000..bcffb6e3
--- /dev/null
+++ b/src/assets/images/dummy_badge.png
Binary files differ
diff --git a/src/assets/images/football.png b/src/assets/images/football.png
new file mode 100644
index 00000000..2e8214b7
--- /dev/null
+++ b/src/assets/images/football.png
Binary files differ
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 6e2c9e1c..99526474 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -79,6 +79,8 @@ export const NOTIFICATION_GRADIENT = [
'rgba(247, 248, 248, 1)',
'rgba(247, 248, 248, 0)',
];
+export const BADGE_GRADIENT_FIRST = ['rgba(86, 63, 51, 1)', 'rgba(236, 32, 39, 1)']
+export const BADGE_GRADIENT_REST = ['rgba(78, 54, 41, 1)', 'rgba(236, 32, 39, 1)']
export const SOCIAL_FONT_COLORS = {
INSTAGRAM: INSTAGRAM_FONT_COLOR,
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 901dd993..3a8ade4f 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -71,6 +71,9 @@ export type MainStackParams = {
};
UpdateSPPicture: {
goTo: string;
+ },
+ Badge: {
+ screenType: ScreenType;
};
};
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index aec860f2..b99e2e3a 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -7,6 +7,7 @@ import {normalize} from 'react-native-elements';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {
AnimatedTutorial,
+ BadgeSelection,
CaptionScreen,
CategorySelection,
CreateCustomCategory,
@@ -231,6 +232,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
...headerBarOptions('white', ''),
}}
/>
+ <MainStack.Screen
+ name="Badge"
+ component={BadgeSelection}
+ options={{
+ ...headerBarOptions('white', 'Badge'),
+ }}
+ />
</MainStack.Navigator>
);
};
diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
new file mode 100644
index 00000000..6d2a2f2e
--- /dev/null
+++ b/src/screens/badge/BadgeItem.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import {Background} from '../../components';
+import {SCREEN_WIDTH, normalize} from '../../utils';
+import LinearGradient from 'react-native-linear-gradient';
+import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
+
+interface BadgeItemProps {
+ title: String;
+ resourcePath: String;
+ index: Number;
+}
+
+const BadgeItem: React.FC<BadgeItemProps> = ({title, index}) => {
+ return (
+ <LinearGradient
+ colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
+ useAngle={true}
+ angle={136.69}
+ style={styles.item}>
+ <View style={styles.detailContainer}>
+ <Image
+ source={require('../../assets/images/football.png')}
+ style={styles.imageStyles}
+ />
+ <View style={styles.textContainer}>
+ <Text style={styles.title}>{title}</Text>
+ </View>
+ </View>
+ </LinearGradient>
+ );
+};
+
+const styles = StyleSheet.create({
+ item: {
+ width: SCREEN_WIDTH / 3 - 20,
+ height: SCREEN_WIDTH / 3 - 20,
+ marginLeft: 15,
+ marginBottom: 12,
+ borderRadius: 8,
+ },
+ detailContainer: {flex: 1, justifyContent: 'center', alignItems: 'center'},
+ imageStyles: {
+ width: '31%',
+ height: '31%',
+ marginTop: '11%',
+ },
+ textContainer: {marginTop: '16%'},
+ title: {
+ fontSize: normalize(15),
+ fontWeight: '500',
+ lineHeight: normalize(17.9),
+ textAlign: 'center',
+ color: 'white',
+ },
+});
+
+export default BadgeItem;
diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx
new file mode 100644
index 00000000..aa95b464
--- /dev/null
+++ b/src/screens/badge/BadgeList.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {StyleSheet, SectionList, ScrollView, View} from 'react-native';
+import BadgeItem from './BadgeItem';
+import BadgeHeader from './BadgeListHeader';
+import {SCREEN_HEIGHT} from '../../utils';
+
+interface BadgeListProps {
+ data: any[];
+}
+
+const BadgeList: React.FC<BadgeListProps> = ({data}) => {
+ return (
+ <View>
+ <ScrollView contentContainerStyle={styles.scrollViewStyles}>
+ <SectionList
+ contentContainerStyle={styles.listContainer}
+ sections={data}
+ keyExtractor={(item, index) => item + index}
+ renderItem={({item, index}) => (
+ <BadgeItem title={item} resourcePath={''} index={index} />
+ )}
+ renderSectionHeader={({section: {title}}) => (
+ <BadgeHeader title={title} />
+ )}
+ />
+ </ScrollView>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ listContainer: {
+ flex: 1,
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ },
+ scrollViewStyles: {
+ paddingBottom: SCREEN_HEIGHT * 0.6,
+ },
+});
+
+export default BadgeList;
diff --git a/src/screens/badge/BadgeListHeader.tsx b/src/screens/badge/BadgeListHeader.tsx
new file mode 100644
index 00000000..57364d22
--- /dev/null
+++ b/src/screens/badge/BadgeListHeader.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {SCREEN_WIDTH, normalize} from '../../utils';
+
+interface BadgeHeaderProps {
+ title: String;
+}
+
+const BadgeListHeader: React.FC<BadgeHeaderProps> = ({title}) => {
+ return (
+ <View style={styles.headerContainer}>
+ <Text style={styles.header}>{title}</Text>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ headerContainer: {
+ width: SCREEN_WIDTH * 0.75,
+ marginHorizontal: SCREEN_WIDTH * 0.125,
+ marginBottom: 17,
+ },
+ header: {
+ fontSize: normalize(20),
+ fontWeight: '700',
+ lineHeight: normalize(23.87),
+ color: '#fff',
+ textAlign: 'center',
+ },
+});
+
+export default BadgeListHeader;
diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx
new file mode 100644
index 00000000..6cc576a8
--- /dev/null
+++ b/src/screens/badge/BadgeScreenHeader.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {SCREEN_WIDTH, SCREEN_HEIGHT, normalize} from '../../utils';
+
+const BadgeScreenHeader: React.FC = () => {
+ return (
+ <View style={styles.container}>
+ <Image source={require('../../assets/images/dummy_badge.png')} />
+ <View style={styles.universityTextContainer}>
+ <Text style={styles.universityText}>Brown University Badges</Text>
+ </View>
+ <View style={styles.searchTextContainer}>
+ <Text style={styles.searchText}>
+ Search for organizations you are a part of!
+ </Text>
+ </View>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {alignItems: 'center'},
+ universityTextContainer: {marginTop: 12},
+ universityText: {
+ fontSize: normalize(20),
+ fontWeight: '700',
+ lineHeight: normalize(23.87),
+ color: 'white',
+ },
+ searchTextContainer: {marginTop: 6},
+ searchText: {
+ fontSize: normalize(15),
+ fontWeight: '500',
+ lineHeight: normalize(17.9),
+ color: 'white',
+ },
+});
+
+export default BadgeScreenHeader;
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
new file mode 100644
index 00000000..924eefc3
--- /dev/null
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+ StatusBar,
+ SafeAreaView,
+ View,
+ StyleSheet,
+ ScrollView,
+} from 'react-native';
+import {BackgroundGradientType} from '../../types';
+import {Background} from '../../components';
+import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils';
+import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
+import BadgeList from './BadgeList';
+import BadgeScreenHeader from './BadgeScreenHeader';
+
+import Animated from 'react-native-reanimated';
+
+import {SearchBar} from '../../components';
+/**
+ * Home Screen for displaying Tagg post suggestions
+ * for users to discover and browse
+ */
+
+const DATA = [
+ {
+ title: 'Historically Black Fraternities',
+ data: ['Pizza', 'Burger', 'Risotto'],
+ },
+ {
+ title: 'Sides',
+ data: [
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ 'French Fries',
+ 'Onion Rings',
+ 'Fried Shrimps',
+ ],
+ },
+ {
+ title: 'Drinks',
+ data: ['Water', 'Coke', 'Beer'],
+ },
+ {
+ title: 'Desserts',
+ data: ['Cheese Cake', 'Ice Cream'],
+ },
+];
+
+const BadgeSelection: React.FC = () => {
+ return (
+ <LinearGradient
+ colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
+ style={styles.container}>
+ <StatusBar barStyle={'light-content'} />
+ <SafeAreaView>
+ <View style={styles.listContainer}>
+ <BadgeScreenHeader />
+ <SearchBar
+ style={styles.searchBarStyle}
+ onCancel={() => {}}
+ top={Animated.useValue(0)}
+ />
+ <View style={styles.listContainer}>
+ <BadgeList data={DATA} />
+ </View>
+ </View>
+ </SafeAreaView>
+ </LinearGradient>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ searchBarStyle: {
+ width: '95%',
+ alignSelf: 'center',
+ marginTop: SCREEN_HEIGHT * 0.05,
+ },
+ viewContainer: {marginTop: StatusBarHeight},
+ listContainer: {marginTop: SCREEN_HEIGHT * 0.05},
+});
+
+export default BadgeSelection;
diff --git a/src/screens/badge/index.ts b/src/screens/badge/index.ts
new file mode 100644
index 00000000..f6b20b83
--- /dev/null
+++ b/src/screens/badge/index.ts
@@ -0,0 +1,9 @@
+export {default as BadgeSelection} from './BadgeSelection';
+export {default as BadgeItem} from './BadgeItem';
+export {default as BadgeListHeader} from './BadgeListHeader';
+export {default as BadgeList} from './BadgeList';
+export {default as BadgeScreenHeader} from './BadgeScreenHeader';
+
+
+
+
diff --git a/src/screens/index.ts b/src/screens/index.ts
index faf3d0b7..50ada3d1 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -4,3 +4,4 @@ export * from './profile';
export * from './search';
export * from './suggestedPeople';
export * from './suggestedPeopleOnboarding';
+export * from './badge';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:46:07 +0000