Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to navigate to different screens by clicking on different FlatList items, using react navigation?

$
0
0

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)?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>