@ronas-it/react-native-controlled-input

A controlled React Native input that lets you format and constrain the value exactly how you want in JS, while keeping the displayed text in sync without invalid characters flashing in the field.

ControlledInputView (left) vs React Native TextInput (right), same JS formatting: with TextInput, rejected characters and intermediate states often flash until the filtered value is applied.

Promo / invite code (ABCD-1234)

ControlledInputView	TextInput

Card expiry (MM/YY)

ControlledInputView	TextInput

Problem

With a regular controlled TextInput, native input is applied first, then JS receives the change, filters it, and sends the next value back.

That means invalid characters can still flash in the field for a moment.

@ronas-it/react-native-controlled-input is built for this exact case: you decide what text is valid, and the displayed value stays driven by value.

Install

npm install @ronas-it/react-native-controlled-input

Requires React Native New Architecture / Fabric.

Compatible with react-native-keyboard-controller.

Example

import { useRef, useState } from 'react';
import { StyleSheet } from 'react-native';
import {
  ControlledInputView,
  type ControlledInputViewRef,
} from '@ronas-it/react-native-controlled-input';

export function Example() {
  const [value, setValue] = useState('');
  const inputRef = useRef<ControlledInputViewRef>(null);

  return (
    <ControlledInputView
      ref={inputRef}
      value={value}
      onChangeText={(text) => setValue(text.replace(/\d/g, ''))}
      style={styles.input}
      onFocus={() => {}}
      onBlur={() => {}}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16,
    color: '#111',
  },
});

inputRef.current?.focus();
inputRef.current?.blur();

Props

Prop	Type	Description
value	string	Current input value.
onChangeText	(value: string) => void	Called with the next text value. Filter it and update value.
onFocus	() => void	Called when the text input is focused.
onBlur	() => void	Called when the text input is blurred.
onSubmitEditing	() => void	Called when the text input is blurred.
autoComplete	string	Specifies autocomplete hints for the system. Same as React Native TextInput.
autoCapitalize	string	Can be none, sentences, words, characters. Same as React Native TextInput.
autoCorrect	boolean (default true)	Toggles auto-correct. Same as React Native TextInput.
keyboardType	string	Determines which keyboard to open, e.g. numeric. Same as React Native TextInput.
returnKeyType	string	Determines how the return key should look. Same as React Native TextInput.
placeholder	string	The string that will be rendered before text input has been entered.
placeholderTextColor	ColorValue	The text color of the placeholder string.
selectionColor	ColorValue	The highlight and cursor color of the text input.

Style support

The same style API is supported on both iOS and Android.

Commonly used supported styles:

• color, fontSize, fontFamily
• padding, paddingVertical, paddingHorizontal
• paddingTop, paddingBottom, paddingLeft, paddingRight, paddingStart, paddingEnd
• borderWidth, borderRadius, borderColor, backgroundColor
• layout styles like width, height, margin, flex

Implementation differs internally between platforms, but usage is the same for library consumers.

Fonts

In Expo projects, fontFamily on this input only applies when the font is linked for native use. Relying on runtime loading alone (useFonts / loadAsync) is often not enough here; use the expo-font config plugin so fonts are embedded at build time. See Expo Font — Configuration in app config.

Ref

• focus()
• blur()

License

MIT

---

Made with create-react-native-library