Norse Polytheistic Mythology

    react-native-button-toggle-group
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    React Native Button Toggle Group

    Our npm path

    Install

    npm i --save react-native-button-toggle-group
    

    Or

    yarn add react-native-button-toggle-group
    

    Usage

    A preview of the component in use

    import ButtonToggleGroup from 'react-native-button-toggle-group';
    
    // ...
    
    <ButtonToggleGroup
        highlightBackgroundColor={'blue'}
        highlightTextColor={'white'}
        inactiveBackgroundColor={'transparent'}
        inactiveTextColor={'grey'}
        values={['Auto', 'Light', 'Dark']}
        onSelect={val => console.log(val)}
    />

    Props

    Property Type Description
    values string[] The list of strings to render as options for the button group
    onSelect (val: string) => void A function that's called whenever one of the values is selected
    highlightBackgroundColor string The color that the selected background will be. In the above GIF, it's blue.
    highlightTextColor string The color that the selected text will be. In the above GIF, it's white.
    inactiveBackgroundColor string The color that the inactive background will be. In the above GIF, it's white.
    inactiveTextColor string The color that the inactive text will be. In the above GIF, it's a light blue grey.
    style StyleProp Overwrite styling that can be applied to the container of the button toggle group. In the above GIF, we've added a border, border radius, and some padding.
    textStyle StyleProp Overwrite styling that can be applied to the text of the button toggle group. In the above GIF, we've changed the font family and font size.

    Install

    npm i react-native-button-toggle-group

    DownloadsWeekly Downloads

    89

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    221 kB

    Total Files

    9

    Last publish

    Collaborators

    • crutchcorn