This repository is react-native animated input component
npm install react-native-outline-inputThis repository is react-native animated input component
| !ezgif com-video-to-gif |
|----|
> npm install react-native-outline-input
or
> yarn add react-native-outline-input
``js
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 (
onChangeText={(e: string) => setEmail(e)}
label="Username"
activeValueColor="#6c63fe"
activeBorderColor="#6c63fe"
activeLabelColor="#6c63fe"
passiveBorderColor="#bbb7ff"
passiveLabelColor="#bbb7ff"
passiveValueColor="#bbb7ff"
/>
onChangeText={(e: string) => setPassword(e)}
label="Username"
activeValueColor="#6c63fe"
activeBorderColor="#6c63fe"
activeLabelColor="#6c63fe"
passiveBorderColor="#bbb7ff"
passiveLabelColor="#bbb7ff"
passiveValueColor="#bbb7ff"
/>
);
};
export default App;
``
|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
Thank you for your contribution to Burhan Yılmaz (@burhanyilmaz)