Native Animation

Sign in Get all-access

Base Input animation preview

Base Input animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-input

Base Input

React Native Text Input Component

A text field with a fading focus ring, animated password reveal and clear controls, auto-growing multiline text, and configurable labels, icons, validation…

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

Related guides

React Native Text Input: Floating Labels and Form States

A text field with a fading focus ring, animated password reveal and clear controls, auto-growing multiline text, and configurable labels, icons, validation, and theme.

How it works

The field is 36 pt tall, 1 px border, shadow-xs, transparent fill in light mode and input/30 in dark.
Focus animates the border to the ring color and fades in a 3 px ring just outside it (200 ms, color curve).
error swaps the helper text for a destructive message and turns border and ring red.
leading and trailing slots sit inside the field. Built-in reveal and clear controls use 44 pt targets; fields with these controls are 44 pt tall.
Password glyphs exit to scale 0.5 in 150 ms and enter with a 400/29/1 spring. The clear glyph uses the same spring to enter and a 150 ms exit.
Multiline fields start at 64 pt, grow to maxHeight (160 pt by default), then scroll. Their padding is 8 pt vertically and 12 pt horizontally.

Install

npx nativeanimation add base-input

The CLI also copies base-theme and base-button (used by the demo). Dependencies, if you copy by hand:

npx expo install lucide-react-native react-native-svg react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { BaseInput } from './base-input';

<BaseInput label="Email" placeholder="you@example.com" value={email} onChangeText={setEmail} />

Password, search, and comments:

import { Search } from 'lucide-react-native';

<BaseInput
  label="Password"
  secureTextEntry
  revealable
  value={password}
  onChangeText={setPassword}
  inputProps={{ autoComplete: 'password', autoCapitalize: 'none' }}
  error={tooShort ? 'Use at least 8 characters.' : undefined}
/>
<BaseInput
  accessibilityLabel="Search projects"
  placeholder="Search projects…"
  leading={<Search size={16} color={theme.colors.mutedForeground} />}
  clearable
  value={query}
  onChangeText={setQuery}
  onClear={resetFilters}
/>
<BaseInput
  label="Comments"
  multiline
  maxHeight={160}
  value={comment}
  onChangeText={setComment}
  helperText="Share a little detail with your team."
/>

Existing inputProps.secureTextEntry and inputProps.multiline remain supported. Direct props win when supplied. Password reveal is single-line only; if both reveal and clear are requested, reveal takes priority. Uncontrolled fields support defaultValue and the built-in clear action.

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. Every piece also takes a theme prop that wins over the provider.

Props

Prop	Type	Default	Description
`label`	`string`	—	Label above the field.
`value` / `defaultValue`	`string`	—	Controlled or initial text.
`onChangeText`	`(text: string) => void`	—	Called as the user types.
`placeholder`	`string`	—	Hint shown when empty.
`helperText`	`string`	—	Help below the field.
`error`	`string`	—	Error message; replaces the help and turns the field red.
`leading` / `trailing`	`ReactNode`	—	Elements inside the field.
`disabled`	`boolean`	`false`	Dims the field and blocks editing.
`inputProps`	`TextInputProps`	—	Any other TextInput prop (keyboard type, autocomplete, secure entry…).
`accessibilityLabel`	`string`	`label`	Screen reader name.
`theme`	`BaseTheme`	provider	Overrides the theme from `BaseThemeProvider`.
`testID`	`string`	—	Identifier on TextInput; built-in actions append -reveal or -clear.
`multiline`	`boolean`	`false`	Auto-growing textarea with top-aligned text.
`maxHeight`	`number`	`160`	Textarea height limit; values below 64 are clamped to 64.
`secureTextEntry`	`boolean`	`false`	Masks single-line text; also supported through inputProps.
`revealable`	`boolean`	`false`	Adds a password visibility toggle to secure fields.
`clearable`	`boolean`	`false`	Shows an animated clear control when text is nonempty.
`onClear`	`() => void`	`—`	Called after onChangeText with an empty string.
`showPasswordLabel / hidePasswordLabel`	`string`	`Show password / Hide password`	Accessible reveal button labels.
`clearLabel`	`string`	`Clear search`	Accessible clear button label.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Runs on iOS, Android and web, in Expo Go and in development builds. Part of Native Animation Base, a free family that shares one theme: install base-theme once (the CLI does it for you) and every Base piece picks it up.

Accessibility

The field is named by its label or accessibilityLabel. Built-in controls expose Show password/Hide password and Clear search labels, support screen reader activation and Enter/Space, and reserve a 48 dp target on Android. Empty clear controls are hidden from accessibility. With Reduce Motion on, focus and glyph changes are immediate without scale or displacement. Free forever. MIT.

Touch targets

Native fields and built-in actions reserve targets at least 48 dp tall on Android and 44 pt tall on iOS. Built-in actions are also 48 dp wide on Android and 44 pt wide on iOS. On web, plain fields are 36 px tall; fields with built-in actions and those actions are 44 px tall. Keep native fields at least 48 dp wide on Android or 44 pt wide on iOS. Stacked field centers must leave at least 48 dp on Android or 44 pt on iOS, plus room for labels and messages. Do not overlap targets with negative margins.

Part of a shared foundation

Use it in a screen

Compose Base Input with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Vertical Range Window ↗

A vertical range control with independent handles and a draggable interval band, with configurable bounds, palette, and fonts.

Another way to solve this task · $9

Document Corner Capture ↗

A document review tool with draggable corners and an image loupe, with configurable image, labels, palette, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
lucide-react-native	^1.61.0
react-native-gesture-handler	~3.3.0
react-native-reanimated	4.7.1
react-native-svg	15.16.0
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	2	10/28/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~3.3.0, react-native-reanimated 4.7.1, react-native-svg 15.16.0, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~2.32.0, react-native-reanimated 4.5.1, react-native-svg 15.15.4, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseInput.tsx

import {
  useBaseReducedMotion,
  alpha,
  timing,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
import Eye from 'lucide-react-native/icons/eye';
import EyeOff from 'lucide-react-native/icons/eye-off';
import X from 'lucide-react-native/icons/x';
import { InputAction, InputGlyph } from './InputAction';
import {
  Platform,
  Pressable,
  Text,
  TextInput,
  View,
  type TextInputProps,
} from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

export type BaseInputProps = {
  label?: string;
  helperText?: string;
  /** Replaces the helper text and turns the field destructive. */
  error?: string;
  value?: string;
  defaultValue?: string;
  onChangeText?: (text: string) => void;
  placeholder?: string;
  disabled?: boolean;
  multiline?: boolean;
  /** Maximum textarea height, including padding. Minimum height is 64 pt. */
  maxHeight?: number;
  secureTextEntry?: boolean;
  revealable?: boolean;
  clearable?: boolean;
  onClear?: () => void;
  showPasswordLabel?: string;
  hidePasswordLabel?: string;
  clearLabel?: string;
  /** Extra TextInput props (keyboardType, autoComplete, secureTextEntry…). */
  /** Icon or element inside the field, before the text (16px icons match the family). */
  leading?: React.ReactNode;
  /** Icon, button or element inside the field, after the text. */
  trailing?: React.ReactNode;
  inputProps?: Omit<
    TextInputProps,
    'value' | 'defaultValue' | 'onChangeText' | 'placeholder' | 'editable'
  >;
  theme?: BaseTheme;
  testID?: string;
  accessibilityLabel?: string;
};

export function BaseInput({
  label,
  helperText,
  error,
  value,
  defaultValue,
  onChangeText,
  placeholder,
  disabled = false,
  multiline: multilineProp,
  maxHeight = 160,
  secureTextEntry: secureProp,
  revealable = false,
  clearable = false,
  onClear,
  showPasswordLabel = 'Show password',
  hidePasswordLabel = 'Hide password',
  clearLabel = 'Clear search',
  leading,
  trailing,
  inputProps,
  theme: override,
  testID,
  accessibilityLabel,
}: BaseInputProps) {
  const theme = useBaseTheme(override);
  const { colors } = theme;
  const reduced = useBaseReducedMotion();
  const focus = useSharedValue(0);
  const inputRef = useRef<React.ComponentRef<typeof TextInput>>(null);
  const [internal, setInternal] = useState(defaultValue ?? '');
  const [revealed, setRevealed] = useState(false);
  const [contentHeight, setContentHeight] = useState(0);
  const [inputWidth, setInputWidth] = useState(0);
  const text = value ?? internal;
  const multiline = multilineProp ?? inputProps?.multiline ?? false;
  const secure = secureProp ?? inputProps?.secureTextEntry ?? false;
  const hasReveal = secure && revealable && !multiline;
  const hasClear = clearable && !hasReveal;
  const limit = Math.max(64, maxHeight);
  const target = Platform.OS === 'android' ? 48 : 44;
  const fieldHeight = multiline
    ? Math.min(limit, Math.max(64, contentHeight + 2))
    : hasReveal || hasClear
      ? 44
      : 36;
  const extra =
    Platform.OS === 'web' ? 0 : Math.max(0, (target - fieldHeight) / 2);
  // Web scrollHeight includes the current frame. Reset it before measuring so deletion can shrink the field.
  const measureWebContent = useCallback(() => {
    if (Platform.OS === 'web' && multiline) {
      const node = inputRef.current as unknown as HTMLTextAreaElement | null;
      if (!node) return;
      const previousHeight = node.style.height;
      node.style.height = '0px';
      const next = Math.ceil(node.scrollHeight);
      node.style.height = previousHeight;
      setContentHeight((current) => (current === next ? current : next));
    }
  }, [multiline]);
  useLayoutEffect(() => {
    measureWebContent();
  }, [text, inputWidth, limit, measureWebContent]);
  const changeText = (next: string) => {
    setInternal(next);
    onChangeText?.(next);
  };
  const clear = () => {
    if (disabled) return;
    changeText('');
    onClear?.();
    inputRef.current?.focus();
  };

  const setFocused = (focused: boolean) => {
    focus.set(withTiming(focused ? 1 : 0, timing(theme, 'color', reduced)));
  };

  const borderIdle = error ? colors.destructive : colors.input;
  const borderFocus = error ? colors.destructive : colors.ring;
  const ringColor = error
    ? theme.scheme === 'dark'
      ? alpha(colors.destructive, 0.4)
      : alpha(colors.destructive, 0.2)
    : colors.ringSoft;

  const fieldStyle = useAnimatedStyle(() => ({
    borderColor: interpolateColor(
      focus.get(),
      [0, 1],
      [borderIdle, borderFocus],
    ),
  }));
  // focus-visible:ring-[3px]: a 3px band just outside the border.
  const ringStyle = useAnimatedStyle(() => ({
    opacity: error ? 1 : focus.get(),
  }));

  // Web retains the original nonfocusable frame for modal focus discovery.
  const fieldContent = (
    <>
      {Platform.OS !== 'web' ? (
        <Animated.View
          pointerEvents="none"
          style={[
            {
              position: 'absolute',
              top: extra,
              bottom: extra,
              left: 0,
              right: 0,
              borderWidth: 1,
              borderRadius: theme.radius.md,
              backgroundColor: colors.inputSurface,
              boxShadow: theme.shadow.xs,
            },
            fieldStyle,
          ]}
        />
      ) : null}
      <Animated.View
        pointerEvents="none"
        style={[
          {
            position: 'absolute',
            top: Platform.OS === 'web' ? -4 : extra - 3,
            left: Platform.OS === 'web' ? -4 : -3,
            right: Platform.OS === 'web' ? -4 : -3,
            bottom: Platform.OS === 'web' ? -4 : extra - 3,
            borderWidth: 3,
            borderRadius: theme.radius.md + 3,
            borderColor: ringColor,
          },
          ringStyle,
        ]}
      />
      {leading ? <View style={{ paddingLeft: 12 }}>{leading}</View> : null}
      <TextInput
        ref={inputRef}
        testID={testID}
        accessibilityLabel={accessibilityLabel ?? label}
        value={text}
        onChangeText={changeText}
        placeholder={placeholder}
        placeholderTextColor={colors.mutedForeground}
        selectionColor={colors.primary}
        {...inputProps}
        accessibilityState={{ ...inputProps?.accessibilityState, disabled }}
        aria-disabled={disabled}
        aria-invalid={Boolean(error)}
        editable={!disabled}
        multiline={multiline}
        secureTextEntry={secure && !revealed && !multiline}
        scrollEnabled={
          multiline ? contentHeight + 2 >= limit : inputProps?.scrollEnabled
        }
        onLayout={(event) => {
          const width = event.nativeEvent.layout.width;
          setInputWidth((current) => (current === width ? current : width));
          inputProps?.onLayout?.(event);
        }}
        onContentSizeChange={(event) => {
          const height = event.nativeEvent.contentSize.height;
          if (Platform.OS !== 'web') setContentHeight(Math.ceil(height));
          inputProps?.onContentSizeChange?.(event);
        }}
        onFocus={(e) => {
          setFocused(true);
          inputProps?.onFocus?.(e);
        }}
        onBlur={(e) => {
          setFocused(false);
          inputProps?.onBlur?.(e);
        }}
        style={[
          {
            flex: 1,
            minWidth: 0,
            height:
              Platform.OS !== 'web' && multiline ? fieldHeight - 2 : '100%',
            paddingLeft: multiline ? 12 : leading ? 8 : 12,
            paddingRight: multiline
              ? 12
              : trailing || hasReveal || hasClear
                ? 8
                : 12,
            paddingVertical: multiline ? 8 : 0,
            textAlignVertical: multiline ? 'top' : 'center',
            fontFamily: theme.fonts.regular,
            fontSize: 16,
            color: colors.foreground,
            outlineWidth: 0,
            // Web only: hide the browser focus outline; the 3px ring replaces it.
            ...(Platform.OS === 'web'
              ? ({ outlineStyle: 'none' } as object)
              : null),
          },
          inputProps?.style,
        ]}
      />
      {hasReveal ? (
        <InputAction
          theme={theme}
          disabled={disabled}
          testID={testID ? `${testID}-reveal` : undefined}
          label={revealed ? hidePasswordLabel : showPasswordLabel}
          onPress={() => setRevealed((current) => !current)}
        >
          <InputGlyph visible={!revealed} theme={theme}>
            <Eye size={16} color={colors.mutedForeground} />
          </InputGlyph>
          <InputGlyph visible={revealed} theme={theme}>
            <EyeOff size={16} color={colors.mutedForeground} />
          </InputGlyph>
        </InputAction>
      ) : null}
      {hasClear ? (
        <View
          pointerEvents={text ? 'auto' : 'none'}
          accessibilityElementsHidden={!text}
          importantForAccessibility={text ? 'auto' : 'no-hide-descendants'}
          aria-hidden={!text}
        >
          <InputAction
            theme={theme}
            disabled={disabled || !text}
            label={clearLabel}
            onPress={clear}
            testID={testID ? `${testID}-clear` : undefined}
          >
            <InputGlyph visible={!!text} theme={theme} exit="popOut">
              <X size={16} color={colors.mutedForeground} />
            </InputGlyph>
          </InputAction>
        </View>
      ) : null}
      {trailing ? <View style={{ paddingRight: 8 }}>{trailing}</View> : null}
    </>
  );

  return (
    <View
      style={{
        gap: 8,
        opacity: disabled ? 0.5 : 1,
        // Keep the ancestor large enough to receive the field's transparent edges.
        paddingVertical: extra,
        marginVertical: -extra,
      }}
    >
      {label ? (
        <Text
          style={{
            fontFamily: theme.fonts.medium,
            fontSize: 14,
            lineHeight: 14,
            color: colors.foreground,
          }}
        >
          {label}
        </Text>
      ) : null}
      {Platform.OS === 'web' ? (
        <Animated.View
          style={[
            {
              height: fieldHeight,
              borderWidth: 1,
              borderRadius: theme.radius.md,
              backgroundColor: colors.inputSurface,
              boxShadow: theme.shadow.xs,
              flexDirection: 'row',
              alignItems: 'center',
            },
            fieldStyle,
          ]}
        >
          {fieldContent}
        </Animated.View>
      ) : (
        <Pressable
          accessible={false}
          focusable={false}
          disabled={disabled}
          onPress={() => inputRef.current?.focus()}
          style={{
            height: fieldHeight + extra * 2,
            marginVertical: -extra,
            paddingHorizontal: 1,
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {fieldContent}
        </Pressable>
      )}
      {error || helperText ? (
        <Text
          style={{
            fontFamily: theme.fonts.regular,
            fontSize: 14,
            lineHeight: 20,
            color: error ? colors.destructive : colors.mutedForeground,
          }}
        >
          {error ?? helperText}
        </Text>
      ) : null}
    </View>
  );
}

InputAction.tsx

import {
  baseActivationProps,
  useBaseReducedMotion,
  spring,
  timing,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';
import { Platform, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';

const NO_WEB_OUTLINE =
  Platform.OS === 'web' ? ({ outlineStyle: 'none' } as object) : null;

export function InputAction({
  children,
  label,
  onPress,
  disabled,
  theme,
  testID,
}: {
  children: React.ReactNode;
  label: string;
  onPress: () => void;
  disabled: boolean;
  theme: BaseTheme;
  testID?: string;
}) {
  const reduced = useBaseReducedMotion();
  const pressed = useSharedValue(1);
  const tap = Gesture.Tap()
    .enabled(!disabled)
    .onBegin(() => {
      pressed.set(
        reduced
          ? 1
          : withSpring(theme.motion.scales.press, spring(theme, 'press')),
      );
    })
    .onFinalize(() => {
      pressed.set(reduced ? 1 : withSpring(1, spring(theme, 'press')));
    })
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(onPress);
    });
  const animated = useAnimatedStyle(() => ({
    transform: [{ scale: pressed.get() }],
  }));
  return (
    <GestureDetector gesture={tap}>
      <Animated.View
        testID={testID}
        accessible
        accessibilityRole="button"
        accessibilityLabel={label}
        accessibilityState={{ disabled }}
        aria-disabled={disabled}

        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...((Platform.OS === 'web'
            ? {
                tabIndex: disabled ? -1 : 0,
                // Gesture Handler activates on key-up; prevent browser scrolling without firing twice.
                onKeyDown: (event: React.KeyboardEvent) => {
                  if (
                    !disabled &&
                    (event.key === 'Enter' || event.key === ' ')
                  ) {
                    event.preventDefault();
                  }
                },
              }
            : {}) as object)
        }
        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...(baseActivationProps(onPress, disabled) as object)
        }
        style={[
          {
            width: Platform.OS === 'android' ? 48 : 44,
            height: Platform.OS === 'android' ? 48 : 44,
            marginLeft: Platform.OS === 'android' ? -4 : 0,
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: theme.radius.md,
          },
          NO_WEB_OUTLINE,
          animated,
        ]}
      >
        {Platform.OS === 'web' ? (
          children
        ) : (
          <View
            pointerEvents="none"
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
              transform: [{ translateX: Platform.OS === 'android' ? 2 : 0 }],
            }}
          >
            {children}
          </View>
        )}
      </Animated.View>
    </GestureDetector>
  );
}

/** Keeps both glyphs mounted so a rapid reversal interrupts the current swap. */
export function InputGlyph({
  visible,
  children,
  theme,
  exit = 'swap',
}: {
  visible: boolean;
  children: React.ReactNode;
  theme: BaseTheme;
  exit?: 'swap' | 'popOut';
}) {
  const reduced = useBaseReducedMotion();
  const progress = useSharedValue(exit === 'popOut' ? 0 : visible ? 1 : 0);
  useEffect(() => {
    progress.set(
      reduced
        ? visible
          ? 1
          : 0
        : visible
          ? withSpring(1, spring(theme, 'pop'))
          : withTiming(0, timing(theme, exit)),
    );
  }, [visible, reduced, progress, theme, exit]);
  const animated = useAnimatedStyle(() => ({
    opacity: Math.max(0, Math.min(1, progress.get())),
    transform: [
      {
        scale: reduced
          ? 1
          : theme.motion.scales.icon +
            (1 - theme.motion.scales.icon) * progress.get(),
      },
    ],
  }));
  return (
    <Animated.View
      pointerEvents="none"
      aria-hidden
      style={[{ position: 'absolute', width: 16, height: 16 }, animated]}
    >
      <View>{children}</View>
    </Animated.View>
  );
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-input",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme",
    "base-button"
  ],
  "dependencies": {
    "lucide-react-native": "^1.61.0",
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-svg": "15.16.0",
    "react-native-worklets": "0.13.0"
  }
}