azir-input v1.0.7

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.

endIcon

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

endIconSize

Set the end Icon Size of the input Text.

endIconColor

Set the end Icon Color of the input Text.

startIcon

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

startIconSize

Set the start Icon Size of the input Text.

startIconColor

Set the start Icon Color of the input Text.

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)

disabled

If true, disable all interactions for this component.

borderless

Sets the Input's borderWidth to 0

rounded

Sets the corners to be rounded

renderPasswordIcon

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

placeholderTextColor

Sets the placeholder's text color

color

Input Text color

selectionColor

Input Text cursor color

bgColor

Input background color

label

Sets the label of the input

labelPosition

Sets the label Position

labelStyle

override Label Style

help

Sets the help of the input

helpPosition

Sets the help Position

helpStyle

override help Style

containerStyle

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