react-native-ccl

react native cozuf component library

explanation

When I first started developing React Native, I had a dream of making my own component library. Later, this desire increased even more because in the projects I developed; I'm tired of creating a 'components' folder, editing the theme structure and copy-pasting the folder from previous projects. I do not intend to compete with widely used react-native libraries. I just tried to do this for the purpose of using it myself. Still, friends who want to use it or who want to help develop it, of course, can use it.

I would like to thank Ziya Doğramacı, Furkan Atakan Bozkurt and the NİBGAT for their inspiration and help in developing this library.

Installation

This library then uses the following libraries, so you need to install them as well.

react-navigation react-native-modal react-native-date-picker react-native-modalize react-native-vector-icons

npm install react-native-ccl

Components

1. Badge
2. Button
3. Card
4. CheckBox
5. CheckBoxGroup
6. Chip
7. ChipGroup
8. DateTimePicker
9. Icon
10. Modal
11. RadioButton
12. RadioButtonGroup
13. SearchBar
14. SelectBox
15. Seperator
16. SnackBar
17. Switch
18. TapSelector
19. Text
20. TextInput

Usage

Badge

import { Badge } from "react-native-ccl";

(
    <Badge
        testID={string}
        size={'small' | 'medium' | 'large' | number}
        value={number | string}
   />
)

Button

import { Button } from "react-native-ccl";

(
    <Button
        testID={string}
        clickType={'opacity' | 'changeable'}
        childType={'text' | 'icon' | 'both'}
        type={'filled' | 'outlined' | 'simplied'}
        wrap={'wrap' | 'no-wrap' | 'free'}
        onPress={()=> void}
        onLongPress={()=> void}
        icon={IIconProps | ReactNode}
        title={string}
        titleStyle={StyleProp<TextStyle>}
        containerStyle={StyleProp<ViewStyle>}
   />
)

Card

import { Card } from "react-native-ccl";

(
    <Card
        expandable={boolean}
        active={boolean}
        headerComponent={()=> ReactNode}
        footerComponent={()=> ReactNode}
        containerStyle={ViewStyle}
        headerContainerStyle={ViewStyle}
        footerContainerStyle={ViewStyle}
        bodyContainerStyle={ViewStyle}
   />
)

CheckBox

import { CheckBox } from "react-native-ccl";

(
    <CheckBox
        testID={string}
        active={boolean}
        selected={boolean}
        title={string}
        value={any}
        iconSet={
            selected: IIconProps | React.ReactNode;
            notSelected: IIconProps | React.ReactNode;
        }
        onSelect={(selected: boolean)=> void}
        containerStyle={ViewStyle}
        titleContainerStyle={ViewStyle}
        titleStyle={ViewStyle}
   />
)

CheckBoxGroup

import { CheckBoxGroup } from "react-native-ccl";

(
    <CheckBoxGroup
        data={ReadonlyArray<ItemT>}
        onSelect={(item: ItemT, index: number) => void}
        renderItem={(info: ListRenderItemInfo<ItemT>) => React.ReactElement | null}
        onSubmit={(data: ItemT[]) => void}
        submitTitle={string}
        minChoice={number}
        maxChoice={number}
        selectAllTitle={string}
        unSelectAllTitle={string}
   />
)

Chip

import { Chip } from "react-native-ccl";

(
    <Chip
        testID={string}
        selected={boolean}
        title={string}
        active={boolean}
        onSelect={(selected: boolean) => void}
        containerStyle={StyleProp<ViewStyle>}
        titleStyle={StyleProp<TextStyle>}
   />
)

ChipGroup

import { ChipGroup } from "react-native-ccl";

(
    <ChipGroup
        data={ReadonlyArray<ItemT>}
        onSelect={(item: ItemT, index: number) => void}
        renderItem={(info: ListRenderItemInfo<ItemT>) => React.ReactElement | null}
        containerStyle={StyleProp<ViewStyle>}
        selectionType={"multiSelect" | "singleSelect"}
   />
)

DateTimePicker

import { DateTimePicker } from "react-native-ccl";

(
    <DateTimePicker
        testID={string}
        active={boolean}
        display={'modal' | 'bottomSheet'}
        title={string}
        placeholder={string}
        date={Date}
        mode={'date' | 'time' | 'datetime'}
        onDateChange={(date: Date) => void}
        onSubmit={(date: Date) => void}
        containerStyle={StyleProp<ViewStyle>}
        titleContainerStyle={StyleProp<ViewStyle>}
        titleStyle={StyleProp<TextStyle>}
        textContainerStyle={StyleProp<ViewStyle>}
        textStyle={StyleProp<TextStyle>}
   />
)

Icon

import { Icon } from "react-native-ccl";

(
    <Icon
        family={'AntDesign' | 'Entypo' | 'EvilIcons' | 'Feather' | 'FontAwesome' | 'FontAwesome5' | 'FontAwesome5Pro' | 'Fontisto' | 'Foundation' | 'Ionicons' | 'MaterialCommunityIcons' | 'MaterialIcons' | 'Octicons' | 'SimpleLineIcons' | 'Zocial'}
        name={string} (https://oblador.github.io/react-native-vector-icons/)
        size={number}
        color={ColorValue}
        active={boolean}
        containerStyle={StyleProp<ViewStyle>}
   />
)

Modal

import { Modal } from "react-native-ccl";

(
    <Modal
        testID={string}
        type={"default" | "loading" | "fault" | "warning" | "selective"}
        visible={boolean}
        outsideStyle={StyleProp<ViewStyle>}
        containerStyle={StyleProp<ViewStyle>}
        onTouchOutSide={(value: boolean) => void}
        indicatorProps={Partial<Omit<IActivityIndicatorProps, "testID">>}
        title={string}
        message={string}
        acceptButtonTitle={string}
        onAcceptButtonPress={() => void}
        rejectButtonTitle={string}
        onRejectButtonPress={() => void}
   />
)

// ## Contributing

//See the contributing guide to learn how to contribute to the repository and the development workflow.

RadioButton

import { RadioButton } from "react-native-ccl";

(
    <RadioButton
        testID={string}
        active={boolean}
        selected={boolean}
        title={string}
        value={any}
        iconSet={
            selected: IIconProps | ReactNode
            notSelected: IIconProps | ReactNode
        }
        onSelect={(selected: boolean) => void}
        containerStyle={StyleProp<ViewStyle>}
        iconContainerStyle={StyleProp<ViewStyle>}
        titleContainerStyle={StyleProp<ViewStyle>}
        titleStyle={StyleProp<TextStyle>}
   />
)

RadioButtonGroup

import { RadioButtonGroup } from "react-native-ccl";

(
    <RadioButtonGroup
        data={ReadonlyArray<ItemT>}
        onSelect={(item: ItemT, index: number) => void}
        renderItem={(info: ListRenderItemInfo<ItemT>) => React.ReactElement | null}
        onSubmit={( selectedList: ItemT[] ) => void}
        submitTitle={string}
   />
)

SearchBar

import { SearchBar } from "react-native-ccl";

(
    <SearchBar
        testID={string}
        value={string}
        minimumCharToInvoke={number}
        onSearch={(text: string) => void}
   />
)

SelectBox

import { SelectBox } from "react-native-ccl";

(
    <SelectBox
        testID={string}
        active={boolean}
        displayType={'modal' | "bottomSheet" | 'page'}
        selectionType={'singleSelect' | 'multiSelect'}
        title={string}
        titleStyle={StyleProp<TextStyle>}
        titleContainerStyle={StyleProp<TextStyle>}
        placeholder={string}
        textStyle={StyleProp<TextStyle>}
        textContainerStyle={StyleProp<TextStyle>}
        searchable={boolean}
        searchText={string}
        onSearch={(text: string) => void}
        data={ReadonlyArray<ItemT>}
        onSelect={(item: ItemT, index: number) => void}
        onSubmit={(data: ReadonlyArray<ItemT>) => void}
        renderItem={(info: ListRenderItemInfo<ItemT>) => React.ReactElement | null}
        navigation={NavigationProp<ParamListBase>}
        page={string}
        maxChoice={number}
        minChoice={number}
        containerStyle={ViewStyle}
   />
)

Seperator

import { Seperator } from "react-native-ccl";

(
    <Seperator
        type={"vertical" | "horizontal"}
        size={"small" | "medium" | "large" | string | number}
        containerStyle={StyleProp<ViewStyle>}
        style={StyleProp<ViewStyle>}
   />
)

SnackBar

import { SnackBar } from "react-native-ccl";

(
    <SnackBar
        duration={"short" | "medium" | "long" | "infinite"}
        containerStyle={StyleProp<ViewStyle>}
   />
)

Switch

import { Switch } from "react-native-ccl";

(
    <Switch
        testID={string}
        active={boolean}
        title={string}
        value={boolean}
        onValueChange={(value: boolean) => void}
        containerStyle={StyleProp<ViewStyle>}
        titleContainerStyle={StyleProp<ViewStyle>}
        titleStyle={StyleProp<TextStyle>}
   />
)

TapSelector

import { TapSelector } from "react-native-ccl";

(
    <TapSelector
        testID={string}
        data={ReadonlyArray<ItemT>}
        onTap={(selectedItem: ItemT, selectedIndex: number) => void}
        titleStyle={StyleProp<TextStyle>}
        containerStyle={StyleProp<ViewStyle>}
   />
)

Text

import { Text } from "react-native-ccl";

(
    <Text
        testID={string}
        size={'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'}
        weigth={'light' | 'regular' | 'medium' | 'semiBold' | 'bold'}
        active={boolean}
        style={StyleProp<TextStyle>}
        onPress={() => void}
        onLongPress={() => void}
   />
)

TextInput

import { TextInput } from "react-native-ccl";

(
    <TextInput
        testID={string}
        active={boolean}
        type={'email' | 'password' | 'default' | "phone" | "calculator"}
        titleContainerStyle={StyleProp<ViewStyle>}
        title={string}
        titleStyle={StyleProp<TextStyle>}
        icon={IIconProps | ReactNode}
        value={string}
        onChangeText={(text: string) => void}
        onFocus={(e: NativeSyntheticEvent<TextInputFocusEventData>) => void}
        onBlur={(e: NativeSyntheticEvent<TextInputFocusEventData>) => void}
        inputStyle={StyleProp<TextStyle>}
        warning={string}
        warningStyle={StyleProp<TextStyle>}
        warningContainerStyle={StyleProp<TextStyle>}
        error={string}
        errorStyle={StyleProp<TextStyle>}
        errorContainerStyle={StyleProp<TextStyle>}
        containerStyle={StyleProp<ViewStyle>}
        cleanable={boolean}
        isRequired={boolean}
   />
)

License

MIT