rn-input-row

• This is a HIGHLY customizable ANIMATED input row for React-Native.
• It returns nothing to you, it just transfers props to the proper components supplied by RN and Animates activity and error messages
• Completely up to you how you want to use the validations, get and set values. I do it onBlur of TextInput rather than onChangeText to avoid re-rendering on every keystroke...

Uses react-native-vector-icons/FontAwesome as the icon source

| Prop | Type | Description | Requirements | | --- | --- | --- | --- | | containerProps | object | View Props | ALWAYS REQUIRED Must include style with a height inside the style. | | errorProps | object | Text Props plus two custom props render and text for the error message | Must include render and text when using this prop | | leftIconProps | object | Icon or Image props, depending on the localIcon prop | Must include localIcon when using this prop. localIcon:true will transfer props to an Image component, localIcon:false will transfer props to Icon | | titleProps | object | Text Props for the title plus text | Must include text when using this prop | | textInputProps | object | TextInput Props for the input portion | Must include style when using this at least put a {flex:1} in style, shit...put a flex:something on all of them...the icons have a flex 1 for reference | | rightIconProps | object | same as leftIconProps plus renderActivity renderIcon activityIconProps | Must use renderActivity renderIcon localIcon when using this. Must use activityIconProps when renderActivity is true activityIconProps will only transfer to an Icon

Validations

I have written some validations you can import and use.

Button

import { Button } from 'rn-input-row';

• Must include an onPress in containerProps when usng the Button

I have included a Button component you can import and use so you can have a touchable form entry that blends seamlessly with the rest. Structure is similar to the InputRow, except textInputProps are replaced with detailProps so you can have titleProps and detailProps in the same row. The rightIconProps on the Button will be exactly like the leftIconProps.

npm install rn-input-row --save
npm install react-native-vector-icons --save
react-native link react-native-vector-icons

import React from 'react';
import { View, StyleSheet } from 'react-native';
import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';


import { InputRow, Button, validateEmail, validateZip, validateCurrency } from 'rn-input-row';

const activityIconProps = {name:'circle',size:6,color:'black'}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: 'aqua',
    paddingTop:100,
  },
  rowContainer: {
    height: 50,
    backgroundColor: 'white',
    marginHorizontal:10,
    paddingHorizontal: 5,
  },
  border: {
    borderBottomWidth: 1
  },
  title: {
    fontSize: 14,
    fontWeight: '600',
    flex:2
  },
  textInput: {
    flex:3,
  },
  errorText: {
    color:'red',
    fontSize:12,
    marginLeft:12
  },
  submit: {
    height: 50,
    marginHorizontal: 10,
    marginTop:20,
    borderRadius:10,
    backgroundColor: 'deeppink',
    alignItems:'center',
    justifyContent:'center',
    padding:5
  }
})



export default class Example extends React.Component {

  constructor(){
    super();

    this.email = '';
    this.zip = '';
    this.amount = '';

    this.state = {
      email:'',
      validEmail: true,

      zip:'',
      validZip: true,

      amount: '',
      validAmount: true,

    };
  };

  updateEmail = (text) => {
    this.setState({ email:text ,validEmail: validateEmail(text) })
  };

  updateZip = (text) => {
    this.setState({ zip:text, validZip: validateZip(text) })
  };

  updateAmount = (text) => {
    this.setState({ amount:text, validAmount: validateCurrency(text) })
  };

  submit = () => {
    //this will blur inputs and allow pending validations to run.
    dismissKeyboard();

  };

  render(){
    return(
      <View style={styles.container}>
        <InputRow
          containerProps={{style:[styles.border,styles.rowContainer]}}
          errorProps={{
            render: !this.state.validEmail,
            text: 'Please enter an email address',
            style: styles.errorText
          }}
          leftIconProps={{
            localIcon: false,
            name: 'envelope',
            size: 15,
            color: 'yellow'
          }}
          titleProps={{
            text: 'Email',
            style: styles.title
          }}
          textInputProps={{
            style: styles.textInput,
            onChangeText: (text) => this.email = text,
            onBlur: () => this.updateEmail(this.email),
          }}
          rightIconProps={{
            renderActivity: true,
            renderIcon:(this.state.email === '') ? false:true,
            localIcon: false,
            name: (this.state.validEmail) ? 'check':'close',
            size:15,
            color:(this.state.validEmail) ? 'green':'red',
            activityIconProps: activityIconProps
          }}
        />
        <InputRow
          containerProps={{style:[styles.border,styles.rowContainer]}}
          errorProps={{
            render: !this.state.validZip,
            text: 'Please enter a zip code',
            style: styles.errorText
          }}
          leftIconProps={{
            localIcon: false,
            name: 'cogs',
            size: 15,
            color: 'blue'
          }}
          titleProps={{
            text: 'Zip Code',
            style: styles.title
          }}
          textInputProps={{
            style: styles.textInput,
            onChangeText: (text) => this.zip = text,
            onBlur: () => this.updateZip(this.zip),
          }}
          rightIconProps={{
            renderActivity: true,
            renderIcon:(this.state.zip === '') ? false:true,
            localIcon: false,
            name: (this.state.validZip) ? 'check':'close',
            size:15,
            color:(this.state.validZip) ? 'green':'red',
            activityIconProps: activityIconProps
          }}
        />
        <InputRow
          containerProps={{style:styles.rowContainer}}
          errorProps={{
            render: !this.state.validAmount,
            text: 'Please enter a valid amount',
            style: styles.errorText
          }}
          leftIconProps={{
            localIcon: false,
            name: 'money',
            size: 15,
            color: 'green'
          }}
          titleProps={{
            text: 'Amount',
            style: styles.title
          }}
          textInputProps={{
            style: styles.textInput,
            onChangeText: (text) => this.amount = text,
            onBlur: () => this.updateAmount(this.amount),
          }}
          rightIconProps={{
            renderActivity: true,
            renderIcon:(this.state.email === '') ? false:true,
            localIcon: false,
            name: (this.state.validAmount) ? 'check':'close',
            size:15,
            color:(this.state.validAmount) ? 'green':'red',
            activityIconProps: activityIconProps
          }}
        />

        <Button
          containerProps={{
            onPress: this.submit,
            style: [styles.rowContainer,{marginTop:10,backgroundColor:'deeppink'}]
          }}
          titleProps={{
            text: 'Submit',
            style: [styles.title,{textAlign:'center'}]
          }}
          leftIconProps={{
            localIcon:false,
            name: 'star',
            size:12,
            color: 'yellow'
          }}
          rightIconProps={{
            localIcon:false,
            name: 'star',
            size:12,
            color: 'yellow'
          }}
        />

      </View>
    )
  }
}