rn-floating-input

A performant floating label TextInput for React Native with animated label transitions, error shake animation, and full customization support.

Built with react-native-reanimated for smooth 60fps animations. No other dependency — uses plain StyleSheet.

Example

Installation

npm install rn-floating-input
# or
yarn add rn-floating-input

Peer Dependencies

npm install react-native-reanimated react-native-worklets

Make sure react-native-reanimated is properly configured in your project (babel plugin, etc).

Basic Usage

import { FloatingInput } from 'rn-floating-input'

function MyForm() {
  const [value, setValue] = useState('')

  return (
    <FloatingInput
      label="Email"
      value={value}
      onChangeText={setValue}
    />
  )
}

With Validation

<FloatingInput
  label="Email"
  value={values.email}
  onChangeText={handleChange('email')}
  onBlur={handleBlur('email')}
  error={errors.email}
  touched={touched.email}
  keyboardType="email-address"
  autoCapitalize="none"
/>

When touched and error are both truthy, the error message renders below the input and a shake animation plays.

With Right Element

<FloatingInput
  label="Password"
  value={password}
  onChangeText={setPassword}
  secureTextEntry={!showPassword}
  right={
    <Pressable onPress={() => setShowPassword(!showPassword)}>
      <Icon name={showPassword ? 'eye-off' : 'eye'} />
    </Pressable>
  }
/>

Pressable Mode

When onPress is provided, the input becomes a pressable area (useful for date pickers, dropdowns, etc):

<FloatingInput
  label="Date of Birth"
  value={selectedDate}
  onPress={() => openDatePicker()}
/>

Ref Methods

const inputRef = useRef<FloatingInputRef>(null)

<FloatingInput ref={inputRef} label="Name" value={name} onChangeText={setName} />

// Later:
inputRef.current?.focus()
inputRef.current?.blur()
inputRef.current?.clear()
inputRef.current?.isFocused()

Customization

Theme Prop

Override default colors and sizes:

<FloatingInput
  label="Name"
  value={name}
  onChangeText={setName}
  theme={{
    backgroundColor: '#F0F0F0',
    selectionColor: '#007AFF',
    borderRadius: 8,
    fontSize: 14,
    fontFamily: 'Inter-Regular',
  }}
/>

| Token | Default | Description | | --------------------- | --------- | ---------------------------------- | | backgroundColor | #EDEFF2 | Input container background | | labelColor | #878A99 | Inactive label color | | inputColor | #36373D | Text input color | | errorColor | #E3152E | Error label & message color | | selectionColor | #31BE30 | Cursor and selection color | | placeholderColor | #878A99 | Placeholder text color | | borderRadius | 14 | Container border radius | | fontSize | 16 | Input and inactive label font size | | labelActiveFontSize | 12 | Active (raised) label font size | | fontFamily | System | Font family for all text |

Styles Prop

Granular style overrides per element:

<FloatingInput
  label="Name"
  value={name}
  onChangeText={setName}
  styles={{
    inputContainer: { borderWidth: 1, borderColor: '#DDD' },
    label: { fontWeight: '600' },
    input: { letterSpacing: 0.5 },
    error: { marginLeft: 16 },
    right: { right: 16 },
  }}
/>

Animation Config

<FloatingInput
  label="Name"
  value={name}
  onChangeText={setName}
  animationConfig={{
    labelDuration: 200,     // Label transition duration (ms)
    shakeMagnitude: 2,      // Error shake distance (px)
    shakeDuration: 50,      // Each shake step duration (ms)
  }}
/>

Custom Input Renderer

Replace the default TextInput entirely:

<FloatingInput
  label="Custom"
  value={value}
  onChangeText={setValue}
  renderInput={(props) => <MyCustomInput {...props} />}
/>

TextInput Pass-through

Pass any additional TextInput props via textInputProps:

<FloatingInput
  label="Bio"
  value={bio}
  onChangeText={setBio}
  textInputProps={{
    numberOfLines: 4,
    textAlignVertical: 'top',
  }}
/>

Props

| Prop | Type | Default | Description | | ----------------- | ------------------------------ | ----------- | ---------------------------------------- | | value | string | — | Input value | | onChangeText | (text: string) => void | — | Change handler | | onBlur | () => void | — | Blur handler | | onFocus | () => void | — | Focus handler | | onPress | () => void | — | Makes input pressable (disables editing) | | label | string | — | Floating label text | | placeholder | string | — | Shown when label is active | | error | string | — | Error message | | touched | boolean | — | Whether field has been touched | | maxLength | number | — | Max input length | | keyboardType | KeyboardTypeOptions | 'default' | Keyboard type | | autoFocus | boolean | false | Auto focus on mount | | editable | boolean | true | Whether input is editable | | autoCapitalize | string | — | Auto-capitalization behavior | | secureTextEntry | boolean | false | Password mode | | right | ReactNode | — | Right slot element | | renderInput | (props) => ReactNode | — | Custom input renderer | | theme | FloatingInputTheme | — | Theme overrides | | styles | FloatingInputStyles | — | Per-element style overrides | | style | StyleProp<ViewStyle> | — | Input container style shorthand | | animationConfig | FloatingInputAnimationConfig | — | Animation overrides | | textInputProps | TextInputProps | — | Pass-through to underlying TextInput |

Exports

// Component
import { FloatingInput } from 'rn-floating-input'

// Types
import type {
  FloatingInputProps,
  FloatingInputRef,
  FloatingInputTheme,
  FloatingInputStyles,
  FloatingInputAnimationConfig,
} from 'rn-floating-input'

License

MIT