react-native-fancy-input v1.0.0

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

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