Rn-floating-label-input-component NPM

rn-floating-label-input-component

A cross-platform react-native floating label input component.

Under the hood, this library is using TextInput.

Installation

Install the library using npm or yarn:

# using npm
$ npm i rn-floating-label-input-component

# using yarn
$ yarn add rn-floating-label-input-component

Usage

import React, { useState } from "react";
import { View } from "react-native";
import FloatingLabeleInput from "rn-floating-label-input-component";

const Example = () => {
  const [userName, setUserName] = useState("");
  return (
    <View>
      <FloatingLabeleInput
        label="User Name"
        value={userName}
        onChange={setUserName}
        autoCapitalize="none"
        returnKeyType="next"
        required={false}
        blurredBorderWidth={1}
      />
    </View>
  );
};

export default Example;

Available props

All the TextInput props are supported as well!

Name	Type	Default	Description
`autoCapitalize`	string?		Tells TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad
`blurredBorderWidth`	float?	0	Border width of the blurred component
`blurredFontSize`	float?	16	Label font size of the burred component
`blurredPosition`	float?	android: 25, ios: 10	Label position of the burred component
`colors`	object?	{}	Overrides the default colors of the compoent
`customStyles`	style?	{}	The style of the parent container
`disabled`	bool?	false	If true, text is not editable. The default value is false
`focusedBorderWidth`	float?	1.3	Border width of the focused component
`focusedFontSize`	float?	13	Label font size of the focused component
`focusedPosition`	float?	android: -4, ios: -5	Label position of the focused component
`inputFontSize`	float?	16	Input font size of the component
`isSecureField`	bool?	false	If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. Does not work with multiline={true}
`keyboardType`	string?	'default'	Determines which keyboard to open, e.g.numeric
`label`	string		The label of the field
`labelLeftPosition`	float?	showLeftIcon === true ? 32 : 5	Label left position
`leftIcon`	component?		Left Component
`message`	string?	''	Help text
`multiline`	bool?	false	If true, the text input can be multiple lines
`onBlur`	func?	() => null	Callback that is called when the text input is blurred
`onChange`	func	REQUIRED () => null	Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler
`onFocus`	func?	() => null	Callback that is called when the text input is focused
`onLeftIconPress`	func?	() => null	Callback that is called when the left icon is clicked
`onRightIconPress`	func?	() => null	Callback that is called when the right icon is clicked
`onSubmitEditing`	func?	() => null	Callback that is called when the text input's submit button is pressed
`placeholder`	string?	''	The string that will be rendered before text input has been entered
`required`	bool?	false	If true, displays the * symbol next to label
`returnKeyType`	string?		Determines how the return key should look.
`rightActiveIcon`	component?		Right Active Component
`rightInactiveIcon`	component?		Right Inactive Component
`showLeftIcon`	bool?	false	If true, reder leftIcon
`showRightIcon`	bool?	false	If true, reder rightActiveIcon and rightInactiveIcon
`value`	string	REQUIRED	The value of the text input

Contributing

Pull requests, feedbacks and suggestions are welcome!

License

The library is released under the Folio3 X-Platform Engineering Group.

rn-floating-label-input-component

@infinitebrahmanuniverse/nolb-rn-f @everything-registry/sub-chunk-2674

0.0.1

3 years ago