mirror of
https://github.com/mudabbir-ahmad/Project-MAD-crudler.git
synced 2026-10-07 20:40:20 +00:00
Added Screen component and other pages
This commit is contained in:
1 parent
1c4e1ea49e
commit
5345bd120b
10 files changed
+113
-89
No files matched your search
@@ -1,6 +1,9 @@
|
||||
import { NavigationContainer } from "@react-navigation/native";
|
||||
import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import ModuleListScreen from "./src/components/screens/ModuleListScreen";
|
||||
import ModuleModifyScreen from "./src/components/screens/ModuleModifyScreen";
|
||||
import ModuleViewScreen from "./src/components/screens/ModuleViewScreen";
|
||||
import ModuleAddScreen from "./src/components/screens/ModuleAddScreen";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
|
||||
@@ -12,18 +15,36 @@ export const App = () => {
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator
|
||||
initialRouteName='ModuleListScreen'
|
||||
initialRouteName='ModuleAddScreen'
|
||||
screenOptions= {{
|
||||
headerStyle: { backgroundColor: "black" },
|
||||
headerTintColor: "white"
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="ModuleListScreen"
|
||||
component={ModuleListScreen}
|
||||
options={{ title: 'List Modules' }}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="ModuleAddScreen"
|
||||
component={ModuleAddScreen}
|
||||
options={{ title: 'Add Modules' }}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="ModuleViewScreen"
|
||||
component={ModuleViewScreen}
|
||||
options={{ title: 'View Modules' }}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="ModuleModifyScreen"
|
||||
component={ModuleModifyScreen}
|
||||
options={{ title: 'Modify Modules' }}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="ModuleListScreen"
|
||||
component={ModuleListScreen}
|
||||
options={{ title: 'List Modules' }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
|
||||
</NavigationContainer>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
|
||||
const Screen = ({children}) => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<View style={styles.screen}>
|
||||
{children}
|
||||
<StatusBar style="light" />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
|
||||
export default Screen;
|
||||
@@ -1,22 +0,0 @@
|
||||
export default function add() {
|
||||
// Initialisation ...............
|
||||
// State ........................
|
||||
// Handlers .....................
|
||||
// View .........................
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>activity 1 complete on week 1 yay!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
export default function list() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>activity 1 complete on week 1 yay!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
export default function modify() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>activity 1 complete on week 1 yay!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
|
||||
export const ModuleAddScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<Text>Add</Text>
|
||||
<StatusBar style="auto" />
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({});
|
||||
|
||||
export default ModuleAddScreen;
|
||||
@@ -7,20 +7,13 @@ export const ModuleListScreen = () => {
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Screen style={styles.container}>
|
||||
<Text>List</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
const styles = StyleSheet.create({});
|
||||
|
||||
export default ModuleListScreen;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
|
||||
export const ModuleModifyScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<Text>Modify</Text>
|
||||
<StatusBar style="auto" />
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({});
|
||||
|
||||
export default ModuleModifyScreen;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
|
||||
export const ModuleViewScreen = () => {
|
||||
// Initialisation -------------
|
||||
// State ----------------------
|
||||
// Handlers -------------------
|
||||
// View -----------------------
|
||||
return (
|
||||
<Screen style={styles.container}>
|
||||
<Text>View</Text>
|
||||
<StatusBar style="auto" />
|
||||
</Screen>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({});
|
||||
|
||||
export default ModuleViewScreen;
|
||||
@@ -1,17 +0,0 @@
|
||||
export default function view() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>activity 1 complete on week 1 yay!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user