Skip to content

Commit f6a7d0e

Browse files
KDT2006KDT2006
committed
Navigation fix
1 parent 2f17092 commit f6a7d0e

File tree

5 files changed

+153
-66
lines changed

5 files changed

+153
-66
lines changed

‎TAQ/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { FlatList, StyleSheet, Text, View } from "react-native";
33
import { Colors } from "./config/Colors";
44
import User from "./screens/User";
55
import ClassQueue from "./screens/ClassQueue";
6+
import Navigation from "./Navigation";
67

78
export default function App() {
89
// return <User queueLength={5} estimatedTime={40}/>;
9-
return <ClassQueue/>
10+
// return <ClassQueue/>
11+
return <Navigation />;
1012
}
1113

1214
const styles = StyleSheet.create({

‎TAQ/Navigation.jsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,26 @@ const Stack = createNativeStackNavigator();
1111

1212
function RootStack() {
1313
return (
14-
<ClassQueue />
15-
// <Stack.Navigator screenOptions={{ headerShown: false }}>
16-
// <Stack.Screen name="Auth" component={Auth} />
17-
// <Stack.Screen
18-
// name="Courses"
19-
// component={Home}
20-
// options={{
21-
// animation: "slide_from_bottom",
22-
// headerBackButtonMenuEnabled: false,
23-
// gestureEnabled: false,
24-
// }}
25-
// />
26-
// <Stack.Screen
27-
// name="Location"
28-
// component={Locations}
29-
// options={{
30-
// animation: "slide_from_right",
31-
// }}
32-
// />
33-
// </Stack.Navigator>
14+
// <ClassQueue />
15+
<Stack.Navigator screenOptions={{ headerShown: false }}>
16+
<Stack.Screen name="Auth" component={Auth} />
17+
<Stack.Screen
18+
name="Courses"
19+
component={Home}
20+
options={{
21+
animation: "slide_from_bottom",
22+
headerBackButtonMenuEnabled: false,
23+
gestureEnabled: false,
24+
}}
25+
/>
26+
<Stack.Screen
27+
name="Location"
28+
component={Locations}
29+
options={{
30+
animation: "slide_from_right",
31+
}}
32+
/>
33+
</Stack.Navigator>
3434
);
3535
}
3636

‎TAQ/components/Course.jsx‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,59 @@
1-
import { Dimensions, StyleSheet, Text, View } from "react-native";
1+
import {
2+
Dimensions,
3+
Platform,
4+
Pressable,
5+
StyleSheet,
6+
Text,
7+
View,
8+
} from "react-native";
29
import React from "react";
310
import { Colors } from "../config/Colors";
11+
import Animated, {
12+
useAnimatedStyle,
13+
useSharedValue,
14+
withSpring,
15+
} from "react-native-reanimated";
16+
17+
const Course = ({ course, navigation, disabled }) => {
18+
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
19+
20+
const scale = useSharedValue(1);
21+
22+
const animatedStyle = useAnimatedStyle(() => ({
23+
transform: [{ scale: scale.value }],
24+
}));
25+
26+
const handlePressIn = () => {
27+
scale.value = withSpring(0.9, { damping: 15, stiffness: 100 });
28+
};
29+
30+
const handlePressOut = () => {
31+
scale.value = withSpring(1, { damping: 15, stiffness: 200 });
32+
if (disabled) return;
33+
navigation.navigate("Location"); // Navigate after animation
34+
};
435

5-
const Course = ({ course, isLocation }) => {
636
return (
7-
<View style={styles.container}>
8-
<Text ellipsizeMode="tail" numberOfLines={2} style={styles.name}>{course.name}</Text>
9-
<Text style={styles.code}>{course.code}</Text>
10-
</View>
37+
<AnimatedPressable
38+
style={[styles.container, animatedStyle]}
39+
onPressIn={handlePressIn}
40+
onPressOut={handlePressOut}
41+
delayLongPress={150}
42+
onLongPress={() => {}}
43+
>
44+
<Text
45+
ellipsizeMode="tail"
46+
numberOfLines={2}
47+
style={[styles.name, { fontSize: Platform.OS === "android" ? 14 : 18 }]}
48+
>
49+
{course.name}
50+
</Text>
51+
<Text
52+
style={[styles.code, { fontSize: Platform.OS === "android" ? 13 : 15 }]}
53+
>
54+
{course.code}
55+
</Text>
56+
</AnimatedPressable>
1157
);
1258
};
1359

@@ -23,13 +69,11 @@ const styles = StyleSheet.create({
2369
flex: 1,
2470
},
2571
name: {
26-
fontSize: 13,
2772
fontWeight: "bold",
2873
color: "black",
2974
marginBottom: 10,
3075
},
3176
code: {
32-
fontSize: 12,
3377
color: "black",
3478
},
3579
});

‎TAQ/screens/Auth.jsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Pressable,
3+
StatusBar,
34
StyleSheet,
45
Text,
56
TextInput,
@@ -8,12 +9,17 @@ import {
89
import React, { useState } from "react";
910
import { Colors } from "../config/Colors";
1011

11-
const Auth = () => {
12+
const Auth = ({ navigation }) => {
1213
const [username, setUsername] = useState("");
1314
const [password, setPassword] = useState("");
1415

1516
return (
1617
<View style={styles.container}>
18+
<StatusBar
19+
barStyle={"light-content"}
20+
backgroundColor="transparent"
21+
translucent
22+
/>
1723
<TextInput
1824
style={styles.input}
1925
placeholder="Username"
@@ -26,7 +32,10 @@ const Auth = () => {
2632
value={password}
2733
onChangeText={setPassword}
2834
/>
29-
<Pressable style={styles.login}>
35+
<Pressable
36+
onPress={() => navigation.navigate("Courses")}
37+
style={styles.login}
38+
>
3039
<Text style={{ color: Colors.Background, fontWeight: "bold" }}>
3140
Login
3241
</Text>

‎TAQ/screens/Home.jsx‎

Lines changed: 67 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,75 @@
1-
import {
2-
FlatList,
3-
Platform,
4-
StatusBar,
5-
StyleSheet,
6-
Text,
7-
View,
8-
} from "react-native";
9-
import React from "react";
1+
import { FlatList, StatusBar, StyleSheet, Text, View } from "react-native";
2+
import React, { useEffect } from "react";
3+
import { SafeAreaView } from "react-native-safe-area-context";
104

115
import { Colors } from "../config/Colors";
126
import courses from "../assets/data/courses";
137
import Course from "../components/Course";
148

15-
const Home = () => {
9+
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
10+
11+
const Home = ({ navigation }) => {
12+
const [isScrolling, setIsScrolling] = React.useState(false);
13+
14+
useEffect(() => {
15+
const unsub = navigation.addListener("beforeRemove", (e) => {
16+
e.preventDefault();
17+
});
18+
19+
return unsub;
20+
}, []);
21+
1622
return (
17-
<View style={styles.container}>
18-
{/* User Greeting Header */}
19-
<StatusBar
20-
barStyle={"light-content"}
21-
translucent
22-
backgroundColor={"transparent"}
23-
/>
24-
<View>
25-
<Text style={styles.welcomeText}>Welcome back, Amit</Text>
26-
<Text style={styles.sub}>
27-
Please choose from the list of available office hours below:
28-
</Text>
29-
</View>
23+
<SafeAreaView style={styles.container}>
24+
<View style={{ paddingTop: 10, flex: 1 }}>
25+
{/* User Greeting Header */}
26+
<StatusBar
27+
barStyle={"light-content"}
28+
translucent
29+
backgroundColor={"transparent"}
30+
/>
31+
<View>
32+
<View
33+
style={{
34+
flexDirection: "row",
35+
justifyContent: "space-between",
36+
alignItems: "center",
37+
}}
38+
>
39+
<Text style={styles.welcomeText}>Welcome back, Amit!</Text>
40+
<MaterialIcons name="logout" size={30} color={Colors.Red} />
41+
</View>
42+
<Text style={styles.sub}>
43+
Please choose from the list of available office hours below:
44+
</Text>
45+
</View>
3046

31-
{/* Flatlist of courses */}
32-
<View
33-
style={{ height: 2, backgroundColor: "#fff9", marginVertical: 15 }}
34-
></View>
35-
<FlatList
36-
data={courses}
37-
numColumns={2}
38-
renderItem={({ item, index }) => <Course key={index} course={item} />}
39-
/>
40-
</View>
47+
{/* Flatlist of courses */}
48+
<View
49+
style={{ height: 2, backgroundColor: "#fff9", marginVertical: 15 }}
50+
></View>
51+
<FlatList
52+
data={courses}
53+
numColumns={2}
54+
onScrollBeginDrag={() => {
55+
// Disable touch events while scrolling
56+
setIsScrolling(true);
57+
}}
58+
onScrollEndDrag={() => {
59+
// Enable touch events after scrolling
60+
setIsScrolling(false, 150);
61+
}}
62+
renderItem={({ item, index }) => (
63+
<Course
64+
key={index}
65+
course={item}
66+
navigation={navigation}
67+
disabled={isScrolling}
68+
/>
69+
)}
70+
/>
71+
</View>
72+
</SafeAreaView>
4173
);
4274
};
4375

@@ -46,14 +78,14 @@ export default Home;
4678
const styles = StyleSheet.create({
4779
container: {
4880
flex: 1,
49-
backgroundColor: Colors.Background,
50-
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight + 20 : 0,
81+
backgroundColor: "#0d031b",
5182
padding: 10,
5283
},
5384
welcomeText: {
5485
fontSize: 28,
5586
fontWeight: "bold",
5687
color: Colors.Primary,
88+
width: "70%",
5789
},
5890
sub: {
5991
fontSize: 16,

0 commit comments

Comments
 (0)