Skip to content
Pure js implemention material design TextInputLayout component for react-native
Branch: master
Clone or download
Latest commit 1f0dc6a Dec 18, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
TextInputLayoutDemo version 1.0.0 Aug 6, 2016
art version 1.0.0 Aug 6, 2016
src fix prop-types issue Dec 18, 2017
.gitignore basic demo implement Aug 5, 2016
.npmignore version 1.0.0 Aug 6, 2016
LICENSE Initial commit Aug 3, 2016
README.md update readme Aug 6, 2016
index.js version 1.0.0 Aug 6, 2016
package.json fix prop-types issue Dec 18, 2017
pub2demo.sh version 1.0.0 Aug 6, 2016

README.md

React-Native-TextInputLayout

npm npm npm

Pure js implemention material design TextInputLayout component for react-native, works on both android and ios.

Preview

Build and run the demo

cd TextInputLayoutDemo/
npm install
react-native run-ios

Usage

Install from npm:

npm install --save rn-textinputlayout

Integrate into your app:

'use strict';
import React, {Component} from 'react';
import {StyleSheet, View, TextInput, Text} from 'react-native';
import {TextInputLayout} from 'rn-textinputlayout';

const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
export default class TextInputLayoutDemo extends Component {

    render() {
        return (
            <View style={styles.container}>
                <TextInputLayout
                    style={styles.inputLayout}
                    checkValid={t => EMAIL_REGEX.test(t)}
                >
                    <TextInput
                        style={styles.textInput}
                        placeholder={'Email'}
                    />
                </TextInputLayout>
                <TextInputLayout style={styles.inputLayout}>
                    <TextInput
                        style={styles.textInput}
                        placeholder={'Password'}
                        secureTextEntry={true}
                    />
                </TextInputLayout>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 100
    },
    textInput: {
        fontSize: 16,
        height: 40
    },
    inputLayout: {
        marginTop: 16,
        marginHorizontal: 36
    }
});

##Props

  • hintColor
  • errorColor
  • focusColor
  • labelFontSize
  • labelText
  • checkValid
You can’t perform that action at this time.