react-native-kuminput

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

Sample Code

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	()=>{}