# react-native-kuminput

> This is a react native npm package containing a More and stylish functionalities rather than TextInput.

Latest version **0.1.6** (published 2023-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-kuminput
pnpm add react-native-kuminput
yarn add react-native-kuminput
bun add react-native-kuminput
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2023-11-16 |
| First published | 2022-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kumail Baloch |
| Maintainers | kumaillatif60 |
| Keywords | kuminput, react-native-kuminput, react native kuminput, react native, text field, textinput, text input field |

## Links

- npm: https://www.npmjs.com/package/react-native-kuminput
- Repository: https://github.com/muhammad-kumail/react-native-kuminput
- Homepage: https://github.com/muhammad-kumail/react-native-kuminput#readme
- Issues: https://github.com/muhammad-kumail/react-native-kuminput/issues
- npm.io page: https://npm.io/package/react-native-kuminput

## Recent versions

- 0.1.6 (latest) — 2023-11-16
- 0.1.5 — 2023-07-08
- 0.1.4 — 2023-01-28
- 0.1.3 — 2023-01-17
- 0.1.2 — 2022-12-24
- 0.1.1 — 2022-12-24
- 0.1.0 — 2022-12-24
- 0.0.9 — 2022-12-24
- 0.0.8 — 2022-12-24
- 0.0.7 — 2022-12-23
- 0.0.6 — 2022-12-22
- 0.0.5 — 2022-12-22
- 0.0.4 — 2022-12-19
- 0.0.3 — 2022-12-17

## README

# react-native-kuminput
This package contain more stylish and more functionalities than TextInput from react native
## Installation
Native Cli: npm i react-native-vector-icons react-native-elements react-native-animatable react-native-kuminput -f

Expo: npm i react-native-elements react-native-animatable react-native-kuminput
## Demo
![Here is the demo](https://user-images.githubusercontent.com/56933027/208092557-e8222d5e-be1c-4ac2-9418-a1f4851a540e.gif)

## Sample Code
```javascript
import React, { useState } from 'react';
import {KumInput} from 'react-native-kuminput';
import {
    View,
    Text
} from 'react-native';
export default function App(){
    const [isSecureEntry, setIsSecureEntry] = useState(true);
    return (
        <View>
            <KumInput
                label={{
                    name: 'Password',
                    style:{color: 'black', fontSize: 16,marginHorizontal: 10}
                }}
                placeholder='Your Password'
                secureTextEntry={isSecureEntry}
                leftIcon={{
                    name:'key',
                    type: 'ionicon',
                    color: '#014e78',
                    onPress:()=>console.log("left icon pressed!")
                }}
                rightIcon={{
                    name: isSecureEntry ? 'visibility-off' : 'visibility',
                    type: 'material',
                    color: '#014e78',
                    onPress:()=>setIsSecureEntry(!isSecureEntry)
                }}
                error={{
                    condition: true,
                    message: 'Password must be 8 characters long',
                    animation:'bounceIn',
                    style:{fontSize: 16,marginHorizontal: 10}
                }}
                borderColorOnFocus={'#014e78'}
                onChangeText={(val) => console.log(val)}
                style={{fontSize: 16}}
                containerStyle={{borderWidth: 1, borderRadius: 10,paddingVertical: 2, margin: 5, marginHorizontal: 10 }}
            />
        </View>
    );
}
```
## Note
After installing npm packages, configure the react-native-vector-icons first before running a code see here https://aboutreact.com/react-native-vector-icons/.
If you are using Expo, no need to install or configure react-native-vector-icons
## Properties
|Props|Type|Default|Description|
|---|---|---|---|
|label|Object|{name: null, style: {}}|
|placeholder|String|empty string|
|placeholderTextColor|String|gray|
|value|String|empty string|
|defaultValue|String|empty string|
|secureTextEntry|Boolean|false|
|containerStyle|Object|{}|
|keyboardType|String|default|
|maxLength|Number|no limit|
|multiline|Boolean|false|
|editable|Boolean|true|
|style|Object|{}|styles of the input field|
|rightIcon|Object|{name: null, type: null, color: null, size: 25, onPress:()=>{}}|
|leftIcon|Object|{name: null, type: null, color: null, size: 25, onPress:()=>{}}|
|error|Object|{condition: false, message:null,animation:null,style: {}}|animation props: bounce, flash, jello, pulse, rotate, rubberBand, bounceIn and much more you can check at https://www.npmjs.com/package/react-native-animatable|
|borderColorOnFocus|String|black|
|borderColorOnBlur|String|black|
|onFocus|Function|()=>{}|
|onBlur|Function|()=>{}|
|onChangeText|Function|()=>{}|
|onEndEditing|Function|()=>{}|
|onSubmitEditing|Function|()=>{}|

---
_Source: https://npm.io/package/react-native-kuminput · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._