React Native Fancy Input

I present you a simple input component that is fancy, easy to use and super flexible.

Features

• Super easy styling
• Material like behaviour
• Flexible

Installation

yarn add react-native-fancy-input

or

npm intsall react-native-fancy-input

Usage

This input is a controlled component so your parent component needs to maintain a state.

Basic

import FancyInput from 'react-native-fancy-input';

And inside a component

class InputWrapper extends React.Component {
    state = {
        value: this.props.value || '',
    };

    render() {
        return (
            <View style={{ width: '100%' }}>
                <FancyInput
                    onChange={this.onChange}
                    value={this.state.value}
                />
            </View>
        );
    }

    onChange = value => {
        this.setState({
            value,
        });
    };
}

Configuration props

List of props supported by a component

Prop | Type | Default | Description ---------- | ------- | ---------- | ----------------------- backgroundColor | string | #ffffff | Input background color defaultPadding | number | 8 | Default padding for input error | string | | Error message displayed under an input errorColor | string | #ac0000 | Color for an error message background errorTextColor | string | #fff | Color for an error message text isLoading | bool | | Display loading indicator itemPrepend | node | | Prepend React Node before input itemAppend | node | | Append React Node after input label | string | | Label for input placeholder | string | | Placeholder text primaryColor | string | #222222 | Primary color. Based on it it will generate whole styling. readOnly | bool | | Make input read only. readOnlyColor | string | #ececec | Background color for read only field stylesContainer | object | {} | Extra styles for a container stylesError | object | {} | Extra styles for an error stylesErrorText | object | {} | Extra styles for an error text stylesInput | object | {} | Extra styles for an input stylesLabel | object | {} | Extra styles for a label stylesLoading | object | {} | Extra styles for a loading textInputProps | object | {} | Same props as value | string | | String value onBlur | func | | on blur callback onChange | func | | on change callback onFocus | func | | on focus callback

Examples

Different styling

<FancyInput
    label="Some label"
    primaryColor="#005cc5"
    value={''}
/>

Disabled and loading

<FancyInput
    label="Some label"
    isLoading
    readOnly
    value={''}
/>

With prepend

<FancyInput
    label="Some label"
    itemPrepend={
        <View style={
            { padding: 10, backgroundColor: '#dedede', alignItems: 'center' }
        }>
            <Text style={{ lineHeight: 30, fontWeight: '700' }}>http://</Text>
        </View>
    }
    value={''}
/>

With append icon

<FancyInput
    label="Some label"
    itemAppend={
        <View style={
            { padding: 10, width: 50, backgroundColor: '#de9510', alignItems: 'center' }
        }>
            <Foundation color="#fff" name="dollar" size={32} />
        </View>
    }
    value={''}
/>