react-native-floatlabelinput
v1.0.0
Published
This is react-native custome textinput which has a floating label
Downloads
3
Readme
Certainly! Here's a template you can directly copy and paste into your README file:
FloatingLabelInput Component
The FloatingLabelInput component is a reusable input field component for React Native applications. It provides a floating label above the input field, along with an optional icon on the left side and support for secure text entry (e.g., passwords).
Installation
To use the FloatingLabelInput component in your React Native project, install it from npm:
npm install [email protected]
Usage
Import the FloatingLabelInput component into your React Native file:
import FloatingLabelInput from 'react-native-floatLabelInput';
Use the FloatingLabelInput component in your JSX like any other React Native component:
<FloatingLabelInput
label="Username"
value={username}
onChangeText={setUsername}
onFocus={() => setIsUsernameFocused(true)}
onBlur={() => setIsUsernameFocused(false)}
isFocused={isUsernameFocused}
icon="email-outline"
/>
Props
label
: The label to be displayed above the input field.icon
: The name of the icon to be displayed on the left side of the input field.value
: The current value of the input field.onChangeText
: A function to handle text input changes.onFocus
: A function to handle the input field focus event.onBlur
: A function to handle the input field blur event.isFocused
: A boolean indicating whether the input field is currently focused.secureTextEntry
: A boolean indicating whether the input should be masked for sensitive data like passwords.
Example
import React, { useState } from 'react';
import { View } from 'react-native';
import FloatingLabelInput from 'react-native-floatLabelInput';
const MyScreen = () => {
const [username, setUsername] = useState('');
const [isUsernameFocused, setIsUsernameFocused] = useState(false);
return (
<View>
<FloatingLabelInput
label="Username"
value={username}
onChangeText={setUsername}
onFocus={() => setIsUsernameFocused(true)}
onBlur={() => setIsUsernameFocused(false)}
isFocused={isUsernameFocused}
icon="email-outline"
/>
</View>
);
};
export default MyScreen;
License
This project is licensed under the ISC License.