❤
npm
Sign UpSign In

compo-v1

0.4.1 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i compo-v1

Weekly Downloads

43

Version

0.4.1

License

ISC

Unpacked Size

252 kB

Total Files

52

Last publish

Collaborators

  • syeda_mehwish
Try on RunKit
Report malware