rn-floating-input 0.1.0 → 0.1.2

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,kBAAkB;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,4BAA4B;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAkB;IAEjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IAGzD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,4BAA4B,CAAC;IAG/C,cAAc,CAAC,EAAE,IAAI,CACnB,cAAc,EACd,OAAO,GAAG,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAC9D,CAAC;CACH"}

package/lib/typescript/useFloatingLabel.d.ts

@@ -0,0 +1,43 @@
+import type { LayoutChangeEvent } from "react-native";
+import type { FloatingInputAnimationConfig, FloatingInputTheme } from "./types";
+interface UseFloatingLabelOptions {
+    value?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    touched?: boolean;
+    error?: string;
+    theme?: FloatingInputTheme;
+    animationConfig?: FloatingInputAnimationConfig;
+}
+export declare function useFloatingLabel({ value, onFocus, onBlur, touched, error, theme: themeProp, animationConfig: animationProp, }: UseFloatingLabelOptions): {
+    isFocused: boolean;
+    hasError: boolean;
+    shouldBeActive: boolean;
+    theme: {
+        backgroundColor: string;
+        labelColor: string;
+        inputColor: string;
+        errorColor: string;
+        selectionColor: string;
+        placeholderColor: string;
+        borderRadius: number;
+        fontSize: number;
+        labelActiveFontSize: number;
+        fontFamily: string;
+    };
+    labelAnimatedStyle: {
+        transform: ({
+            translateX: number;
+            translateY?: undefined;
+        } | {
+            translateY: number;
+            translateX?: undefined;
+        })[];
+        fontSize: number;
+    };
+    handleFocus: () => void;
+    handleBlur: () => void;
+    onContainerLayout: (e: LayoutChangeEvent) => void;
+};
+export {};
+//# sourceMappingURL=useFloatingLabel.d.ts.map

package/lib/typescript/useFloatingLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingLabel.d.ts","sourceRoot":"","sources":["../../src/useFloatingLabel.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOtD,OAAO,KAAK,EAAE,4BAA4B,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEhF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,eAAe,CAAC,EAAE,4BAA4B,CAAC;CAChD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,eAAe,EAAE,aAAa,GAC/B,EAAE,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6DM,iBAAiB;EAchD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-floating-input",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A performant floating label TextInput for React Native with animated label, error shake, and full customization",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -29,7 +29,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ilhambabayev/react-native-floating-input.git"
+    "url": "git+https://github.com/Babayev03/rn-floating-input.git"
   },
   "author": "Ilham Babayev",
   "license": "MIT",

package/src/ErrorText.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Animated from "react-native-reanimated";
+import type { StyleProp, TextStyle } from "react-native";
+
+import { baseStyles } from "./defaults";
+
+interface ErrorTextProps {
+  error?: string;
+  theme: {
+    labelActiveFontSize: number;
+    errorColor: string;
+    fontFamily: string;
+  };
+  style?: StyleProp<TextStyle>;
+}
+
+export const ErrorText = React.memo(function ErrorText({
+  error,
+  theme,
+  style,
+}: ErrorTextProps) {
+  return (
+    <Animated.Text
+      style={[
+        baseStyles.errorText,
+        {
+          fontSize: theme.labelActiveFontSize,
+          color: theme.errorColor,
+          fontFamily: theme.fontFamily,
+        },
+        style,
+      ]}
+    >
+      {error}
+    </Animated.Text>
+  );
+});

package/src/FloatingInput.tsx

@@ -1,15 +1,11 @@
-import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { useImperativeHandle, useRef } from "react";
 import { Pressable, TextInput as RNTextInput, View } from "react-native";
-import Animated, {
-  interpolate,
-  LinearTransition,
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withTiming,
-} from "react-native-reanimated";
+import Animated, { LinearTransition } from "react-native-reanimated";
 
-import { baseStyles, DEFAULT_ANIMATION, DEFAULT_THEME } from "./defaults";
+import { baseStyles } from "./defaults";
+import { ErrorText } from "./ErrorText";
+import { FloatingLabel } from "./FloatingLabel";
+import { useFloatingLabel } from "./useFloatingLabel";
 import type { FloatingInputProps, FloatingInputRef } from "./types";
 
 export const FloatingInput = React.forwardRef<
@@ -38,21 +34,30 @@ export const FloatingInput = React.forwardRef<
       theme: themeProp,
       styles: stylesProp,
       style,
-      animationConfig: animationProp,
+      animationConfig,
       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);
+    const {
+      hasError,
+      shouldBeActive,
+      theme,
+      labelAnimatedStyle,
+      handleFocus,
+      handleBlur,
+      onContainerLayout,
+    } = useFloatingLabel({
+      value,
+      onFocus,
+      onBlur,
+      touched,
+      error,
+      theme: themeProp,
+      animationConfig,
+    });
 
     useImperativeHandle(ref, () => ({
       focus: () => inputRef.current?.focus(),
@@ -61,165 +66,90 @@ export const FloatingInput = React.forwardRef<
       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 },
+    const inputProps = {
+      ref: inputRef,
+      editable,
+      autoFocus,
+      maxLength,
+      value,
+      placeholder: shouldBeActive ? placeholder : undefined,
+      placeholderTextColor: theme.placeholderColor,
+      onChangeText,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      keyboardType,
+      autoCapitalize,
+      secureTextEntry,
+      selectionColor: hasError ? theme.errorColor : theme.selectionColor,
+      cursorColor: hasError ? theme.errorColor : theme.selectionColor,
+      selectionHandleColor: hasError ? theme.errorColor : theme.selectionColor,
+      underlineColorAndroid: "transparent" as const,
+      style: [
+        baseStyles.input,
         {
-          translateY: interpolate(
-            focusAnim.value,
-            [0, 1],
-            [0, -anim.labelTranslateY]
-          ),
+          color: theme.inputColor,
+          fontFamily: theme.fontFamily,
+          fontSize: theme.fontSize,
         },
+        right ? baseStyles.inputWithRight : undefined,
+        stylesProp?.input,
       ],
-      fontSize: interpolate(
-        focusAnim.value,
-        [0, 1],
-        [theme.fontSize, theme.labelActiveFontSize]
-      ),
-    }));
-
-    function handleFocus() {
-      setIsFocused(true);
-      onFocus?.();
-    }
+      ...textInputProps,
+    };
 
-    function handleBlur() {
-      setIsFocused(false);
-      onBlur?.();
-    }
+    const inputElement = renderInput ? (
+      renderInput(inputProps)
+    ) : (
+      <RNTextInput {...inputProps} />
+    );
 
-    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,
+    const inputContainer = (
+      <View
+        onLayout={onContainerLayout}
+        style={[
+          baseStyles.inputContainer,
           {
-            color: theme.inputColor,
-            fontFamily: theme.fontFamily,
-            fontSize: theme.fontSize,
+            backgroundColor: theme.backgroundColor,
+            borderRadius: theme.borderRadius,
           },
-          right ? baseStyles.inputWithRight : undefined,
-          stylesProp?.input,
-        ],
-        ...textInputProps,
-      };
-
-      const inputElement = renderInput ? (
-        renderInput(inputProps)
-      ) : (
-        <RNTextInput {...inputProps} />
-      );
-
-      return (
+          style,
+          stylesProp?.inputContainer,
+        ]}
+      >
         <View
-          style={[
-            baseStyles.inputContainer,
-            {
-              backgroundColor: theme.backgroundColor,
-              borderRadius: theme.borderRadius,
-              minHeight: theme.minHeight,
-            },
-            style,
-            stylesProp?.inputContainer,
-          ]}
+          style={[baseStyles.labelAndInputArea, stylesProp?.labelAndInputArea]}
         >
-          <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>
-          )}
+          <FloatingLabel
+            label={label}
+            hasError={hasError}
+            theme={theme}
+            labelAnimatedStyle={labelAnimatedStyle}
+            style={stylesProp?.label}
+          />
+          {inputElement}
         </View>
-      );
-    }
-
-    function renderContent() {
-      if (onPress) {
-        return (
-          <Pressable onPress={onPress}>
-            <View pointerEvents="none">{renderTextInput()}</View>
-          </Pressable>
-        );
-      }
-
-      return renderTextInput();
-    }
+        {right && (
+          <View style={[baseStyles.rightContainer, stylesProp?.right]}>
+            {right}
+          </View>
+        )}
+      </View>
+    );
 
     return (
       <Animated.View
         layout={LinearTransition.springify()}
         style={[baseStyles.container, stylesProp?.container]}
       >
-        {renderContent()}
+        {onPress ? (
+          <Pressable onPress={onPress}>
+            <View pointerEvents="none">{inputContainer}</View>
+          </Pressable>
+        ) : (
+          inputContainer
+        )}
         {hasError && (
-          <Animated.Text
-            style={[
-              baseStyles.errorText,
-              {
-                fontSize: theme.labelActiveFontSize,
-                color: theme.errorColor,
-                fontFamily: theme.fontFamily,
-              },
-              stylesProp?.error,
-            ]}
-          >
-            {error}
-          </Animated.Text>
+          <ErrorText error={error} theme={theme} style={stylesProp?.error} />
         )}
       </Animated.View>
     );

package/src/FloatingLabel.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Animated, { type AnimatedStyle } from "react-native-reanimated";
+import type { StyleProp, TextStyle } from "react-native";
+
+import { baseStyles } from "./defaults";
+
+interface FloatingLabelProps {
+  label?: string;
+  hasError: boolean;
+  theme: {
+    errorColor: string;
+    labelColor: string;
+    fontFamily: string;
+  };
+  labelAnimatedStyle: AnimatedStyle;
+  style?: StyleProp<TextStyle>;
+}
+
+export const FloatingLabel = React.memo(function FloatingLabel({
+  label,
+  hasError,
+  theme,
+  labelAnimatedStyle,
+  style,
+}: FloatingLabelProps) {
+  return (
+    <Animated.Text
+      style={[
+        baseStyles.label,
+        {
+          color: hasError ? theme.errorColor : theme.labelColor,
+          fontFamily: theme.fontFamily,
+        },
+        labelAnimatedStyle,
+        style,
+      ]}
+    >
+      {label}
+    </Animated.Text>
+  );
+});

package/src/defaults.ts

@@ -1,58 +1,63 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from "react-native";
+import type { FloatingInputAnimationConfig, FloatingInputTheme } from "./types";
 
-import type { FloatingInputAnimationConfig, FloatingInputTheme } from './types'
+export const INPUT_PADDING_TOP = 24;
+const INPUT_PADDING_BOTTOM = 8;
+const INPUT_PADDING_HORIZONTAL = 16;
+const RIGHT_CONTAINER_OFFSET = 12;
+const INPUT_WITH_RIGHT_PADDING = 48;
+const ERROR_MARGIN_LEFT = 8;
+const ERROR_MARGIN_TOP = 6;
 
 export const DEFAULT_THEME: Required<FloatingInputTheme> = {
-  backgroundColor: '#EDEFF2',
-  labelColor: '#878A99',
-  inputColor: '#36373D',
-  errorColor: '#E3152E',
-  selectionColor: '#31BE30',
-  placeholderColor: '#878A99',
+  backgroundColor: "#EDEFF2",
+  labelColor: "#878A99",
+  inputColor: "#36373D",
+  errorColor: "#E3152E",
+  selectionColor: "#31BE30",
+  placeholderColor: "#878A99",
   borderRadius: 14,
-  minHeight: 56,
   fontSize: 16,
   labelActiveFontSize: 12,
-  fontFamily: 'System',
-}
+  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',
+    flexDirection: "row",
+    alignItems: "center",
   },
   labelAndInputArea: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   label: {
-    position: 'absolute',
-    left: 16,
+    position: "absolute",
+    left: INPUT_PADDING_HORIZONTAL,
   },
   input: {
-    paddingTop: 24,
-    paddingBottom: 8,
-    paddingLeft: 16,
-    paddingRight: 16,
+    paddingTop: INPUT_PADDING_TOP,
+    paddingBottom: INPUT_PADDING_BOTTOM,
+    paddingLeft: INPUT_PADDING_HORIZONTAL,
+    paddingRight: INPUT_PADDING_HORIZONTAL,
   },
   inputWithRight: {
-    paddingRight: 48,
+    paddingRight: INPUT_WITH_RIGHT_PADDING,
   },
   rightContainer: {
-    position: 'absolute',
-    right: 12,
-    alignSelf: 'center',
+    position: "absolute",
+    right: RIGHT_CONTAINER_OFFSET,
+    alignSelf: "center",
   },
   errorText: {
-    marginLeft: 8,
-    marginTop: 6,
+    marginLeft: ERROR_MARGIN_LEFT,
+    marginTop: ERROR_MARGIN_TOP,
   },
-})
+});

package/src/index.tsx

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