HomeOur TeamContact

Text input effect Kaede

By Utkarsh Lubal
Published in UI
April 01, 2023
1 min read
Text input effect Kaede

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

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

PropTypeDescription
labelStringDisplayed as placeholder string of the input.
styleView Style ObjectApplied to the root container of the input.
labelStyleView Style ObjectApplied to the container of the label view.
inputStyleText Style ObjectApplied to the TextInput component.
valueStringThis value will be applied to the TextInput and change it’s state on every render. Use this prop if you want a Controlled Component.
defaultValueStringIf 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';

PropTypeDescription
iconClassObjectThe Icon component class you’ve imported from react-native-vector-icons.
iconNameStringName of the icon that is passed to Icon component.
iconColorStringApplied to the Icon component.
iconSizeNumberApplied to the Icon component.

Installation

npm install react-native-textinput-effects –save

Or

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

Example

import React from 'react';
import { View } from 'react-native';
import { Kaede } from 'react-native-textinput-effects';

const MyComponent = () => {
  const KaedeInput = (
  <Kaede
    label={'Website'}
    inputPadding={16}
  />

  );
  const KaedeInput1 = (
   <Kaede
    label={'Website'}
    inputPadding={16}
    style={{marginTop:10}}
    inputHeight={100}
  />
  );

  return (
    <View style={{ flex: 1, padding: 50, backgroundColor: 'purple' }}>
      {KaedeInput}

      {KaedeInput1}
    </View>
  );
};

export default MyComponent;

Tutorial

Coming Soon…


Previous Article
Text input effect Kohana
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media