Installation

npm i compo-v1

🔗 Demo Example

Demo Example

Typography

Usage

import { Typography } from "compo-v1";
export default function TypographyCompoEx(): JSX.Element | null {
return (

          <Typography
            type="LargeTitle1"
            text={"LargeTitle1"}
            customStyle={{ color: color.red }}
          />
          <Typography
            type="LargeTitle2"
            text={"LargeTitle2"}
            customStyle={{ color: color.blue }}
          />
          <Typography
            type="Title1"
            text={"Title1"}
            customStyle={{ color: color.primarytext }}
          />
          <Typography
            type="Title3"
            text={"Title3"}
            customStyle={{ color: color.blue, fontFamily: "SailecMedium" }}
          />

        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of Typography | text | string | required | Text you want to show | customStyle | TextStyle | optional | style to be applied on text

type Prop

Available types:

LargeTitle1

          <Typography
            type="LargeTitle1"
            text={"LargeTitle1"}
          />

LargeTitle2

          <Typography
            type="LargeTitle2"
            text={"LargeTitle2"}
          />

Title1

          <Typography
            type="Title1"
            text={"Title1"}
          />

Title2

          <Typography
            type="Title2"
            text={"Title2"}
          />

Title3

          <Typography
            type="Title3"
            text={"Title3"}
          />

Title4

          <Typography
            type="Title4"
            text={"Title4"}
          />

Headline1

          <Typography
            type="Headline1"
            text={"Headline1"}
          />

Headline2

          <Typography
            type="Headline2"
            text={"Headline2"}
          />

Subheadline

          <Typography
            type="Subheadline"
            text={"Subheadline"}
          />

BodyLink

          <Typography
            type="BodyLink"
            text={"BodyLink"}
          />

Body

          <Typography
            type="Body"
            text={"Body"}
          />

BodyBold

          <Typography
            type="BodyBold"
            text={"BodyBold"}
          />

Caption1

          <Typography
            type="Caption1"
            text={"Caption1"}
          />

Caption2

          <Typography
            type="Caption2"
            text={"Caption2"}
          />

Caption3

          <Typography
            type="Caption3"
            text={"Caption3"}
          />

TabItemsInactive

          <Typography
            type="TabItemsInactive"
            text={"TabItemsInactive"}
          />

TabItemsActive

          <Typography
            type="TabItemsActive"
            text={"TabItemsActive"}
          />

ButtonSmall

          <Typography
            type="ButtonSmall"
            text={"ButtonSmall"}
          />

ButtonMedium

          <Typography
            type="ButtonMedium"
            text={"ButtonMedium"}
          />

ButtonLarge

          <Typography
            type="ButtonLarge"
            text={"ButtonLarge"}
          />

TabBarInactive

          <Typography
            type="TabBarInactive"
            text={"TabBarInactive"}
          />

TabBarActive

          <Typography
            type="TabBarActive"
            text={"TabBarActive"}
          />

Button

Usage

import { Button } from "compo-v1";
export default function ButtonCompoEx(): JSX.Element | null {
return (
          <Button
            customButtonStyle={{ marginBottom: 15 }}
            type="primaryLarge"
            buttonTitle="button1"
            onPress={() => {}}
          />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of button | buttonTitle | string | required | text on button | onPress | function | required | Action performed on button click | customTextStyle | TextStyle | optional | style to be applied on text | customButtonStyle | ViewStyle | optional | style to be applied on button

type Prop

Available types:

primaryLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

primarySmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primarySmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryHoverLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryHoverLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryHoverMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryHoverMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryHoverSmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryHoverSmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryActiveLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryActiveLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryActiveMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryActiveMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryActiveSmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryActiveSmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryDisableLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryDisableLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryDisableMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryDisableMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

primaryDisableSmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="primaryDisableSmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondarySmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondarySmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryHoverLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryHoverLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryHoverMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryHoverMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryHoverSmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryHoverSmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryActiveLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryActiveLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryActiveMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryActiveMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryActiveSmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryActiveSmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryDisableLarge

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryDisableLarge"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryDisableMedium

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryDisableMedium"
        buttonTitle="button1"
        onPress={() => {}}
      />

secondaryDisableSmall

      <Button
        customButtonStyle={{ marginBottom: 15 }}
        type="secondaryDisableSmall"
        buttonTitle="button1"
        onPress={() => {}}
      />

FooterButton

Usage

import { FooterButton } from "compo-v1";
export default function FooterButtonCompoEx(): JSX.Element | null {
return (
          <FooterButton
            type="doubleFooterButton"
            buttonTitle="DoublePrimaryButton"
            secondButtonTitle="DoubleNonPrimaryButton"
          />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of footerButton | buttonTitle | string | required | text on button | onPress | function | required | Action performed on button click | secondButtonTitle | string | required | text on bottom button, if there are two buttons | onSecondButtonPress | function | required | Action performed on bottom button click, if there are two buttons | customTextStyle | TextStyle | optional | style to be applied on text | customButtonStyle | ViewStyle | optional | style to be applied on button | customButtonContainerStyle | ViewStyle | optional | style to be applied on contanier, if there are two buttons |disabled|boolean|optional| To disabled the button

type Prop

Available types:

singleFooterButton

      <FooterButton
        type="singleFooterButton"
        buttonTitle="SinglePrimaryButton"
        customButtonStyle={{ marginBottom: 30 }}
        onPress={()=>{}}
      />

doubleFooterButton

      <FooterButton
        type="doubleFooterButton"
        buttonTitle="DoublePrimaryButton"
        secondButtonTitle="DoubleNonPrimaryButton"
        onPress={()=>{}}
        onSecondButtonPress={()=>{}}

      />

RadioButton

Usage

import { RadioButton } from "compo-v1";
export default function RadioButtonCompoEx(): JSX.Element | null {
  const [isChecked, setIsChecked] = useState(false);
  const handleRadioButtonPress = (option: string) => {
    setIsChecked(!isChecked);
  };

return (
        <RadioButton
          type="primaryRadioButton"
          selected={isChecked}
          onPress={() => handleRadioButtonPress("option")}
          radioButtonStyle={{    backgroundColor:"#ECF0FF" }}
          radioButtonSelectedStyle={    backgroundColor: "#503374"}
        />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of radio button | onPress | function | required | Action performed on button click | selected | boolean | false | true if button is selected | radioButtonStyle | ViewStyle | optional | style to be applied on radio button | radioButtonSelectedStyle | ViewStyle | optional | style to be applied on selected radio button

type Prop

Available types:

primaryRadioButton

    <RadioButton
      type="primaryRadioButton"
      selected={isChecked}
      onPress={() => handleRadioButtonPress("option")}
      radioButtonStyle={{    backgroundColor:"#ECF0FF" }}
      radioButtonSelectedStyle={    backgroundColor: "#503374"}
    />

disableRadioButton

    <RadioButton
      type="disableRadioButton"
      selected={isChecked}
      onPress={() => handleRadioButtonPress("option")}
      radioButtonStyle={{    backgroundColor:"#ECF0FF" }}
      radioButtonSelectedStyle={    backgroundColor: "#503374"}
    />

ToggleButton

Usage

import { ToggleButton } from "compo-v1";
export default function ToggleButtonCompoEx(): JSX.Element | null {
  const handleToggle = (value: boolean) => {
    console.log("Toggle value:", value);
  };

return (
          <ToggleButton
            onToggle={() => handleToggle}
           activebgColor="#ECF0FF"
           activethumbColor="#503374"
           inActivebgColor="#ECF0FF"
           inActivethumbColor="#503374"
           style={{ marginBottom: 20 }}
            type="primaryToggleButton"
          />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of toggle | onPress | function | required | Action performed on toggle | style | ViewStyle | optional | style to be applied on toggle container |activebgColor | string | optional | Background color of the toggle button when active. |activethumbColor | string | optional | Thumb color of the toggle button when active. |inActivebgColor | string | optional | Background color of the toggle button when inactive. |inActivethumbColor | string | optional | Thumb color of the toggle button when inactive.

type Prop

Available types:

primaryToggleButton

      <ToggleButton
       activebgColor="#ECF0FF"
       activethumbColor="#503374"
       inActivebgColor="#ECF0FF"
       inActivethumbColor="#503374"
       onToggle={() => handleToggle}
       style={{ marginBottom: 20 }}
        type="primaryToggleButton"
      />

disableToggleButton

      <ToggleButton
       activebgColor="#ECF0FF"
       activethumbColor="#503374"
       inActivebgColor="#ECF0FF"
       inActivethumbColor="#503374"
       onToggle={() => handleToggle}
       style={{ marginBottom: 20 }}
       type="disableToggleButton"
      />

CheckboxButton

Usage

import { CheckboxButton } from "compo-v1";
export default function CheckboxButtonCompoEx(): JSX.Element | null {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = (checked: boolean) => {
    setIsChecked(checked);
  };

return (
          <CheckboxButton
            type="primaryCheckboxButton"
            checked={isChecked1}
            onChange={handleCheckboxChange1}
            customBoxStyle={{ marginBottom: 15 }}
          />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of toggle | onChange | function | required | Action performed on checked | checked | boolean | false | true if checkbox is checked | customBoxStyle | ViewStyle | optional | style to be applied on check box

type Prop

Available types:

primaryCheckboxButton

      <CheckboxButton
        type="primaryCheckboxButton"
        checked={isChecked}
        onChange={handleCheckboxChange1}
        customBoxStyle={{ marginBottom: 15 }}
      />

disableCheckboxButton

      <CheckboxButton
        type="disableCheckboxButton"
        checked={isChecked2}
        onChange={handleCheckboxChange2}
      />

Pagination

Usage

import { Pagination } from "compo-v1";
export default function PaginationCompoEx(): JSX.Element | null {
  const handleOptionChange = () => {
    // Perform any necessary actions based on the selected option
  };

return (
          <Pagination options={6} onChange={handleOptionChange} />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | onChange | function | required | Action performed on change | options | number[] or number | required | an array pagination Items

Header

Usage

import { Header } from "compo-v1";
export default function HeaderCompoEx(): JSX.Element | null {
return (
        <Header
          type={"header"}
          HeaderRight={
            <Text
              style={[
                {
                  color: color.primarytext,
                  fontWeight: "600",
                  fontSize: 15,
                  lineHeight: 20,
                },
              ]}
            >
              Right
            </Text>
          }
          HeaderMiddle={
            <Text
              style={[
                {
                  color: color.primarytext,
                  fontWeight: "600",
                  fontSize: 15,
                  lineHeight: 20,
                },
              ]}
            >
              Label
            </Text>
          }
          Headerleft={
            <TouchableOpacity onPress={() => {}}>
              <Text
                style={[
                  {
                    color: color.primarytext,
                    fontWeight: "600",
                    fontSize: 15,
                    lineHeight: 20,
                  },
                ]}
              >
                Left
              </Text>
            </TouchableOpacity>
          }
        />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of header | Headerleft | ReactNode | optional | any jsx element on left side of header | HeaderMiddle | ReactNode | optional | any jsx element on middle of header | HeaderRight | ReactNode | optional | any jsx element on right side of header | containerStyle | ViewStyle | optional | style to be applied on header container

type Prop

Available types:

header

    <Header
      type={"header"}
      HeaderRight={
        <Text
          style={[
            {
              color: color.primarytext,
              fontWeight: "600",
              fontSize: 15,
              lineHeight: 20,
            },
          ]}
        >
          Right
        </Text>
      }
      HeaderMiddle={
        <Text
          style={[
            {
              color: color.primarytext,
              fontWeight: "600",
              fontSize: 15,
              lineHeight: 20,
            },
          ]}
        >
          Label
        </Text>
      }
      Headerleft={
        <TouchableOpacity onPress={() => {}}>
          <Text
            style={[
              {
                color: color.primarytext,
                fontWeight: "600",
                fontSize: 15,
                lineHeight: 20,
              },
            ]}
          >
            Left
          </Text>
        </TouchableOpacity>
      }
    />
    

BottomBar

Usage

Import the necessary components and modules in your App.js file:

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { BottomTab } from "path of BottomBar component file "; 
  return (
      <NavigationContainer>
        <BottomTab />
      </NavigationContainer>
  );

```jsx
import { BottomBar } from "compo-v1";

export default function BottomBarExample(): JSX.Element | null {
  const tabs = [
    {
      screen: Screen1,
      icon: <Icon1 />,
      label: "Tab 1",
    },
    {
      screen: Screen2,
      icon: <Icon2 />,
      label: "Tab 2",
    },
    {
      screen: Screen3,
      icon: <Icon3 />,
      label: "Tab 3",
    },
  ];

  return (
    <BottomBar
      type="bottomBar"
      tabBarShowLabel={true}
      BottomBarStyle={styles.bottomBar}
      tabBarActiveTintColor="#FF0000"
      tabBarInactiveTintColor="#808080"
      tabBarIconStyle={styles.tabBarIcon}
      tabBarLabelStyle={styles.tabBarLabel}
      tabs={tabs}
    />
  );
}

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | | type | string | required | Type of bottom bar | tabBarShowLabel | boolean | optional | Determines whether to show labels on the bottom bar tabs | BottomBarStyle | any | optional | Style to be applied to the bottom bar container | tabBarActiveTintColor | string | optional | Color of the active tab icon and label | tabBarInactiveTintColor | string | optional | Color of the inactive tab icons and labels | tabBarIconStyle | any | optional | Style to be applied to the tab icons | tabBarLabelStyle | any | optional | Style to be applied to the tab labels | tabs | array | required | Array of tab objects defining each tab's properties

| Properties | Type | Description | | ------- | --- | --- | | screen | React.ComponentType | Component to render for the tab | icon | any | Determines whether to show labels on the bottom bar tabs | label | string | Label for the tab

type Prop

Available types:

bottomBar

AppTheme

Usage

Import the necessary components and modules in your App.js file:

import React from "react";
import { ThemeProvider } from "compo-v1"; 
  return (
    <ThemeProvider>
    // other components
    </ThemeProvider>
  );

import React, { useState } from "react";
import { AppTheme } from "compo-v1";

export default function AppThemeExample() {
  const [theme, setTheme] = useState("light");

  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
  };

  return (
    <AppTheme onThemeChange={handleThemeChange} />
  );
}

Inputs

Usage

import { Inputs } from "compo-v1";

export default function InputsCompoEx(): JSX.Element | null {
  const [primaryVal, setPrimaryVal] = useState("");

  return (
        <Inputs
          type="primaryInput"
          placeholder="First Name"
          inputLeft={
            <Icon
              name="IconUserCircle"
              width={24}
              height={24}
              stroke={"#503374"}
            />
          }
          value={primaryVal}
          onChangeText={(val) => setPrimaryVal(val)}
          label="First Name"
        />
  );
}

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | |type | string | required | Type of input |value string | optional | Current value of the input |placeholder | string | optional | Placeholder text for the input |onChangeText | function | optional | Callback function to handle text input changes |placeholderTextColor | string | optional | Color of the placeholder text |inputStyle | StyleProp | optional | Style to be applied to the input field |inputLeft | ReactNode | optional | Custom component to be rendered on the left side of the input field |inputRight | ReactNode | optional | Custom component to be rendered on the right side of the input field |labelStyle | any | optional | Style to be applied to the input label |label | string | optional | Label text for the input |InputContainerStyle | ViewStyle | optional | Style to be applied to the input container |maxLength | number | optional | Maximum number of characters allowed in the input |options | any | optional | Options for dropdown inputs |onSelect | any | optional | Callback function to handle dropdown option selection |listStyle | ViewStyle | optional | Style to be applied to the dropdown option list |listTextStyle | StyleProp | optional | Style to be applied to the dropdown option list text

type Prop

Available types:

searchInput

    <Inputs
      type="searchInput"
      placeholder="search"
      inputLeft={
        <Icon
          name="IconSearchSm"
          width={24}
          height={24}
          stroke={"#503374"}
        />
      }
      inputRight={
        <TouchableOpacity onPress={() => setSearchVal("")}>
          <Text>clean</Text>
        </TouchableOpacity>
      }
      value={searchVal}
      onChangeText={(val) => setSearchVal(val)}
    />

primaryInput

    <Inputs
      type="primaryInput"
      placeholder="First Name"
      inputLeft={
        <Icon
          name="IconUserCircle"
          width={24}
          height={24}
          stroke={"#503374"}
        />
      }
      value={primaryVal}
      onChangeText={(val) => setPrimaryVal(val)}
      label="First Name"
    />

textBox

    <Inputs
      type="textBox"
      placeholder="Description"
      inputLeft={
        <Icon
          name="IconUserCircle"
          width={24}
          height={24}
          stroke={"#503374"}
        />
      }
      value={textBoxVal}
      onChangeText={(val) => setTextBoxVal(val)}
      label="Description"
      maxLength={300}
    />

secureInputField

    <Inputs
      type="secureInputField"
      placeholder="Password"
      value={secureVal}
      onChangeText={(val) => setSecureVal(val)}
      label="Password"
    />

largeDropDown

      <Inputs
        type="largeDropDown"
        onSelect={(value) => setSelectedValue(value)}
        options={dummyData}
        label={"DD field label"}
        placeholder={"Placeholder"}
      />

smallDropDown

      <Inputs
        type="smallDropDown"
        onSelect={(value) => setSelectedValue(value)}
        options={dummyData}
        label={"DD field label"}
        placeholder={"Placeholder"}
      />

ListItem

Usage

import { ListItem } from "compo-v1";
export default function ListItemCompoEx(): JSX.Element | null {
  const handleOptionChange = () => {
    // Perform any necessary actions based on the selected option
  };

  return (
        <ListItem
          onPress={handleOptionChange}
          title="Lg1"
          value="value"
          type="Lg1"
          Itemleft={
            <Icon
              name="CheckIcon"
              width={24}
              height={24}
              stroke={theme == "dark" ? "#ffffff" : "#503374"}
            />
          }
          ItemRight={
            <Icon
              name="rightArrowIcon"
              width={24}
              height={24}
              stroke={theme == "dark" ? "#ffffff" : "#503374"}
            />
          }
        />
  );
}

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | |type| string| required | Type of list item |title| string| optional| Title text for the list item |value| string| optional |Value text for the list item |desc| string| optional |Description text for the list item |company| string| optional |Company name for the list item |project| string| optional |Project name for the list item |date| string| optional |Date for the list item |rupees| string| optional |Rupees amount for the list item |tags | string or string[]| optional | Tags for the list item |ItemLeft| ReactNode| optional |Custom component to be rendered on the left side of the list item |ItemRight| ReactNode| optional | Custom component to be rendered on the right side of the list item |onPress| function| optional |Callback function to handle list item press |containerStyle| ViewStyle| optional |Style to be applied to the list item container |titleStyle| any| optional | Style to be applied to the title text of the list item |valueStyle| any| optional | Style to be applied to the value text of the list item |descStyle| any| optional| Style to be applied to the description text of the list item |checkboxStyle| ViewStyle| optional | Style to be applied to the checkbox component |radioButtonStyle| ViewStyle| optional | Style to be applied to the radio button icon component |radioButtonSelectedStyle| ViewStyle| optional | Style to be applied to the selected radio button component |switchStyle| ViewStyle| optional |Style to be applied to the switch component |switchActiveColor| string| optional | Active color for the switch component |switchInactiveColor| string| optional | Inactive color for the switch component

type Prop

Available types:

Lg1

    <ListItem
      onPress={handleOptionChange}
      title="Lg1"
      value="value"
      type="Lg1"
      Itemleft={
        <Icon
          name="CheckIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
      ItemRight={
        <Icon
          name="rightArrowIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
    />

Lg2

    <ListItem
      onPress={handleOptionChange}
      title="Lg2"
      value="value"
      desc="desc"
      type="Lg2"
      Itemleft={
        <Icon
          name="CheckIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
      ItemRight={
        <Icon
          name="rightArrowIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
    />

Lr2

    <ListItem
      onPress={handleOptionChange}
      title="Lr2"
      value="value"
      desc="desc"
      type="Lr2"
      Itemleft={
        <Icon
          name="CheckIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
      ItemRight={
        <Icon
          name="rightArrowIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
    />

leftRadio

    <ListItem
      onPress={handleOptionChange}
      title="leftRadio"
      value="value"
      desc="desc"
      type="leftRadio"
    />

leftCheckbox

    <ListItem
      onPress={handleOptionChange}
      title="leftCheckbox"
      value="value"
      desc="desc"
      type="leftCheckbox"
    />

rightRadio

    <ListItem
      onPress={handleOptionChange}
      title="rightRadio"
      value="value"
      desc="desc"
      type="rightRadio"
      Itemleft={
        <Icon
          name="CheckIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
    />

rightCheckbox

    <ListItem
      onPress={handleOptionChange}
      title="rightCheckbox"
      value="value"
      desc="desc"
      type="rightCheckbox"
      Itemleft={
        <Icon
          name="CheckIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
    />

rightSwitch

    <ListItem
      onPress={handleOptionChange}
      title="rightSwitch"
      value="value"
      desc="desc"
      type="rightSwitch"
      Itemleft={
        <Icon
          name="CheckIcon"
          width={24}
          height={24}
          stroke={theme == "dark" ? "#ffffff" : "#503374"}
        />
      }
    />

kanbanPrimary

    <ListItem
      onPress={handleOptionChange}
      company={"company Name"}
      project={"Project Name"}
      date="01/01/24"
      rupees={"000"}
      tags={"Ol"}
      type="kanbanPrimary"
      ItemRight={
        <TouchableOpacity onPress={() => {}}>
          <Icon
            name="DownIcon"
            width={24}
            height={24}
            stroke={theme == "dark" ? "#ffffff" : "#503374"}
          />
          </TouchableOpacity>
      }
    />

TopTabBar

Usage

import { TopTabBar } from "compo-v1";

export default function TopTabBarCompoEx(): JSX.Element | null {

  const [activeTab, setActiveTab] = useState("Tab1");

  return (
      <TopTabBar
          titles={["Tab1", "Tab2", "Tab3", "Tab4"]}
          style={{ backgroundColor: "#FFFFFF", borderRadius: 20 }}
          activeTab={activeTab}
          onPressTab={(item) => {
            setActiveTab(item);
            setShowModal(true);
          }}
          activeTabText={{ color: "#005AE2" }}
          styleText={{ color: "#000000" }}
          containerStyle={{ backgroundColor: "#F3F3F3" }}
        />

  );
}

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | |style | StyleProp | optional | Custom style for the active tab |titles | string[] | required | Array of titles for the tabs |styleText | StyleProp | optional | Custom style for the tab text |activeTab | string | required | Currently active tab |onPressTab |function |required | Action performed when a tab is pressed |activeTabText | StyleProp | optional| Custom style for the active tab text |containerStyle | StyleProp | optional |Custom style for the container view

BackgroundImage

Usage

import { BackgroundImage } from "compo-v1";

export default function BackgroundImageCompoEx(): JSX.Element | null {

  return (
<BackgroundImage
BgImageSource={require("../assets/bgImage.jpg")}
style={{ marginVertical: 20, borderRadius: 16 }}
>
<View
  style={{
    flex: 1.5,
    alignItems: "center",
    justifyContent: "center",
  }}
>
  <Text
    style={{
      fontWeight: "800",
      fontSize: 20,
      lineHeight: 24,
      color: "#ffffff",
    }}
  >
    Jamie Curtis
  </Text>
  <Text
    style={{
      fontWeight: "400",
      fontSize: 12,
      lineHeight: 20,
      color: "#ffffff",
    }}
  >
    Followed by 326 Peers
  </Text>
</View>
</BackgroundImage>

  );
}

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | |BgImageSource | ImageSourcePropType | required | Image source for the background image |style | ViewStyle | optional | Custom style for the component

Modals

Usage

import { Modals } from "compo-v1";
export default function ModalExample(): JSX.Element | null {
    const [showModal, setShowModal] = useState(true);
return (
        <Modals
          type="popUpModal"
          showModal={showModal}
          Icon={
            <Icon
              name="IconSearchSm"
              width={24}
              height={24}
              stroke={"#503374"}
            />
          }
          modalDes={"Your modal description"}
          onButtonPress={(button) => {
            if (button?.buttonTitles === "Cancel") {
              console.log("Cancel");
              setShowModal(false);
            }
            if (button?.buttonTitles === "Okay") {
              console.log("Okay");
              setShowModal(false);
            }
          }}
          button={[
            { buttonTitles: "Cancel", buttonTitlesColor: "red" },
            { buttonTitles: "Okay" },
          ]}
        />
        )
    }

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | |showModal| boolean| required| Specifies whether the modal should be displayed or hidden. |Icon| ReactNode| optional| JSX element for the modal icon. |modalDes| string | required | Description text for the modal. |onButtonPress | function | required | Function to be called when a button is pressed. |button | ButtonItem[] | required | Array of button items to be displayed in the modal. |modalStyle | ViewStyle | optional | Style to be applied to the modal container. |desTextStyle | TextStyle | optional | Style to be applied to the modal description text. |type | string | required | Type of modal.

type Prop

Available types:

popUpModal

    <Modals
      type="popUpModal"
      showModal={showModal}
      Icon={
        <Icon
          name="IconSearchSm"
          width={24}
          height={24}
          stroke={"#503374"}
        />
      }
      modalDes={"Your modal description"}
      onButtonPress={(button) => {
        if (button?.buttonTitles === "Cancel") {
          console.log("Cancel");
          setShowModal(false);
        }
        if (button?.buttonTitles === "Okay") {
          console.log("Okay");
          setShowModal(false);
        }
      }}
      button={[
        { buttonTitles: "Cancel", buttonTitlesColor: "red" },
        { buttonTitles: "Okay" },
      ]}
    />

ScreenLayout

Usage

import { ScreenLayout } from "compo-v1";

export default function ScreenExample(): JSX.Element {
  return (
    <ScreenLayout
      statusBarColor="#ffffff"
      transclucent={false}
      scrollEnabled={false}
      headerUnScrollable={() => null}
      footerUnScrollable={() => null}
      barStyle="dark-content"
      containerStyle={styles.container}
      type="primaryLayout"
    >
      {/* Your screen content */}
    </ScreenLayout>
  );
}

Props

| Properties | Type | Default | Description | | ------- | --- | --- | --- | |statusBarColor| string | "#ffffff" | The color of the status bar. |transclucent | boolean | false | Specifies whether the status bar should be translucent. |scrollEnabled | boolean | false | Specifies whether the screen content should be scrollable. |headerUnScrollable | function | optional | Function returning the header component that remains fixed and unaffected by scrolling. |footerUnScrollable | function | optional | Function returning the footer component that remains fixed and unaffected by scrolling. |barStyle | "default" or "light-content" or "dark-content" | "dark-content" | The style of the status bar. |containerStyle | ViewStyle | optional | Style to be applied to the screen container. |type | string | required | Type of screen layout.

type Prop

Available types:

primaryLayout

      <ScreenLayout
      type="primaryLayout"
      scrollEnabled={true}
      barStyle={"dark-content"}
      statusBarColor="red"
      containerStyle={{ backgroundColor: "#ffffff" }}
      headerUnScrollable={() => (
        <View
          style={{
            alignItems: "center",
            paddingHorizontal: 10,
            backgroundColor: "#ffffff",
          }}
        >
          <Typography
            type="LargeTitle1"
            text={"fixed header"}
            customStyle={{
              color: color.primarytext,
              fontSize: 20,
              marginBottom: 10,
            }}
          />
        </View>
      )}
      footerUnScrollable={() => (
        <FooterButton
          type="singleFooterButton"
          buttonTitle="fixed header"
          disabled={!isChecked1}
          customButtonStyle={{ backgroundColor: !isChecked1 ? "grey" : "blue" }}
        />
      )}
    >
  {/* Your screen content */}
  </ScreenLayout>