react-native-kuminput v0.1.6

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