React-Nav-Melon/components/organisms/Pills/FilledPill.js

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import { ToggleButton } from 'react-native-paper'

const FilledPill = ({label, style, textStyle, selectedStyle, selectedTextStyle, value,}) => {
    return (
        // <TouchableOpacity style={status === true || status === id ? [styles.selectedContainer, selectedStyle] : [styles.container, style]} onPress={onPress}>
        //    
        // </TouchableOpacity>
        <ToggleButton style={status === true || status === id ? [styles.selectedContainer, selectedStyle] : [styles.container, style]}>
             <Text style={status === true || status === id ? [styles.selectedPillText, selectedTextStyle]: [styles.pillText,textStyle]}>{label}</Text>
        </ToggleButton>
        
    )
}

export default FilledPill

const styles = StyleSheet.create({
    container: {
        borderRadius: fonts.getSize(18),
        paddingVertical: fonts.getSize(8),
        paddingHorizontal: fonts.getSize(16),
        backgroundColor: colors.white
    },
    selectedContainer:{
        paddingVertical: fonts.getSize(8),
        paddingHorizontal: fonts.getSize(16),
        backgroundColor: colors.topVariantColor,
        borderRadius: fonts.getSize(18),
    },
    selectedPillText: {
        fontFamily: fonts.type.semibold,
        fontSize:fonts.getSize(12),
        color: colors.white
    },
    pillText:{
        fontFamily: fonts.type.semibold,
        fontSize:fonts.getSize(12),
        color: colors.quaternaryColor
    }

})