@dryanovski/react-native-components 1.0.7 → 1.0.9

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState, type FC } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import type { CollapseProps } from './types';
+
+const DEFAULT_ANIMATION = { type: 'timing' as const, duration: 100 };
+const DEFAULT_SPRING = { damping: 20, stiffness: 300 };
+
+/**
+ * Collapse - A reusable component for smooth expand/collapse animations
+ *
+ * @example
+ * ```tsx
+ * <Collapse isExpanded={isOpen}>
+ *   <Text>Your content here</Text>
+ * </Collapse>
+ * ```
+ */
+export const Collapse: FC<CollapseProps> = ({
+  isExpanded,
+  children,
+  animationConfig,
+  style,
+  contentStyle,
+  onMeasured,
+}) => {
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
+  const [shouldRender, setShouldRender] = useState(isExpanded);
+  const heightValue = useSharedValue<number | 'auto'>(isExpanded ? 'auto' : 0);
+  const opacityValue = useSharedValue(isExpanded ? 1 : 0);
+
+  const config = animationConfig || DEFAULT_ANIMATION;
+  const isSpring = config.type === 'spring';
+  const duration = config.duration || 100;
+
+  // Measure content height
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { height } = event.nativeEvent.layout;
+      if (height > 0 && contentHeight !== height) {
+        setContentHeight(height);
+        onMeasured?.(height);
+      }
+    },
+    [contentHeight, onMeasured]
+  );
+
+  // Animate on expand/collapse
+  useEffect(() => {
+    // Show component when expanding
+    if (isExpanded) {
+      setShouldRender(true);
+    }
+
+    // Wait for measurement before animating
+    if (!contentHeight) {
+      heightValue.value = isExpanded ? 'auto' : 0;
+      opacityValue.value = isExpanded ? 1 : 0;
+      if (!isExpanded) setShouldRender(false);
+      return;
+    }
+
+    // Run animation
+    const targetHeight = isExpanded ? contentHeight : 0;
+    const targetOpacity = isExpanded ? 1 : 0;
+
+    if (isSpring) {
+      const springConfig = config.springConfig || DEFAULT_SPRING;
+      heightValue.value = withSpring(targetHeight, springConfig);
+      opacityValue.value = withSpring(targetOpacity, springConfig);
+
+      // Remove from DOM after collapse animation
+      if (!isExpanded) {
+        const stiffness = springConfig.stiffness || 300;
+        const damping = springConfig.damping || 20;
+        const settleTime = (1000 / stiffness) * damping * 10;
+        setTimeout(() => setShouldRender(false), settleTime);
+      }
+    } else {
+      const timingConfig =
+        'timingConfig' in config && config.timingConfig
+          ? config.timingConfig
+          : { duration };
+      heightValue.value = withTiming(targetHeight, timingConfig);
+      opacityValue.value = withTiming(targetOpacity, timingConfig);
+
+      // Remove from DOM after collapse animation
+      if (!isExpanded) {
+        setTimeout(() => setShouldRender(false), duration);
+      }
+    }
+  }, [
+    isExpanded,
+    contentHeight,
+    isSpring,
+    duration,
+    config,
+    heightValue,
+    opacityValue,
+  ]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: heightValue.value,
+    opacity: opacityValue.value,
+    overflow: 'hidden',
+  }));
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <Animated.View style={[animatedStyle, style]}>
+      <View onLayout={onLayout} style={contentStyle}>
+        {children}
+      </View>
+    </Animated.View>
+  );
+};
+
+Collapse.displayName = 'Collapse';

package/src/components/Collapse/index.ts

@@ -0,0 +1,3 @@
+export * from './Collapse';
+export * from './types';
+

package/src/components/Collapse/types.ts

@@ -0,0 +1,62 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
+
+export type AnimationType = 'timing' | 'spring';
+
+export type AnimationConfig = {
+  /**
+   * Type of animation to use.
+   * @default 'timing'
+   */
+  type?: AnimationType;
+
+  /**
+   * Duration of the animation in milliseconds (for timing animation).
+   * @default 100
+   */
+  duration?: number;
+
+  /**
+   * Timing animation configuration.
+   */
+  timingConfig?: WithTimingConfig;
+
+  /**
+   * Spring animation configuration.
+   */
+  springConfig?: WithSpringConfig;
+};
+
+export type CollapseProps = {
+  /**
+   * Whether the content is expanded or collapsed.
+   */
+  isExpanded: boolean;
+
+  /**
+   * Content to animate.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Animation configuration.
+   * @default { type: 'timing', duration: 100 }
+   */
+  animationConfig?: AnimationConfig;
+
+  /**
+   * Style for the animated container.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Style for the content wrapper.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Callback when measurement is complete.
+   */
+  onMeasured?: (height: number) => void;
+};
+

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import type { DividerProps } from './types';
+
+export const Divider = forwardRef<ViewRef, DividerProps>((props, ref) => {
+  const {
+    thickness = 1,
+    color = '#c4c4c4',
+    orientation = 'horizontal',
+    length = '100%',
+    style,
+    ...rest
+  } = props;
+
+  const dividerStyle = {
+    backgroundColor: color,
+    ...(orientation === 'vertical'
+      ? { width: thickness, height: length }
+      : { height: thickness, width: length }),
+  } as ViewStyle;
+
+  return <View ref={ref} style={[dividerStyle, style]} {...rest} />;
+});
+
+Divider.displayName = 'Divider';
+
+export default Divider;

package/src/components/Divider/types.ts

@@ -0,0 +1,36 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+export type DividerThickness = 1 | 5 | 10;
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+export interface DividerProps extends ViewProps {
+  /**
+   * Style for the divider component.
+   * Optional.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The thickness of the divider.
+   * @default 1
+   */
+  thickness?: DividerThickness;
+
+  /**
+   * The color of the divider.
+   * @default '#000'
+   */
+  color?: string;
+
+  /**
+   * The orientation of the divider.
+   * @default 'horizontal'
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * The length of the divider.
+   * @default '100%'
+   */
+  length?: number | string;
+}

package/src/components/Layout/HStack.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import Style from '../../utils/Style';
+import type { HStackProps } from './layout.types';
+
+export const HStack = forwardRef<ViewRef, HStackProps>((props, ref) => {
+  const { style, ...rest } = props;
+
+  return <View ref={ref} style={[elementStyle.base, style]} {...rest} />;
+});
+
+HStack.displayName = 'HStack';
+
+const elementStyle = Style.create({
+  base: {
+    flexDirection: 'row',
+  },
+});

package/src/components/Layout/VStack.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import Style from '../../utils/Style';
+import type { VStackProps } from './layout.types';
+
+export const VStack = forwardRef<ViewRef, VStackProps>((props, ref) => {
+  const { style, ...rest } = props;
+
+  return <View ref={ref} style={[elementStyle.base, style]} {...rest} />;
+});
+
+VStack.displayName = 'VStack';
+
+const elementStyle = Style.create({
+  base: {
+    flexDirection: 'column',
+  },
+});

package/src/components/Layout/layout.types.ts

@@ -0,0 +1,9 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type VStackProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export type HStackProps = {
+  style?: StyleProp<ViewStyle>;
+};

package/src/index.tsx

@@ -1,5 +1,27 @@
 // Export Components
+export * from './components/Accordion/Accordion';
+export * from './components/Accordion/AccordionItem';
+export * from './components/Collapse';
+export * from './components/Button/Button';
+export * from './components/Button/DangerButton';
+export * from './components/Button/GhostButton';
+export * from './components/Button/PrimaryButton';
+export * from './components/Button/SecondaryButton';
 export * from './components/Card/Card';
+export * from './components/Divider/Divider';
+export * from './components/Layout/HStack';
+export * from './components/Layout/VStack';
+export * from './components/Surface/Surface';
+
+// types
+export * from './components/Accordion/type';
+export * from './components/Collapse/types';
+export * from './components/Button/types';
+export * from './components/Card/types';
+export * from './components/Divider/types';
+export * from './components/Layout/layout.types';
+export * from './components/Surface/types';
+export * from './types/general.types';
 
 // Provider
 export * from './providers/ThemeProvider';