Compo-v1 NPM | npm.io

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>

@everything-registry/sub-chunk-1365

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago