Scribd
Upload
22 views

Year Js

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.

Uploaded by

Saksham Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
22 views

Year Js

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.

Uploaded by

Saksham Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 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