react-native-unsigned-input

1. Normalizing the input string by removing Vietnamese diacritics and whitespaces:

• This algorithm takes an input string and performs the following steps:

  a. Decomposes the string into its canonical form using decomposedStringWithCanonicalMapping. This breaks the string into its base characters and their combining marks (diacritics).

  b. Folds the diacritic marks using stringByFoldingWithOptions:NSDiacriticInsensitiveSearch. This step replaces characters with diacritics with their base forms, effectively removing the diacritic marks.

  c. Trims the whitespaces at the beginning and the end of the string using stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]. The result of this algorithm is a normalized string without diacritics and extra whitespaces.

2. Replacing the input string in the text field with the normalized string:

• This algorithm updates the text field's content by replacing the characters in a specified range with the normalized string. This is done using the stringByReplacingCharactersInRange:range withString:normalizedString method. As a result, the text field will display the normalized version of the input string, without diacritics and extra whitespaces.

In summary, these two algorithms work together to process a text input by removing Vietnamese diacritics and extra whitespaces, then updating the text field with the normalized string.

Demo

Installation

Make sure to install the @tdduydev/react-native-unsigned-input package and link it with your project.

npm install react-native-unsigned-input --save

Usage

import InputBlurUnsigned from '@tdduydev/react-native-unsigned-input';

// In your JSX
<InputBlurUnsigned
  placeholder="Enter text"
  leftIcon={<YourLeftIcon />}
  rightIcon={<YourRightIcon />}
  onChangeText={(text) => console.log(text)}
/>;

Props

Styling

The component has built-in styling for the TextInput and its container. To customize the styling, use the style, rightIconContainerStyle, and leftIconContainerStyle props as needed.

The backgroundInput prop is used to provide a custom background input for the iOS platform. This prop should be a React Element, and it is optional. If provided, the background input element will be rendered behind the main TextInput component on iOS devices. This can be useful for adding a custom appearance or styling to the input field on iOS.

Methods

focus: This method can be called to focus the TextInput field programmatically. To use it, create a ref for the component and call the focus method on the ref:

const inputRef = useRef();

// Somewhere in your code
inputRef.current.focus();

// In your JSX
<InputBlurUnsigned ref={inputRef} ... />

Supported Languages 🌐

Regenerate response

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Donate

A cup of coffee helps me have more motivation to develop more useful plugins, Thank you