Add @openspacelabs/react-native-zoomable-view dependency. Also change…

…d styling
sst-inc · Apr 17, 2024 · a3b9917 · a3b9917
1 parent ca433e5
commit a3b9917
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 23 deletions.
diff --git a/App.js b/App.js
@@ -91,7 +91,7 @@ const App = () => {
           <Svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
               <Path d="M18.125 7.5C18.1253 7.44189 18.1174 7.38403 18.1016 7.32812L16.9805 3.40625C16.9051 3.14603 16.7476 2.91716 16.5315 2.75382C16.3153 2.59049 16.0522 2.50145 15.7812 2.5H4.21875C3.94784 2.50145 3.68467 2.59049 3.46853 2.75382C3.25239 2.91716 3.09488 3.14603 3.01953 3.40625L1.89922 7.32812C1.88308 7.38399 1.87493 7.44185 1.875 7.5V8.75C1.875 9.23514 1.98795 9.71362 2.20492 10.1475C2.42188 10.5815 2.73689 10.9589 3.125 11.25V16.25C3.125 16.5815 3.2567 16.8995 3.49112 17.1339C3.72554 17.3683 4.04348 17.5 4.375 17.5H15.625C15.9565 17.5 16.2745 17.3683 16.5089 17.1339C16.7433 16.8995 16.875 16.5815 16.875 16.25V11.25C17.2631 10.9589 17.5781 10.5815 17.7951 10.1475C18.012 9.71362 18.125 9.23514 18.125 8.75V7.5ZM4.21875 3.75H15.7812L16.6734 6.875H3.32891L4.21875 3.75ZM8.125 8.125H11.875V8.75C11.875 9.24728 11.6775 9.72419 11.3258 10.0758C10.9742 10.4275 10.4973 10.625 10 10.625C9.50272 10.625 9.02581 10.4275 8.67418 10.0758C8.32254 9.72419 8.125 9.24728 8.125 8.75V8.125ZM6.875 8.125V8.75C6.875 9.24728 6.67746 9.72419 6.32583 10.0758C5.9742 10.4275 5.49728 10.625 5 10.625C4.50272 10.625 4.02581 10.4275 3.67418 10.0758C3.32254 9.72419 3.125 9.24728 3.125 8.75V8.125H6.875ZM15.625 16.25H4.375V11.8125C4.58075 11.854 4.79011 11.8749 5 11.875C5.48514 11.875 5.96362 11.762 6.39754 11.5451C6.83147 11.3281 7.20892 11.0131 7.5 10.625C7.79109 11.0131 8.16854 11.3281 8.60246 11.5451C9.03638 11.762 9.51486 11.875 10 11.875C10.4851 11.875 10.9636 11.762 11.3975 11.5451C11.8315 11.3281 12.2089 11.0131 12.5 10.625C12.7911 11.0131 13.1685 11.3281 13.6025 11.5451C14.0364 11.762 14.5149 11.875 15 11.875C15.2099 11.8749 15.4192 11.854 15.625 11.8125V16.25ZM15 10.625C14.5027 10.625 14.0258 10.4275 13.6742 10.0758C13.3225 9.72419 13.125 9.24728 13.125 8.75V8.125H16.875V8.75C16.875 9.24728 16.6775 9.72419 16.3258 10.0758C15.9742 10.4275 15.4973 10.625 15 10.625Z" fill="#EBEBEF"/>
             </Svg>
-            <Text style={{ color: 'white', fontSize: 16 }}>Booth Info</Text>
+            <Text style={{ color: 'white', fontSize: 16 }}>Booth Information</Text>
           </View>
           </LinearGradient>
         ),

diff --git a/Events.js b/Events.js
@@ -24,6 +24,7 @@ const events = [
     location: ' @Auditorium',
     timeRange: '9:30am - 9:45am',
     notifTime: '8:30am',
+    actualLocation: 'Auditorium',
   },
   {
     id: '2',
@@ -32,6 +33,7 @@ const events = [
     location: ' @LO2',
     timeRange: '9:45am - 10:30am',
     notifTime: '9:00am',
+    actualLocation: 'Learning Oasis 2',
   },
   {
     id: '3',
@@ -40,6 +42,7 @@ const events = [
     location: ' @LO1',
     timeRange: '10:30am - 10:45am',
     notifTime: '9:15am',
+    actualLocation: 'Learning Oasis 1',
   },
   {
     id: '4',
@@ -48,6 +51,7 @@ const events = [
     location: ' @Atrium',
     timeRange: '10:45am - 11:15am',
     notifTime: '9:20am',
+    actualLocation: 'Atrium',
   },
   {
     id: '5',
@@ -56,6 +60,7 @@ const events = [
     location: ' @LO2',
     timeRange: '11.15am - 11.30am',
     notifTime: '9:20am',
+    actualLocation: 'Learning Oasis 2',
   },
   {
     id: '6',
@@ -64,6 +69,7 @@ const events = [
     location: ' @Auditorium',
     timeRange: '11:30am - 11:45am',
     notifTime: '9:20am',
+    actualLocation: 'Auditorium',
   },
   {
     id: '7',
@@ -72,6 +78,7 @@ const events = [
     location: ' @LO1',
     timeRange: '11.45am - 12.00am',
     notifTime: '9:20am',
+    actualLocation: 'Learning Oasis 1',
   },
 ];
 
@@ -141,7 +148,10 @@ const FlatListItem = ({item}) => {
       <View style={styles.eventsContainer}>
         <View style={styles.eventsBox}>
           <Text style={styles.basicText}>{item.time}</Text>
-          <View style={styles.eventsDetailsBox}>
+          <TouchableOpacity style={styles.eventsDetailsBox} 
+                onPress={
+                  () => alert(item.name + ' is at ' + item.actualLocation + ' at ' + item.timeRange)
+                }>
             <View>
               <View
                 style={{
@@ -152,7 +162,7 @@ const FlatListItem = ({item}) => {
                 <Text style={styles.basicText}>{item.name}</Text>
                 <Text style={styles.generalText}>{item.location}</Text>
               </View>
-              <Text style={styles.generalText}> {item.timeRange}</Text>
+              <Text style={styles.generalText}>   {item.timeRange}</Text>
               <View style={{flex: 1, minHeight: 40}}>
                 <TouchableOpacity
                   style={{position: 'absolute', top: -30, right: 0}}
@@ -193,7 +203,7 @@ const FlatListItem = ({item}) => {
                 </TouchableOpacity>
               </View>
             </View>
-          </View>
+          </TouchableOpacity>
         </View>
       </View>
       <View style={{marginTop: '5%'}} />
@@ -248,7 +258,7 @@ const EventsPage = ({navigation}) => {
               </Text>
             </View>
             <View style={styles.topBoxPart1}>
-              <Text style={styles.topBoxHeader}>Principal’s{'\n'}talk</Text>
+              <Text style={styles.topBoxHeader}>CCA{'\n'}Performance</Text>
               <Svg
                 style={{transform: [{translateY: -31}]}}
                 xmlns="http://www.w3.org/2000/svg"
@@ -387,7 +397,7 @@ const EventsPage = ({navigation}) => {
                   fill-opacity="0.7"
                 />
               </Svg>
-              <Text style={styles.generalText}> Auditorium</Text>
+              <Text style={styles.generalText}> Atrium</Text>
               <Text> </Text>
               <Svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -401,7 +411,7 @@ const EventsPage = ({navigation}) => {
                   fill-opacity="0.7"
                 />
               </Svg>
-              <Text style={styles.generalText}> 0800 - 0900</Text>
+              <Text style={styles.generalText}> 1045 - 11:15</Text>
             </View>
           </View>
           <View style={styles.seperator}>

diff --git a/boothScreens/AppliedDetails.js b/boothScreens/AppliedDetails.js
@@ -6,8 +6,12 @@ import SearchBar from 'react-native-search-bar';
 import { data } from './BoothInfo';
 import LinearGradient from 'react-native-linear-gradient';
 import { useNavigation } from '@react-navigation/native';
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
+import { Dimensions } from 'react-native';
+
 
 const AppliedDetails = ({ route }) => {
+  const windowWidth = Dimensions.get('window').width;
     // Get the item data from the navigation parameters
     const { item } = route.params;
     const navigation = useNavigation();
@@ -136,19 +140,27 @@ const AppliedDetails = ({ route }) => {
                     justifyContent: 'center',
                     marginTop: 40,
                   }}>
-                  <View style={styles.imageRectangle}>
-                    <Image
+                    <ReactNativeZoomableView 
+                      style={{...styles.imageRectangle, width:  windowWidth * 0.9}}
+                      maxZoom={2.5}
+                      minZoom={1}
+                      zoomStep={0.5}
+                      initialZoom={1}
+                      panEnabled={true}
+                      centerOn={{ zoom: 1, x: 0, y: 0 }}
+                    >
+                      <Image
                       source={item.image}
                       style={{width: '100%', height: 252}}
                       resizeMode="contain"
                     />
-                  </View>
+                  </ReactNativeZoomableView>
                 </View>
                 <View style={{marginTop: 10, marginLeft: '5%', width: '85%'}}>
                   <Text style={{color: '#EBEBEF', fontSize: 32, marginTop: 10}}>
                     {item.header}
                   </Text>
-                  <Text style={{color: '#EBEBEF', fontSize: 16, marginTop: 25}}>
+                  <Text style={{color: '#EBEBEF', fontSize: 16, marginTop: 25,textAlign:'justify',}}>
                     {item.description}
                   </Text>
                   <View style={{marginTop: 50, flexDirection: 'row'}}>
@@ -240,6 +252,7 @@ const AppliedDetails = ({ route }) => {
         color: '#EBEBEF',
         fontFamily: 'Lato',
         fontSize: 16,
+        paddingBottom: 20,
     },
     redirectText:{
         color: '#ABABED',
@@ -250,7 +263,6 @@ const AppliedDetails = ({ route }) => {
         textDecorationLine: 'underline',
     },
     imageRectangle:{
-        width: '90%',
         height: 296,
         flexShrink: 0,
         borderRadius: 20,

diff --git a/boothScreens/BoothInfo.js b/boothScreens/BoothInfo.js
@@ -97,9 +97,9 @@ const data = [
     header: 'Media Club',
     description:
       'The SST Media Club is a vibrant platform for students passionate about multimedia. Explore journalism, photography, videography, and more. Develop skills through workshops, projects, and collaborations. Learn from experts and peers, honing camera work, editing, storytelling, and creativity. Whether experienced or new, the Media Club offers a space to grow in multimedia and technology. Join us to unleash your creativity and skills!',
-    location: 'Robotics Room',
+    location: 'Atrium',
     image: require('../assets/layoutPics/Level3.png'),
-    sstLoc: 'L3 Block C',
+    sstLoc: 'L1 Block A',
   },
   {
     id: '6',
@@ -109,7 +109,7 @@ const data = [
       'Robotics @APEX began in 2010, guided by Effective, Efficient, and Exemplary values. With dedicated students and staff, the club earned recognition in local and international robotics communities. Members work with LEGO, Arduino, and OpenCV systems, applying their skills in competitions like the First Lego League Cityshaper, iCooL Challenge, and IDE Robotics Challenge. Creative projects solve real-world issues. Competing and research develop resilience, critical thinking, communication, and project management skills for life.',
     location: 'Atrium',
     image: require('../assets/layoutPics/Atrium.png'),
-    sstLoc: 'L1 Block A',
+    sstLoc: 'L3 Block C',
   },
   {
     id: '7',
@@ -302,8 +302,7 @@ const BoothInfoParentPage = ({navigation}) => {
             )}
             <View style={{marginTop: 80, padding: '1%'}}>
               <Text style={styles.standardText}>
-                Booth writeup Booth writeup Booth writeup Booth writeup Booth
-                writeup Booth writeup{' '}
+                Access information about the booths and subjects. There are many exciting things to explore!
               </Text>
             </View>
             <View style={{margin: '30%'}} />
@@ -542,6 +541,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     width: '90%',
     marginLeft: '5%',
+    marginTop: '1%',
   },
   imageBackground: {
     width: '100%',
@@ -553,7 +553,7 @@ const styles = StyleSheet.create({
     fontFamily: 'Lato',
     fontSize: 40,
     fontWeight: 'normal',
-    marginLeft: '4%',
+    marginLeft: '2%',
   },
   box: {
     width: '88%',

diff --git a/boothScreens/CCA.js b/boothScreens/CCA.js
@@ -14,6 +14,8 @@ import Svg, {G, Path, Defs, ClipPath, Rect, Line} from 'react-native-svg';
 import {data} from './BoothInfo';
 import SearchBar from 'react-native-search-bar';
 import {useNavigation} from '@react-navigation/native';
+import { LogBox } from 'react-native';
+
 const sportsCCAData = [
   {
     id: '1',
@@ -64,9 +66,9 @@ const clubCCAData = [
     header: 'Media Club',
     description:
       'The SST Media Club is a vibrant platform for students passionate about multimedia. Explore journalism, photography, videography, and more. Develop skills through workshops, projects, and collaborations. Learn from experts and peers, honing camera work, editing, storytelling, and creativity. Whether experienced or new, the Media Club offers a space to grow in multimedia and technology. Join us to unleash your creativity and skills!',
-    location: 'Robotics Room',
+    location: 'Atrium',
     image: require('../assets/layoutPics/Level3.png'),
-    sstLoc: 'L3 Block C',
+    sstLoc: 'L1 Block A',
   },
   {
     id: '5',
@@ -76,7 +78,7 @@ const clubCCAData = [
       'Robotics @APEX began in 2010, guided by Effective, Efficient, and Exemplary values. With dedicated students and staff, the club earned recognition in local and international robotics communities. Members work with LEGO, Arduino, and OpenCV systems, applying their skills in competitions like the First Lego League Cityshaper, iCooL Challenge, and IDE Robotics Challenge. Creative projects solve real-world issues. Competing and research develop resilience, critical thinking, communication, and project management skills for life.',
     location: 'Atrium',
     image: require('../assets/layoutPics/Atrium.png'),
-    sstLoc: 'L1 Block A',
+    sstLoc: 'L3 Block C',
   },
 ];
 
@@ -180,6 +182,7 @@ const CCA = () => {
   const handlePress = item => {
     navigation.navigate('ADeets', {item});
   };
+  LogBox.ignoreAllLogs();
   return (
     <View style={styles.container}>
       <ImageBackground
@@ -280,7 +283,7 @@ const CCA = () => {
                 <Text style={styles.locationText}> Atrium, L1 Block A</Text>
               </View>
             </View>
-            <ScrollView style={{marginBottom: 500}}>
+            <ScrollView style={{marginBottom: '135%'}}>
               <View>
                 <Text style={styles.ccaTypeHeader}>Sports</Text>
                 <FlatList

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1565,7 +1565,7 @@ SPEC CHECKSUMS:
   RNSVG: 50cf2c7018e57cf5d3522d98d0a3a4dd6bf9d093
   RNVectorIcons: 73ab573085f65a572d3b6233e68996d4707fd505
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: d17d2cc8105eed528474683b42e2ea310e1daf61
+  Yoga: 805bf71192903b20fc14babe48080582fee65a80
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
 PODFILE CHECKSUM: fa1162b2e70dc74c49b0f85f035a5b9dec427a4d

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@notifee/react-native": "^7.8.2",
+    "@openspacelabs/react-native-zoomable-view": "^2.1.6",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-native-community/blur": "^4.4.0",
     "@react-native-community/masked-view": "^0.1.11",