Azir Framwork : https://azir.io/docs

Input

An advance Input component that should render nicely on any platform. Supports a great level of customization.

for version 1.0.3 and above now you can use startIcon and EndIcon instead of Icon props.

Installation

to install the latest version of azir-input you only need to run:

npm install azir-input  --save

or

yarn add azir-input

Examples

Basic

import Input from "azir-input";
import {SolidIcons} from "azir-icon";
---
<Input help="error!!" label="Nice Input ;)" placeholder="Email"
endIcon={SolidIcons.boxOpen} endIconSize={60} endIconColor="error"  />

RTL with custom Icon

import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
import AzirTheme from "azir-theme";
---
<View style={ { width: "80%" } }>
<Input
    endIcon={<Icon icon={SolidIcons.at} size={22} color={AzirTheme.COLORS.SUCCESS} />}
    inputStyle={ { color: "green" } }
    help="خطأ !!"
    label="البريد الإلكتروني : "
    labelPosition="right"
    helpStyle={ { marginRight: 110 } }
/>
</View>

advance Themes => Theme 1

import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
---
<Input
    labelPosition="top"
    helpPosition="top"
    label="Password"
    labelStyle={ { color: "#fff", padding: 5 } }
    inputStyle={ { fontSize: 18, paddingHorizontal: 10, color: "#34495e" } }
    style={ { height: 55, paddingHorizontal: 0, backgroundColor: "#fff" } }
    containerStyle={ { backgroundColor: "#34495e" } }
    password
    renderPasswordIcon={password => {
    return <Icon style={ [ { backgroundColor: "#34495e", padding: 13 }, props.iconStyle] }
    icon={password ? SolidIcons.eye : SolidIcons.ellipsisHh} size={24} color="#ccc" />;
    } }
></Input>

advance Themes => Theme 2

import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
---
 <Input
    labelPosition="top"
    label="Email"
    helpPosition="top"
    labelStyle={ {  color: "#2196f3" } }
    inputStyle={ { fontSize: 18, paddingHorizontal: 10, color: "#2196f3" } }
    style={ {
    borderColor: "#2196f3",
    borderBottomWidth: 2,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    height: 55,
    paddingHorizontal: 0,
    backgroundColor: "transparent"
    } }
    endIcon={<Icon style={ { padding: 13 } } icon={SolidIcons.at} size={24} color={"#2196f3"}></Icon>}
></Input>

advance Themes => Theme 3

import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
---
<Input
    labelPosition="top"
    helpPosition="top"
    labelStyle={ { color: "#BFD2FF" } }
    inputStyle={ { fontSize: 18, paddingHorizontal: 10, color: "#BFD2FF" } }
    style={ {
    borderColor: "#59e3e6",
    borderBottomWidth: 3,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    height: 60,
    paddingHorizontal: 0,
    backgroundColor: "#363a4e"
    } }
    endIcon={<Icon style={ { padding: 13 } } icon={SolidIcons.arrowRight} size={24} color={"#BFD2FF"}>
    </Icon>}>
</Input>

Props

• type
• endIcon
• endIconSize
• endIconColor
• startIcon
• startIconSize
• startIconColor
• password
• disabled
• borderless
• rounded
• renderPasswordIcon
• placeholderTextColor
• color
• selectionColor
• bgColor
• label
• labelPosition
• labelStyle
• help
• helpPosition
• helpStyle
• containerStyle

Reference

type

Determines which keyboard to open, e.g.numeric.

| Type | Required | Default | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | | enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') | No | default |

endIcon

Set the end Icon of the input Text, can be string or jsx element.

| Type | Required | Default | | ------------------- | -------- | ------- | | string, JSX element | No | Not Set |

endIconSize

Set the end Icon Size of the input Text.

| Type | Required | Default | | ------ | -------- | ------- | | number | No | Not Set |

endIconColor

Set the end Icon Color of the input Text.

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |

startIcon

Set the start Icon of the input Text, can be string or jsx element.

| Type | Required | Default | | ------------------- | -------- | ------- | | string, JSX element | No | Not Set |

startIconSize

Set the start Icon Size of the input Text.

| Type | Required | Default | | ------ | -------- | ------- | | number | No | Not Set |

startIconColor

Set the start Icon Color of the input Text.

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |

password

Tells the input that this is going to be a password input. ( it will show eye icon which you can press to toggle show pass or not)

| Type | Required | Default | | ---- | -------- | ------- | | bool | No | false |

disabled

If true, disable all interactions for this component.

| Type | Required | Default | | ---- | -------- | ------- | | bool | No | false |

borderless

Sets the Input's borderWidth to 0

| Type | Required | Default | | ---- | -------- | ------- | | bool | No | false |

rounded

Sets the corners to be rounded

| Type | Required | Default | | ---- | -------- | ------- | | bool | No | false |

renderPasswordIcon

Render Props Function you can override Input icon , we pass password boolean args

| Type | Required | Default | | -------------------- | -------- | ------- | | Render Prop Function | No | null |

placeholderTextColor

Sets the placeholder's text color

| Type | Required | Default | | ------------------------------------------ | -------- | --------------------- | | azir-color | No | AzirTheme.COLORS.GREY |

color

Input Text color

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | black |

selectionColor

Input Text cursor color

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |

bgColor

Input background color

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | Not set |

label

Sets the label of the input

| Type | Required | Default | | ------------------- | -------- | ------- | | string, JSX element | No | Not Set |

labelPosition

Sets the label Position

| Type | Required | Default | | ------------------------ | -------- | ------- | | "top" , "left" , "right" | No | top |

labelStyle

override Label Style

| Type | Required | | ----- | -------- | | style | No |

help

Sets the help of the input

| Type | Required | Default | | ------------------- | -------- | ------- | | string, JSX element | No | Not Set |

helpPosition

Sets the help Position

| Type | Required | Default | | ---------------- | -------- | ------- | | "top" , "bottom" | No | bottom |

helpStyle

override help Style

| Type | Required | | ----- | -------- | | style | No |

containerStyle

override input container Style which include ( input text + icon)

| Type | Required | | ----- | -------- | | style | No |