React Native Fancy Input component

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

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:

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

/>

Load More Related Articles
Load More By john
Load More In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *