fixed some pages + bottom tab nav enabled - made a new root nav file

JunnieLee · Aug 22, 2020 · 014eb71 · 014eb71
1 parent 7d581b9
commit 014eb71
Show file tree

Hide file tree

Showing 20 changed files with 447 additions and 198 deletions.
diff --git a/App.tsx b/App.tsx
@@ -11,6 +11,8 @@
 import 'react-native-gesture-handler';
 import { NavigationContainer } from '@react-navigation/native';
 
+
+
 import {ApolloProvider} from '@apollo/react-hooks';
 /*
 import ApolloClient from 'apollo-boost';
@@ -27,15 +29,15 @@ import auth from '@react-native-firebase/auth';
 import { ThemeProvider } from 'styled-components';
 import styled from 'styled-components/native';
 
-import React from 'react';
+import React, {useState} from 'react';
 
 import {
   SafeAreaView,
   StyleSheet,
   ScrollView,
   View,
-  Text,
-  StatusBar,
+  Text, Platform,
+  StatusBar, Alert, Dimensions,
 } from 'react-native';
 
 import {
@@ -53,7 +55,7 @@ import MainBottomTab from './MyApp/components/NavBars/MainBottomTab';
 import MyRecPage from "./MyApp/screens/My_Rec/MyRecPage";
 import GenreDetailPage from "./MyApp/screens/Details/GenreDetailPage";
 import My_BasicPage from './MyApp/screens/MY/My_BasicPage';
-
+import EventDetailPage from './MyApp/screens/Details/EventDetailPage';
 
 declare const global: {HermesInternal: null | {}};
 
@@ -79,32 +81,42 @@ const client = new ApolloClient({
 });
 //
 
+const Width = Dimensions.get('window').width;
+const Height = Dimensions.get('window').height;
 
 const App = () => {
+
+  const [scrollY, setY] = useState(0);
+
   return (
       <ApolloProvider client={client}>
         <NavigationContainer>
       <StatusBar barStyle="dark-content" backgroundColor={'transparent'} translucent={true}/>
-      <SafeAreaView style={{ flex: 1 }}>
+
+          <SafeAreaView style={{ flex: 1 }}>
           {/* Page Rendering*/}
 
-         <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
+          <View style={{ width:'100%', paddingTop: Platform.OS === 'android' ? 25 : 0}}/>
+         <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}
+                     onScroll={(e)=>{ setY(e.nativeEvent.contentOffset.y)}}
+                     scrollEventThrottle={16}
+         >
+
            {/*<MyRecPage/>*/}
            {/*<MainPage/>*/}
-            <My_BasicPage />
+           {/*<My_BasicPage /> */}
            {/* <GenreDetailPage/>*/}
 
+            <EventDetailPage scrollY={scrollY}/>
+
         </ScrollView>
 
           {/* Fixed Footer Rendering*/}
           <View style={{ position: 'absolute', bottom: 0, width:'100%'}}>
               <MainBottomTab/>
-                <View style={{ height : 80, backgroundColor: 'pink'}}>
-                    <Text style={{ marginTop : 50}}> Area saved for checking the bottom tab ! </Text>
-                </View>
           </View>
 
-      </SafeAreaView>
+          </SafeAreaView>
         </NavigationContainer>
       </ApolloProvider>
       );
@@ -113,40 +125,7 @@ const App = () => {
 const styles = StyleSheet.create({
   scrollView: {
     backgroundColor: 'white'// Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
+  }
 });
 
 export default App;
diff --git a/MyApp/components/Items/MyReviewItem.js b/MyApp/components/Items/MyReviewItem.js
@@ -8,10 +8,10 @@ const MyReviewItem = (props) => {
 
     var ratings = [ ];
     for (var i=0; i < props.rating ; i++){
-        ratings.push( <FilledStar style={{ size: 13 }}/>);
+        ratings.push( <FilledStar key={i} style={{ size: 13 }}/>);
     }
     for (var i=0; i < (5-props.rating) ; i++){
-        ratings.push( <EmptyStar style={{ size: 13 }}/> );
+        ratings.push( <EmptyStar key={i+5} style={{ size: 13 }}/> );
     }
 
     return (

diff --git a/MyApp/components/Items/RecommendationItem.js b/MyApp/components/Items/RecommendationItem.js
@@ -13,12 +13,12 @@ const RecommendationItem = (props) => {
 
     for (var i=0; i < props.rating ; i++){
         ratings.push(
-            <FilledStar style={{ size: 13 }}/>
+            <FilledStar key={i} style={{ size: 13 }}/>
         );
     }
     for (var i=0; i < (5-props.rating) ; i++){
         ratings.push(
-            <EmptyStar style={{ size: 13 }}/>
+            <EmptyStar key={i+5} style={{ size: 13 }}/>
         );
     }
 

diff --git a/MyApp/components/NavBars/GenreSideBar.js b/MyApp/components/NavBars/GenreSideBar.js
@@ -16,6 +16,18 @@ const GenreSideBar =  props => {
     var MenuItems = [];
 
     for(let i = 0; i < MenuItems_name.length; i++){
+
+        let underline_len = '0%';
+        let text_len = MenuItems_name[i].length;
+
+        if (text_len==2){
+            underline_len = '42%';
+        } else if (text_len==3){
+            underline_len = '62%';
+        } else if (text_len==5){
+            underline_len = '98%';
+        }
+
         MenuItems.push(
             <View key = {i}>
                 <TouchableOpacity style={styles.MenuItem}
@@ -25,7 +37,9 @@ const GenreSideBar =  props => {
                     </Text>
                     {/* underline for focused element */}
                     {(i==ActivatedIdx) ?
-                        <View style={styles.underlineRectangle} /> : null }
+                        <View style={{ height: 4, backgroundColor: '#4d5c6f',
+                            width:underline_len }} />
+                            : null }
                 </TouchableOpacity>
 
             </View>
@@ -41,9 +55,10 @@ const GenreSideBar =  props => {
 
 const styles = StyleSheet.create({
     LeftMenu: {
-        width:100,
-        marginLeft:20,
-        alignItems: 'flex-start'
+        width: '27%',
+        marginLeft:'4.5%',
+        alignItems: 'flex-start',
+        marginTop:'2%'
     },
     MenuItem: {
         marginTop:5,