Text input effect Sae

By Utkarsh Lubal

Published in UI

April 01, 2023

1 min read

Introduction

We’ve come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native. There is also a native iOS library called TextFieldEffects which has built some of them in Swift.

Common Props

Prop	Type	Description
`label`	String	Displayed as placeholder string of the input.
`style`	View Style Object	Applied to the root container of the input.
`labelStyle`	View Style Object	Applied to the container of the label view.
`inputStyle`	Text Style Object	Applied to the TextInput component.
`value`	String	This value will be applied to the TextInput and change it’s state on every render. Use this prop if you want a Controlled Component.
`defaultValue`	String	If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. This prop creates an Uncontrolled Component and is only used during initial render.

You can also use default TextInput Props. They’ll be passed into TextInput component. E.g., use TextInput’s onChange prop to be notified on text changes.

<Sae
  onChangeText={(text) => { this.setState({textValue: text}) }
/>

Props for TextInputEffects with an Icon

This component needs Icon component from react-native-vector-icons to operate with icons. You should import it before creating a TextInputEffects component.

import Icon from 'react-native-vector-icons/FontAwesome';

Prop	Type	Description
`iconClass`	Object	The Icon component class you’ve imported from react-native-vector-icons.
`iconName`	String	Name of the icon that is passed to Icon component.
`iconColor`	String	Applied to the Icon component.
`iconSize`	Number	Applied to the Icon component.

Installation

npm i react-native-fontawesome

npm install react-native-textinput-effects –save

npm install react-native-textinput-effects@0.4.2 –save

Example

import React from 'react';
import { View } from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Sae } from 'react-native-textinput-effects';

const MyComponent = () => {
  const saeInput = (
    <Sae
      label={'Email Address'}
      iconClass={FontAwesomeIcon}
      iconName={'envelope'}
      iconColor={'black'}
      inputStyle={'black'}
      inputPadding={16}
      labelHeight={24}
      // active border height
      borderHeight={2}
      // TextInput props
      autoCapitalize={'none'}
      autoCorrect={false}
    />
  );
  const saeInput1 = (
    <Sae
      label={'Invitation Code'}
      iconClass={FontAwesomeIcon}
      iconName={'pencil'}
      iconColor={'black'}
      inputStyle={'black'}
      inputPadding={16}
      labelHeight={24}
      // active border height
      borderHeight={2}
      // TextInput props
      autoCapitalize={'none'}
      autoCorrect={false}
    />
  );

  return (
    <View style={{ flex: 1, padding:50, backgroundColor: 'purple'}}>
      {saeInput}
      {saeInput1}
    </View>
  );
};

export default MyComponent;