TextInput.md

TextInput

Demo

Props

Props	Params	isRequire	default
value	String	No
label	String	No
style	ViewStyle	No
fontFamily	String	No
labelStyle	TextStyle	No
inputStyle	TextStyle	No
iconStyle	ImageStyle	No
textErrorStyle	TextStyle	No
showIcon	Boolean	No	true
currency	Boolean	No
unitCurrency	String	No
numeric	Boolean	No
onChangeText	(text) => void	Yes
renderLeftIcon	() => JSX.Element	No
renderRightIcon	() => JSX.Element	No

Example

    import React from 'react';
    import { StyleSheet, View } from 'react-native';
    import { TextInput } from 'react-native-utils-components';
    import { useScale } from 'react-native-utils-toolkit';
    import AntDesign from 'react-native-vector-icons/AntDesign';

    const { scale } = useScale;

    export interface Props {
        name: string;
    }

    const TextInputScreen: React.FC<Props> = _props => {
        return (
            <View style={styles.container}>
                <TextInput
                    label="Normal"
                    placeholder="Placeholder"
                    placeholderTextColor="gray"
                    onChangeText={(text: string) => {
                    console.log(text);
                    }}
                />

                <TextInput
                    style={styles.textinput}
                    label="Password"
                    placeholder="Placeholder"
                    placeholderTextColor="gray"
                    secureTextEntry
                    onChangeText={(text: string) => {
                        console.log(text);
                    }}
                    textError="Error"
                    renderLeftIcon={() => (
                        <AntDesign
                            style={styles.icon}
                            color="gray"
                            name="unlock"
                            size={scale(20)}
                        />
                    )}
                    iconStyle={{ tintColor: 'gray' }}
                />

                <TextInput
                    style={styles.textinput2}
                    label="Currency"
                    placeholder="Placeholder"
                    placeholderTextColor="gray"
                    currency
                    unitCurrency="$"
                    onChangeText={(text: string) => {
                        console.log(text);
                    }}
                />

                <TextInput
                    style={styles.textinput2}
                    labelStyle={{ color: '#F4A460' }}
                    iconStyle={{ tintColor: '#F4A460' }}
                    inputStyle={{ color: '#F4A460' }}
                    label="Numeric"
                    placeholder="Placeholder"
                    placeholderTextColor="gray"
                    numeric
                    onChangeText={(text: string) => {
                        console.log(text);
                    }}
                    renderLeftIcon={() => (
                        <AntDesign
                            style={styles.icon}
                            color={'#F4A460'}
                            name="Safety"
                            size={scale(20)}
                        />
                    )}
                    textError="Error"
                />
            </View>
        );
    };

    export default TextInputScreen;

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            padding: scale(20),
        },
        textinput: {
            marginTop: scale(20),
            borderBottomWidth: scale(0.5),
            borderBottomColor: 'gray',
        },
        textinput2: {
            marginTop: scale(20),
            backgroundColor: 'white',
            borderRadius: scale(8),
            padding: scale(12),
        },
        icon: {
            marginRight: scale(5),
        },
    });