I am using flatlist to display the 4 engineering departments. Upon clicking on each item I want to move to a new page that displays its timetable, i.e. on clicking "Electrical Engineering", a new page will open up that will show the timetable for only EE department. Here is the image for reference.
Code for Department Choosing screen:
import React from "react";import {FlatList, Platform, StatusBar, StyleSheet, Text, View} from "react-native";import departments from "../data/Departments";import DepartmentItem from "../components/DepartmentItem";export default function ChooseDepartment() { return (<View style={styles.container}><Text style={styles.title}>Schema</Text><FlatList style={styles.flatlist} data={departments} renderItem={({item}) => <DepartmentItem department={item}/>} keyExtractor={(item) => item.id} /></View> )}const styles = StyleSheet.create({ //styles })
DepartmentItem (Flatlist Item):
import React from "react";import {Department} from "../../../types";import {Text, TouchableOpacity, View} from "react-native";import styles from "./styles";export type DepartmentItemProps = { department: Department}const DepartmentItem = (props: DepartmentItemProps) => { const {department} = props return (<TouchableOpacity style={styles.container}><View style={styles.innerContainer}><Text style={styles.deptName}>{department.name}</Text></View></TouchableOpacity> )}export default DepartmentItem
This is the list of departments:
export default [{ id: "cse", name: "Computer Science and Engineering"}, { id: "dsai", name: "Data Science and Artificial Intelligence"}, { id: "ee", name: "Electrical Engineering"}, { id: "me", name: "Mechanical Engineering"}]
I am a beginner to React Native and want to know in details, how can I use react navigation to move to a new page upon clicking on a flatlist item (specific to that department)?