JSPM – react-native-element-textinput@1.0.1

Package Exports

react-native-element-textinput

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-element-textinput) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-element-textinput

A react-native TextInput component easy to customize for both iOS and Android.

Getting started

    npm install react-native-element-textinput --save

    yarn add react-native-element-textinput

Source code demo

react-native-template-components A beautiful template for React Native.

Demo

Props

Props	Params	isRequire
containerStyle	ViewStyle	No
label	String	No
labelStyle	TextStyle	No
inputStyle	TextStyle	No
textError	String	No
textErrorStyle	TextStyle	No
showIcon	Boolean	No
iconStyle	ImageStyle	No
numeric	Boolean	No
focusColor	String	No
fontFamily	String	No
hashtagValue	String[]	No
hashtagStyle	ViewStyle	No
hashtagTextStyle	TextStyle	No
onChangeHashtag	(string[]) => void	No
renderLeftIcon	() => JSX.Element	No
renderRightIcon	() => JSX.Element	No

Usage

    import React, {useState} from 'react';
    import {StyleSheet, View, SafeAreaView} from 'react-native';
    import {TextInput} from 'react-native-element-textinput';

    const TextInputScreen = _props => {
        const [hashtag, setHashtag] = useState([]);
        return (
            <SafeAreaView style={{flex: 1}}>
                <View style={styles.container}>
                    <TextInput
                        style={{marginTop: 20}}
                        containerStyle={styles.textinput}
                        label="Normal"
                        placeholder="Placeholder"
                        placeholderTextColor="gray"
                        onChangeText={text => {
                            console.log(text);
                        }}
                        focusColor="red"
                        textError="Please enter"
                    />
                    <TextInput
                        style={{marginTop: 20}}
                        containerStyle={styles.textinput}
                        label="Normal"
                        placeholder="Placeholder"
                        placeholderTextColor="gray"
                        secureTextEntry
                        onChangeText={text => {
                            console.log(text);
                        }}
                    />

                    <TextInput
                        style={{marginTop: 20}}
                        containerStyle={styles.textinput}
                        hashtagValue={hashtag}
                        onChangeHashtag={value => {
                            setHashtag(value);
                        }}
                        label="Hashtag"
                        placeholder="Enter hashtag..."
                        placeholderTextColor="gray"
                    />
                </View>
            </SafeAreaView>
        );
    };

    export default TextInputScreen;

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            padding: 20,
        },
        textinput: {
            borderBottomWidth: 0.5,
            borderBottomColor: 'gray',
        },
    });