rn-floating-input 0.1.0

package/src/FloatingInput.tsx

@@ -0,0 +1,229 @@
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Pressable, TextInput as RNTextInput, View } from "react-native";
+import Animated, {
+  interpolate,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+
+import { baseStyles, DEFAULT_ANIMATION, DEFAULT_THEME } from "./defaults";
+import type { FloatingInputProps, FloatingInputRef } from "./types";
+
+export const FloatingInput = React.forwardRef<
+  FloatingInputRef,
+  FloatingInputProps
+>(
+  (
+    {
+      value,
+      onChangeText,
+      onBlur,
+      onFocus,
+      onPress,
+      label,
+      placeholder,
+      error,
+      touched,
+      maxLength,
+      keyboardType = "default",
+      autoFocus = false,
+      editable = true,
+      autoCapitalize,
+      secureTextEntry = false,
+      right,
+      renderInput,
+      theme: themeProp,
+      styles: stylesProp,
+      style,
+      animationConfig: animationProp,
+      textInputProps,
+    },
+    ref
+  ) => {
+    const inputRef = useRef<RNTextInput>(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const hasError = !!touched && !!error;
+
+    const theme = { ...DEFAULT_THEME, ...themeProp };
+    const anim = { ...DEFAULT_ANIMATION, ...animationProp };
+
+    const shouldBeActive = isFocused || !!value;
+    const focusAnim = useSharedValue(value ? 1 : 0);
+    const shakeAnim = useSharedValue(0);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      clear: () => inputRef.current?.clear(),
+      isFocused: () => inputRef.current?.isFocused() ?? false,
+    }));
+
+    useEffect(() => {
+      focusAnim.value = withTiming(shouldBeActive ? 1 : 0, {
+        duration: anim.labelDuration,
+      });
+    }, [shouldBeActive]);
+
+    useEffect(() => {
+      if (!hasError) return;
+      const mag = anim.shakeMagnitude;
+      const dur = anim.shakeDuration;
+      shakeAnim.value = withSequence(
+        withTiming(-mag, { duration: dur }),
+        withTiming(mag, { duration: dur }),
+        withTiming(-mag, { duration: dur }),
+        withTiming(0, { duration: dur })
+      );
+    }, [hasError]);
+
+    const labelAnimatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        { translateX: shakeAnim.value },
+        {
+          translateY: interpolate(
+            focusAnim.value,
+            [0, 1],
+            [0, -anim.labelTranslateY]
+          ),
+        },
+      ],
+      fontSize: interpolate(
+        focusAnim.value,
+        [0, 1],
+        [theme.fontSize, theme.labelActiveFontSize]
+      ),
+    }));
+
+    function handleFocus() {
+      setIsFocused(true);
+      onFocus?.();
+    }
+
+    function handleBlur() {
+      setIsFocused(false);
+      onBlur?.();
+    }
+
+    function renderTextInput() {
+      const inputProps = {
+        ref: inputRef,
+        editable,
+        autoFocus,
+        maxLength,
+        value,
+        placeholder: shouldBeActive ? placeholder : undefined,
+        placeholderTextColor: theme.placeholderColor,
+        onChangeText,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        keyboardType,
+        autoCapitalize,
+        secureTextEntry,
+        selectionColor: theme.selectionColor,
+        cursorColor: theme.selectionColor,
+        selectionHandleColor: theme.selectionColor,
+        underlineColorAndroid: "transparent" as const,
+        style: [
+          baseStyles.input,
+          {
+            color: theme.inputColor,
+            fontFamily: theme.fontFamily,
+            fontSize: theme.fontSize,
+          },
+          right ? baseStyles.inputWithRight : undefined,
+          stylesProp?.input,
+        ],
+        ...textInputProps,
+      };
+
+      const inputElement = renderInput ? (
+        renderInput(inputProps)
+      ) : (
+        <RNTextInput {...inputProps} />
+      );
+
+      return (
+        <View
+          style={[
+            baseStyles.inputContainer,
+            {
+              backgroundColor: theme.backgroundColor,
+              borderRadius: theme.borderRadius,
+              minHeight: theme.minHeight,
+            },
+            style,
+            stylesProp?.inputContainer,
+          ]}
+        >
+          <View
+            style={[
+              baseStyles.labelAndInputArea,
+              stylesProp?.labelAndInputArea,
+            ]}
+          >
+            <Animated.Text
+              style={[
+                baseStyles.label,
+                {
+                  color: hasError ? theme.errorColor : theme.labelColor,
+                  fontFamily: theme.fontFamily,
+                },
+                labelAnimatedStyle,
+                stylesProp?.label,
+              ]}
+            >
+              {label}
+            </Animated.Text>
+            {inputElement}
+          </View>
+          {right && (
+            <View style={[baseStyles.rightContainer, stylesProp?.right]}>
+              {right}
+            </View>
+          )}
+        </View>
+      );
+    }
+
+    function renderContent() {
+      if (onPress) {
+        return (
+          <Pressable onPress={onPress}>
+            <View pointerEvents="none">{renderTextInput()}</View>
+          </Pressable>
+        );
+      }
+
+      return renderTextInput();
+    }
+
+    return (
+      <Animated.View
+        layout={LinearTransition.springify()}
+        style={[baseStyles.container, stylesProp?.container]}
+      >
+        {renderContent()}
+        {hasError && (
+          <Animated.Text
+            style={[
+              baseStyles.errorText,
+              {
+                fontSize: theme.labelActiveFontSize,
+                color: theme.errorColor,
+                fontFamily: theme.fontFamily,
+              },
+              stylesProp?.error,
+            ]}
+          >
+            {error}
+          </Animated.Text>
+        )}
+      </Animated.View>
+    );
+  }
+);
+
+FloatingInput.displayName = "FloatingInput";

package/src/defaults.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native'
+
+import type { FloatingInputAnimationConfig, FloatingInputTheme } from './types'
+
+export const DEFAULT_THEME: Required<FloatingInputTheme> = {
+  backgroundColor: '#EDEFF2',
+  labelColor: '#878A99',
+  inputColor: '#36373D',
+  errorColor: '#E3152E',
+  selectionColor: '#31BE30',
+  placeholderColor: '#878A99',
+  borderRadius: 14,
+  minHeight: 56,
+  fontSize: 16,
+  labelActiveFontSize: 12,
+  fontFamily: 'System',
+}
+
+export const DEFAULT_ANIMATION: Required<FloatingInputAnimationConfig> = {
+  labelDuration: 200,
+  shakeMagnitude: 2,
+  shakeDuration: 50,
+  labelTranslateY: 10,
+}
+
+export const baseStyles = StyleSheet.create({
+  container: {},
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  labelAndInputArea: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  label: {
+    position: 'absolute',
+    left: 16,
+  },
+  input: {
+    paddingTop: 24,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  inputWithRight: {
+    paddingRight: 48,
+  },
+  rightContainer: {
+    position: 'absolute',
+    right: 12,
+    alignSelf: 'center',
+  },
+  errorText: {
+    marginLeft: 8,
+    marginTop: 6,
+  },
+})

package/src/index.tsx

@@ -0,0 +1,9 @@
+export { FloatingInput } from './FloatingInput'
+export { DEFAULT_ANIMATION, DEFAULT_THEME } from './defaults'
+export type {
+  FloatingInputAnimationConfig,
+  FloatingInputProps,
+  FloatingInputRef,
+  FloatingInputStyles,
+  FloatingInputTheme,
+} from './types'

package/src/types.ts

@@ -0,0 +1,79 @@
+import type {
+  KeyboardTypeOptions,
+  StyleProp,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+
+export interface FloatingInputTheme {
+  backgroundColor?: string
+  labelColor?: string
+  inputColor?: string
+  errorColor?: string
+  selectionColor?: string
+  placeholderColor?: string
+  borderRadius?: number
+  minHeight?: number
+  fontSize?: number
+  labelActiveFontSize?: number
+  fontFamily?: string
+}
+
+export interface FloatingInputStyles {
+  container?: StyleProp<ViewStyle>
+  inputContainer?: StyleProp<ViewStyle>
+  labelAndInputArea?: StyleProp<ViewStyle>
+  label?: StyleProp<TextStyle>
+  input?: StyleProp<TextStyle>
+  error?: StyleProp<TextStyle>
+  right?: StyleProp<ViewStyle>
+}
+
+export interface FloatingInputAnimationConfig {
+  labelDuration?: number
+  shakeMagnitude?: number
+  shakeDuration?: number
+  labelTranslateY?: number
+}
+
+export interface FloatingInputRef {
+  focus: () => void
+  blur: () => void
+  clear: () => void
+  isFocused: () => boolean
+}
+
+export interface FloatingInputProps {
+  // Value & behavior
+  value?: string
+  onChangeText?: (text: string) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  onPress?: () => void
+  label?: string
+  placeholder?: string
+  error?: string
+  touched?: boolean
+
+  // TextInput pass-through
+  maxLength?: number
+  keyboardType?: KeyboardTypeOptions
+  autoFocus?: boolean
+  editable?: boolean
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'
+  secureTextEntry?: boolean
+
+  // Layout
+  right?: React.ReactNode
+  renderInput?: (props: TextInputProps) => React.ReactNode
+
+  // Customization
+  theme?: FloatingInputTheme
+  styles?: FloatingInputStyles
+  style?: StyleProp<ViewStyle>
+  animationConfig?: FloatingInputAnimationConfig
+
+  // Escape hatch
+  textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'onBlur' | 'onFocus'>
+}