Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
react-native-input-outline
Advanced tools
Readme
A performant TextInput with fully configurable options 🚀
I built this library because of all the performance issues I noticed in other TextInput libraries. This library is extremely performant thanks to Reanimated v2. Leave a star if you enjoy it!
Performant React Native TextInputs built with Reanimated 2.
yarn add react-native-reanimated@2.0.0-rc.0 react-native-input-outline
Reanimated v2 is required for this library to work.
import React, { useRef, useState } from 'react';
import { View, Button } from 'react-native';
import { InputOutline } from 'react-native-input-outline';
export default () => {
const inputRef = useRef<InputOutline>(null); // fully TypeScript enabled
const [error, setError] = useState<string |undefined>(undefined);
const showError = () => {
setError("This is your error message!")
}
const hideError = () => {
setError(undefined)
}
return (
<View>
<InputOutline
ref={inputRef}
error={error} // wont take effect until a message is passed
/>
<Button onPress={showError} title="Set Input Error" />
</View>
);
}
All vanilla ReactNative TextInput Props along with regular ref
usage are supported as well as others configured from this library shown below.
Prop | Desription | Default | Type |
---|---|---|---|
TextInput Props | Inherited Props | TextInput Props | |
placeholder | The string that will be rendered before text input has been entered. | string | |
fontSize | Font size for TextInput. | 14 | number |
fontFamily | Font Family for all fonts. | undefined | string |
fontColor | Color of TextInput's font. | black | string |
backgroundColor | Background color of the TextInput. | 'white' | string |
activeColor | Color when focused. | 'blue' | string |
inactiveColor | Color when blurred (not focused). | 'black' | string |
errorColor | Color that is displayed when in error state. | 'red' | string |
error | Error message is displayed. If anything is provided to error besides null or undefined, then the component is within an error state, thus displaying the error message provided here and errorColor. | undefined | string |
trailingIcon | Trailing Icon for the Input. | undefined | React.FC |
roundness | Border Radius for Container. | 5 | number |
characterCount | Will show a character count helper text and limit the characters being entered. | undefined | number |
assistiveText | Will show a character count helper text and limit the characters being entered. | undefined | string |
paddingVertical | Vertical padding for TextInput Container. Used to calculate animations. | 12 | number |
paddingHorizontal | Horizontal padding for TextInput Container. | 16 | number |
Method | Description |
---|---|
focus() | Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view. |
blur() | Removes focus from an input or view. This is the opposite of focus() |
isFocused() | Returns current focus of input. |
clear() | Removes all text from the TextInput. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
FAQs
Performant React Native Text Inputs
The npm package react-native-input-outline receives a total of 226 weekly downloads. As such, react-native-input-outline popularity was classified as not popular.
We found that react-native-input-outline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).