Scribd Logo
Upload

Welcome to Scribd!

  • 20 views

    Year Js

    Uploaded by

    Saksham Gupta
    This React Native code defines a component that displays student data filtered by year. It uses state to store the selected year and corresponding student data. A FlatList renders student names, housing groups, and rooms. Tab buttons allow filtering the data by year, updating the state and list contents. Styles are defined to layout the tabs and list items.

    Copyright:

    © All Rights Reserved
    Download as RTF, PDF, TXT or read online from Scribd

    Year Js

    Uploaded by

    Saksham Gupta
    20 views3 pages
    This React Native code defines a component that displays student data filtered by year. It uses state to store the selected year and corresponding student data. A FlatList renders student names, housing groups, and rooms. Tab buttons allow filtering the data by year, updating the state and list contents. Styles are defined to layout the tabs and list items.

    Original Title

    year.js

    Copyright

    © © All Rights Reserved

    Available Formats

    RTF, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This React Native code defines a component that displays student data filtered by year. It uses state to store the selected year and corresponding student data. A FlatList renders student names, housing groups, and rooms. Tab buttons allow filtering the data by year, updating the state and list contents. Styles are defined to layout the tabs and list items.

    Copyright:

    © All Rights Reserved
    Download as RTF, PDF, TXT or read online from Scribd
    Download as rtf, pdf, or txt
    20 views3 pages

    Year Js

    Uploaded by

    Saksham Gupta
    This React Native code defines a component that displays student data filtered by year. It uses state to store the selected year and corresponding student data. A FlatList renders student names, housing groups, and rooms. Tab buttons allow filtering the data by year, updating the state and list contents. Styles are defined to layout the tabs and list items.

    Copyright:

    © All Rights Reserved
    Download as RTF, PDF, TXT or read online from Scribd
    Download as rtf, pdf, or txt
    of 3

    import * as React from 'react';

    import { useState } from 'react';


    import {StyleSheet, Text, View, Dimensions, FlatList, SafeAreaView, TouchableOpacity,}
    from 'react-native';

    // or any pure javascript modules available in npm


    const listTab = [
      {
            year: '1973',
        },
      {
            year: '1983',
        },
      {
            year: '1998',
        },
    ];

    const data = [
      {
            name: 'Luffy',
            year: '1973',
            gh: 'TGH',
            room: 'T-abc',
        },
      {
            name: 'Naruto',
            year: '1983',
            gh: 'SAM',
            room: 'S-abc',
        },
      {
            name: 'Goku',
            year: '1998',
            gh: 'TGH',
            room: 'Tbcd',
        },
      {
            name: 'Sasuke',
            year: '1983',
            gh: 'SAM',
            room: 'S-bcd',
      }
    ];

    const data2 = [
      {
            name: 'Luffy',
            year: '1973',
            gh: 'TGH',
            room: 'T-abc',
        },
    ];

    const Accoy = () => {


        const [year, setYear] = useState('1973');
        const [datalist, setDatalist] = useState(data2);
        const setYearFilter = (year) => {
            setDatalist([...data.filter((e) => e.year === year)]);
            setYear(year);
        };

        const renderItem = ({ item, index }) => {


            return (
                <View key={index} style={styles.itemContainer}>
                    <Text> {item.name} </Text>
                    <Text> {item.gh} </Text>
                    <Text> {item.room} </Text>
                </View>
            );
        };

        const separator = () => {


            return <View style={{ height: 1 }} />;
        };

        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.listTab}>
                    {listTab.map((e) => (
                        <TouchableOpacity
                            style={[styles.btnTab, year === e.year && styles.btnTabActive]}
                            onPress={() => setYearFilter(e.year)}>
                            <Text
                                style={(styles.textTab, year === e.year && styles.textTabActive)}>
                                {e.year}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </View>
                <FlatList
                    data={datalist}
                    keyExtractor={(e, i) => i.toString()}
                    renderItem={renderItem}
                    ItemSeparatorComponent={separator}
                />
            </SafeAreaView>
        );
    };
    export default Accoy;

    const styles = StyleSheet.create({


        container: {
            flex: 1,
            paddingHorizontal: 10,
            justifyContent: 'center',
        },
        listTab: {
            flexDirection: 'row',
            alignSelf: 'center',
            marginBottom: 20,
        },
        btnTab: {
            width: Dimensions.get('window').width / 3.15,
            flexDirection: 'row',
            borderWidth: 0.5,
            borderColor: '#EBEBEB',
            padding: 10,
            justifyContent: 'center',
        },
        textTab: {
            fontSize: 16,
        },
        btnTabActive: {
            //backgroundColor: '#E6838D',
            borderBottomWidth: 3.5,
        },
        textTabActive: {
            //color: '#fff',
        },
        itemContainer: {
            flexDirection: 'row',
            justifyContent: 'space-between',
            borderWidth: 0.2,
            borderRadius: 10,
            paddingHorizontal: 5,
            paddingVertical: 15,
        },
    });

    You might also like