0.4.1 • Published 11 months ago
compo-v1 v0.4.1
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>
0.4.1
11 months ago
0.4.0
12 months ago
0.3.9
12 months ago
0.3.8
12 months ago
0.3.7
12 months ago
0.3.6
12 months ago
0.3.5
12 months ago
0.3.4
12 months ago
0.3.3
12 months ago
0.3.2
12 months ago
0.3.1
12 months ago
0.3.0
12 months ago
0.2.9
12 months ago
0.2.8
12 months ago
0.2.7
12 months ago
0.2.6
12 months ago
0.2.5
12 months ago
0.2.4
12 months ago
0.2.3
12 months ago
0.2.2
12 months ago
0.2.1
12 months ago
0.2.0
12 months ago
0.1.9
12 months ago
0.1.8
12 months ago
0.1.7
12 months ago
0.1.6
12 months ago
0.1.5
12 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.1
12 months ago
0.1.0
12 months ago
0.0.9
12 months ago
0.0.8
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago