CIDRO UI - React Native UI Library 🔥

Install

📚Documentation

$ npm install cidro

Available Components

Block

Usage

import { Block, Text } from "cidro";

const App = () => (
  <Block safe>
    <Text h1>CIDRO 🔥</Text>
  </Block>
);

Available Props

| Property | Type | Default | Description | | -------- | :----------: | :------: | ------------------------------------------------ | | row | bool | false | flexDirection: 'row' | | column | bool | false | flexDirection: 'column' | | flex | bool, number | false, 1 | flex: 1 or | | safe | bool | false | Wrap the block with SafeAreaView | | center | bool | false | alignItems: 'center' alignSelf: 'center' | | middle | bool | false | alignItems: 'center' alignSelf: 'center' | | top | bool | false | alignItems: 'flex-start' alignSelf: 'flex-start' | | bottom | bool | false | alignItems: 'flex-end' alignSelf: 'flex-end' | | left | bool | false | alignItems: 'flex-start' | | right | bool | false | alignItems: 'flex-start' | | card | bool | false | changes the border-radius, -width and -color | | fluid | bool | false | width: 'auto' | | height | number | null | changes the height of the Block | | space | string | null | options are: 'between', 'around' or 'evently' | | width | number | null | changes the width of the Block |

Toolbar

Usage

import { Toolbar, Text } from "cidro";

const App = () => (
    <Toolbar
      left={<Text>Back</Text>}
      leftHandler={() => alert("left handler")}
      center={<Text>CIDRO UI 🔥</Text>}
      right={<Text>Logout</Text>}
      rightHandler={() => alert("right handler")}
);

Available Props

| Property | Type | Default | Description | | ------------ | :-------: | :------: | ----------------------------------------------------------------------------- | | color | string | null | change color | | noShadow | boolean | false | Toolbar without shadow | | height | number | 52 | change height | | left | component | null | set your own component (eg: Text or Icon) | | leftHandler | function | () => {} | Take an arrow function and everytime the user presses the function is called. | | center | component | null | set your own component | | right | component | null | set your own component | | rightHandler | function | () => {} | Take an arrow function and everytime the user presses the function is called. | | style | style | null | add any style to the whole container |

Button

Usage

import { Button } from "cidro";

const App = () => <Button text="Login" onPress={action("Button pressed")} />;

Available Props

| Property | Type | Default | Description | | -------- | :----: | :-----: | -------------------------------------------------------- | | text | string | null | Title is required | | disabled | bool | false | Change the disabled button | | loading | bool | false | Show loading indicator | | size | number | 10 | Change the size button | | width | string | null | Change the width | | outline | bool | false | Change button style | | type | string | primary | Available type "primary", "success", "danger", "warning" |

Text

Usage

import { Text } from "cidro";

const App = () => <Text h1>CIDRO UI 🔥</Text>;

Available Props

| Property | Type | Default | Description | | -------- | :----: | :-----: | --------------------------------- | | h1 | bool | false | Sets the text's fontSize to 44px. | | h2 | bool | false | Sets the text's fontSize to 38px. | | h3 | bool | false | Sets the text's fontSize to 30px. | | h4 | bool | false | Sets the text's fontSize to 24px. | | h5 | bool | false | Sets the text's fontSize to 18px. | | p | bool | false | Sets the text's fontSize to 16px. | | size | number | 0 | Sets the fontSize of the text. | | color | string | null | Sets the color of the text. | | muted | bool | false | Changes the text color | | bold | bool | false | Sets the fontWeight to 'bold'. | | italic | bool | false | Sets the fontStyle to 'italic'. |

Form

Usage

import { Form } from "cidro";

const App = () => (
  <Form title="Helo 🔥" subtitle="Cidro is awesome because built with ❤️">
    <View style={{ flex: 1, backgroundColor: "papayawhip" }} />
  </Form>
);

Available Props

| Property | Type | Default | Description | | -------- | :----------: | :---------: | ---------------------- | | children | component | null | set your own component | | title | bool, string | false, null | set your title | | subtitle | bool, string | false, null | set your subtitle |

Input

Usage

import { TextInput } from "cidro";

const App = () => (
  <TextInput
    label="Email"
    value="[email protected]"
    keyboardType="email-address"
    onChangeText={() => alert("Text On Change")}
  />
);

Available Props

| Property | Type | Default | Description | | -------- | :----: | :-----: | ---------------------------------------------------- | | label | string | null | set your label | | message | string | null | set your message (eg: "Whops your email is invalid") | | type | string | null | Available type "success", "error" |

Avatar

Usage

import { Avatar } from "cidro";

const App = () => (
  <Avatar source={{ uri: "https://facebook.github.io/react/logo-og.png" }} />
);

Available Props

| Property | Type | Default | Description | | -------- | :-----: | :-----: | --------------------------------------------------------- | | size | number | 60 | set size | | source | any | null | set image source, can be static from your app or external | | circle | boolean | false | set border radius / 2 if set true | | style | style | null | add any style to the whole container |

Avatar Text

Usage

import { AvatarText } from "cidro";

const App = () => <AvatarText title="Cidro UI" />;

Available Props

| Property | Type | Default | Description | | --------------- | :-----: | :-----: | ------------------------------------ | | title | string | null | set title for initials | | size | number | 60 | set size | | backgroundColor | string | black | set background color | | textColor | string | white | set text title color | | circle | boolean | false | set border radius / 2 if set true | | style | style | null | add any style to the whole container |

Support