React-native-outline-input NPM

react-native-outline-input

This repository is react-native animated input component

Installation

npm install react-native-outline-input

yarn add react-native-outline-input

Usage

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import OutlineInput from 'react-native-outline-input';

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <SafeAreaView>
      <OutlineInput
        value={email}
        onChangeText={(e: string) => setEmail(e)}
        label="Username"
        activeValueColor="#6c63fe"
        activeBorderColor="#6c63fe"
        activeLabelColor="#6c63fe"
        passiveBorderColor="#bbb7ff"
        passiveLabelColor="#bbb7ff"
        passiveValueColor="#bbb7ff"
      />
      <OutlineInput
        value={password}
        onChangeText={(e: string) => setPassword(e)}
        label="Username"
        activeValueColor="#6c63fe"
        activeBorderColor="#6c63fe"
        activeLabelColor="#6c63fe"
        passiveBorderColor="#bbb7ff"
        passiveLabelColor="#bbb7ff"
        passiveValueColor="#bbb7ff"
      />
    </SafeAreaView>
  );
};

export default App;

Props

Prop	Type	Default	Description
label	string	any	The label that will display giving information about your input field
onChangeText	function	any	Function that works when there is a change
value	string	any	Value of input
secureTextEntry	boolean	false	If true, the text input obscures the text entered
autoCapitalize	string	none	Can tell to automatically capitalize certain characters
fontSize	number	16	Determines the font size
height	number	56	The label that will display giving information about your input field.
duration	number	300	Determines the animation time
easing	EasingFunction	Easing.inOut(Easing.ease)	Determines the animation type
activeValueColor	string	#51AD56	Determines active value color
passiveValueColor	string	#757575	Determines passive value color
activeLabelColor	string	#51AD56	Determines active label color
passiveLabelColor	string	#757575	Determines passive label color
activeBorderColor	string	#51AD56	Determines active border color
passiveBorderColor	string	#EFEFEF	Determines passive border color
fontFamily	string	System	Determines value and label font family