React-Nav-Melon/components/organisms/Sections/CategorySection.js

import { StyleSheet, Text, View, ScrollView } from 'react-native'
import React from 'react'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import { ToggleButton } from 'react-native-paper'
import HorizontalNewsCard from '../Cards/HorizontalNewsCard'
import SectionHeader from '../Headers/SectionHeader'

const CategorySection = () => {
    const categories = [ "Sector Update","Finance", "Sports", "Regional Update", "Entertainment"]
    const news = [{},{},{},{},{}]
    const [categoryValue, setCategoryValue] = React.useState(categories[0].toLowerCase());



    return (
        <View style={styles.categoriesContainer}>
            <SectionHeader label={"Categories"}/>
            <View style={styles.categoriesPillContainer}>
                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                    <ToggleButton.Group onValueChange={value => {setCategoryValue(value)    }}>
                        {
                            categories.map((category) => 
                             <ToggleButton 
                            icon={() => <Text style={[category.toLowerCase() === categoryValue ? styles.selectedPillText: styles.pillText]}>{category}</Text>}
                            style={[category.toLowerCase() === categoryValue ? styles.selectedContainer : styles.container, {marginHorizontal: fonts.getSize(4)}]}
                            value={category.toLowerCase()}
                            
                        />)
                        }
                    </ToggleButton.Group>
                </ScrollView>
            </View>
            <View style={styles.categoriesNewsContainer}>
                <ScrollView showsVerticalScrollIndicator={false}>
                    {news.map((item) => <HorizontalNewsCard key={news.indexOf(item)} style={{marginBottom: fonts.getSize(20)}} onPress={true}/>)}
                </ScrollView>
            </View>
        </View>

    )
}

export default CategorySection

const styles = StyleSheet.create({
    categoriesTitle: {
        flexDirection: 'row',
        paddingTop: fonts.getSize(20),
        paddingHorizontal: fonts.getSize(20)
    },
    categoriesTitleText: {
        flex: 1,
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(16),
        color: colors.black
    },
    categoriesPillContainer: {
        paddingBottom: fonts.getSize(8),
        flexDirection: 'row',
        alignItems: 'space-between',
        paddingHorizontal: fonts.getSize(16)
    },
    container: {
        borderRadius: fonts.getSize(18),
        paddingVertical: fonts.getSize(8),
        paddingHorizontal: fonts.getSize(16),
        backgroundColor: colors.white,
        width: 'auto'
    },
    selectedContainer: {
        paddingVertical: fonts.getSize(8),
        paddingHorizontal: fonts.getSize(16),
        backgroundColor: colors.topVariantColor,
        borderRadius: fonts.getSize(18),
        width: 'auto'
    },
    selectedPillText: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(12),
        color: colors.white
    },
    pillText: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(12),
        color: colors.quaternaryColor
    },
    categoriesNewsContainer:{
        paddingHorizontal: fonts.getSize(16),
        paddingTop: fonts.getSize(10),
        
    }
})