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

exmaples

Installation

yarn add react-native-fancy-input

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 <TextInput/>
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={''}
/>

Package detail

react-native-fancy-input

readme