@robin-ux/native 0.1.0

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {
+    "modules": ["RobinUxNativeModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.robinuxnative.RobinUxNativeModule"]
+  }
+}

package/ios/RobinUxNative.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'RobinUxNative'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/robinqc/robin-ux-native' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/RobinUxNativeModule.swift

@@ -0,0 +1,48 @@
+import ExpoModulesCore
+
+public class RobinUxNativeModule: Module {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('RobinUxNative')` in JavaScript.
+    Name("RobinUxNative")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Double.pi
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(RobinUxNativeView.self) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { (view: RobinUxNativeView, url: URL) in
+        if view.webView.url != url {
+          view.webView.load(URLRequest(url: url))
+        }
+      }
+
+      Events("onLoad")
+    }
+  }
+}

package/ios/RobinUxNativeView.swift

@@ -0,0 +1,38 @@
+import ExpoModulesCore
+import WebKit
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class RobinUxNativeView: ExpoView {
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+  var delegate: WebViewDelegate?
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    delegate = WebViewDelegate { url in
+      self.onLoad(["url": url])
+    }
+    webView.navigationDelegate = delegate
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+}
+
+class WebViewDelegate: NSObject, WKNavigationDelegate {
+  let onUrlChange: (String) -> Void
+
+  init(onUrlChange: @escaping (String) -> Void) {
+    self.onUrlChange = onUrlChange
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation) {
+    if let url = webView.url {
+      onUrlChange(url.absoluteString)
+    }
+  }
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+    "name": "@robin-ux/native",
+    "version": "0.1.0",
+    "description": "Themeable React Native UI components for Expo projects",
+    "main": "build/index.js",
+    "types": "build/index.d.ts",
+    "scripts": {
+        "build": "expo-module build",
+        "clean": "expo-module clean",
+        "lint": "expo-module lint",
+        "test": "expo-module test",
+        "prepare": "expo-module prepare",
+        "prepublishOnly": "expo-module prepublishOnly",
+        "expo-module": "expo-module",
+        "open:ios": "xed example/ios",
+        "open:android": "open -a \"Android Studio\" example/android"
+    },
+    "keywords": [
+        "react-native",
+        "expo",
+        "ui-components",
+        "theme",
+        "button",
+        "input",
+        "text",
+        "badge",
+        "segmented-control",
+        "robin-ux"
+    ],
+    "repository": "https://github.com/robinqc/-robin-ux-native",
+    "bugs": {
+        "url": "https://github.com/robinqc/-robin-ux-native/issues"
+    },
+    "author": "robinqc <robinquinteroc@gmail.com> (https://github.com/robinqc)",
+    "license": "MIT",
+    "homepage": "https://github.com/robinqc/-robin-ux-native#readme",
+    "dependencies": {},
+    "devDependencies": {
+        "@expo/vector-icons": "^15.0.0",
+        "@types/react": "~19.1.0",
+        "expo": "^54.0.27",
+        "expo-module-scripts": "^5.0.8",
+        "expo-status-bar": "~3.0.0",
+        "react": "^19.0.0",
+        "react-hook-form": "^7.50.0",
+        "react-native": "0.81.5",
+        "react-native-safe-area-context": "~5.0.0"
+    },
+    "peerDependencies": {
+        "@expo/vector-icons": "*",
+        "expo": "*",
+        "expo-status-bar": "*",
+        "react": "*",
+        "react-hook-form": ">=7.0.0",
+        "react-native": "*",
+        "react-native-safe-area-context": "*"
+    },
+    "peerDependenciesMeta": {
+        "react-hook-form": {
+            "optional": true
+        },
+        "expo-status-bar": {
+            "optional": true
+        },
+        "react-native-safe-area-context": {
+            "optional": true
+        }
+    }
+}

package/src/RobinUxNative.types.ts

@@ -0,0 +1,19 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type OnLoadEventPayload = {
+  url: string;
+};
+
+export type RobinUxNativeModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type RobinUxNativeViewProps = {
+  url: string;
+  onLoad: (event: { nativeEvent: OnLoadEventPayload }) => void;
+  style?: StyleProp<ViewStyle>;
+};

package/src/RobinUxNativeModule.ts

@@ -0,0 +1,12 @@
+import { NativeModule, requireNativeModule } from 'expo';
+
+import { RobinUxNativeModuleEvents } from './RobinUxNative.types';
+
+declare class RobinUxNativeModule extends NativeModule<RobinUxNativeModuleEvents> {
+  PI: number;
+  hello(): string;
+  setValueAsync(value: string): Promise<void>;
+}
+
+// This call loads the native module object from the JSI.
+export default requireNativeModule<RobinUxNativeModule>('RobinUxNative');

package/src/RobinUxNativeModule.web.ts

@@ -0,0 +1,15 @@
+import { registerWebModule, NativeModule } from 'expo';
+
+import { RobinUxNativeModuleEvents } from './RobinUxNative.types';
+
+class RobinUxNativeModule extends NativeModule<RobinUxNativeModuleEvents> {
+  PI = Math.PI;
+  async setValueAsync(value: string): Promise<void> {
+    this.emit('onChange', { value });
+  }
+  hello() {
+    return 'Hello world! 👋';
+  }
+}
+
+export default registerWebModule(RobinUxNativeModule, 'RobinUxNativeModule');

package/src/RobinUxNativeView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { RobinUxNativeViewProps } from './RobinUxNative.types';
+
+const NativeView: React.ComponentType<RobinUxNativeViewProps> =
+  requireNativeView('RobinUxNative');
+
+export default function RobinUxNativeView(props: RobinUxNativeViewProps) {
+  return <NativeView {...props} />;
+}

package/src/RobinUxNativeView.web.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { RobinUxNativeViewProps } from './RobinUxNative.types';
+
+export default function RobinUxNativeView(props: RobinUxNativeViewProps) {
+  return (
+    <div>
+      <iframe
+        style={{ flex: 1 }}
+        src={props.url}
+        onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}
+      />
+    </div>
+  );
+}

package/src/components/Badge.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import { useThemeSafe } from '../theme';
+import { borderRadius, spacing, useThemedStyles } from '../utils/styles';
+import { Text } from './Text';
+
+export type BadgeStatus = 'active' | 'archived' | 'draft' | string;
+
+export interface BadgeProps {
+  /** Status or label to display */
+  status: BadgeStatus;
+  /** Badge size */
+  size?: 'sm' | 'md';
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Custom color override */
+  customColor?: {
+    background: string;
+    text: string;
+    border: string;
+  };
+}
+
+/**
+ * Badge component for displaying status or labels.
+ *
+ * @example
+ * ```tsx
+ * <Badge status="active" />
+ * <Badge status="draft" size="sm" />
+ * <Badge
+ *   status="Custom"
+ *   customColor={{
+ *     background: '#e0f2fe',
+ *     text: '#0369a1',
+ *     border: '#7dd3fc',
+ *   }}
+ * />
+ * ```
+ */
+export function Badge({ status, size = 'md', style, customColor }: BadgeProps) {
+  const { colors } = useThemeSafe();
+
+  // Default status colors
+  const getStatusColors = () => {
+    if (customColor) return customColor;
+
+    switch (status) {
+      case 'active':
+        return {
+          background: colors.success + '15', // 15% opacity
+          text: colors.success,
+          border: colors.success + '30', // 30% opacity
+        };
+      case 'archived':
+        return {
+          background: colors.foregroundTertiary + '15',
+          text: colors.foregroundTertiary,
+          border: colors.foregroundTertiary + '30',
+        };
+      case 'draft':
+        return {
+          background: colors.warning + '15',
+          text: colors.warning,
+          border: colors.warning + '30',
+        };
+      default:
+        return {
+          background: colors.muted,
+          text: colors.foregroundSecondary,
+          border: colors.border,
+        };
+    }
+  };
+
+  const statusColors = getStatusColors();
+
+  const styles = useThemedStyles(() => ({
+    badge: {
+      backgroundColor: statusColors.background,
+      borderWidth: 1,
+      borderColor: statusColors.border,
+      borderRadius: borderRadius.full,
+      paddingHorizontal: size === 'sm' ? spacing.sm : spacing.md,
+      paddingVertical: size === 'sm' ? spacing.xs : spacing.sm,
+      alignSelf: 'flex-start' as const,
+    },
+    text: {
+      color: statusColors.text,
+      fontSize: size === 'sm' ? 10 : 12,
+      fontWeight: '600' as const,
+      textTransform: 'capitalize' as const,
+    },
+  }));
+
+  return (
+    <View style={[styles.badge, style]}>
+      <Text style={styles.text}>{status}</Text>
+    </View>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,176 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { ActivityIndicator, StyleSheet, TouchableOpacity, TouchableOpacityProps, View, ViewStyle } from "react-native";
+import { useThemeSafe } from "../theme";
+import { borderRadius, spacing } from "../utils/styles";
+import { Text } from "./Text";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends Omit<TouchableOpacityProps, "style"> {
+    /** Button visual variant */
+    variant?: ButtonVariant;
+    /** Button size */
+    size?: ButtonSize;
+    /** Show loading spinner */
+    loading?: boolean;
+    /** Disable button interactions */
+    disabled?: boolean;
+    /** Icon name from Ionicons */
+    icon?: keyof typeof Ionicons.glyphMap;
+    /** Icon position relative to children */
+    iconPosition?: "left" | "right";
+    /** Button content */
+    children?: React.ReactNode;
+    /** Custom style */
+    style?: TouchableOpacityProps["style"];
+    /** Ref to the button view */
+    ref?: React.RefObject<View | null>;
+}
+
+interface SizeConfig {
+    paddingVertical: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    iconSize: number;
+}
+
+/**
+ * Button component with variants, sizes, and icon support.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onPress={handlePress}>
+ *   Submit
+ * </Button>
+ *
+ * <Button variant="secondary" icon="add" size="sm">
+ *   Add Item
+ * </Button>
+ *
+ * <Button variant="ghost" icon="settings" />
+ * ```
+ */
+export function Button({ variant = "primary", size = "md", loading = false, disabled = false, icon, iconPosition = "left", children, style, ref, ...props }: ButtonProps) {
+    const { colors } = useThemeSafe();
+
+    const isDisabled = disabled || loading;
+
+    // Size configurations
+    const sizeConfigs: Record<ButtonSize, SizeConfig> = {
+        sm: {
+            paddingVertical: spacing.sm,
+            paddingHorizontal: spacing.md,
+            fontSize: 14,
+            iconSize: 16,
+        },
+        md: {
+            paddingVertical: 14,
+            paddingHorizontal: spacing.lg,
+            fontSize: 16,
+            iconSize: 20,
+        },
+        lg: {
+            paddingVertical: 18,
+            paddingHorizontal: spacing.xl,
+            fontSize: 18,
+            iconSize: 24,
+        },
+    };
+
+    const sizeConfig = sizeConfigs[size];
+
+    // Variant styles
+    const variantStyles: Record<ButtonVariant, { backgroundColor: string; textColor: string }> = {
+        primary: {
+            backgroundColor: isDisabled ? colors.primaryLight : colors.primary,
+            textColor: colors.background,
+        },
+        secondary: {
+            backgroundColor: isDisabled ? colors.muted : colors.backgroundSecondary,
+            textColor: colors.foreground,
+        },
+        ghost: {
+            backgroundColor: "transparent",
+            textColor: colors.foreground,
+        },
+        destructive: {
+            backgroundColor: isDisabled ? colors.muted : colors.destructive,
+            textColor: colors.destructiveForeground,
+        },
+    };
+
+    const currentVariant = variantStyles[variant];
+
+    const buttonStyle: ViewStyle[] = [
+        styles.button,
+        {
+            backgroundColor: currentVariant.backgroundColor,
+            paddingVertical: sizeConfig.paddingVertical,
+            paddingHorizontal: sizeConfig.paddingHorizontal,
+            opacity: isDisabled ? 0.5 : 1,
+        },
+        style as ViewStyle,
+    ];
+
+    const renderContent = () => {
+        if (loading) {
+            return <ActivityIndicator size="small" color={currentVariant.textColor} />;
+        }
+
+        const iconElement = icon ? (
+            <Ionicons
+                name={icon}
+                size={sizeConfig.iconSize}
+                color={currentVariant.textColor}
+                style={children && iconPosition === "left" ? styles.iconLeft : children && iconPosition === "right" ? styles.iconRight : undefined}
+            />
+        ) : null;
+
+        if (!children) {
+            return iconElement;
+        }
+
+        return (
+            <View style={styles.content}>
+                {iconPosition === "left" && iconElement}
+                <Text
+                    style={{
+                        color: currentVariant.textColor,
+                        fontSize: sizeConfig.fontSize,
+                        fontWeight: "600",
+                    }}
+                >
+                    {children}
+                </Text>
+                {iconPosition === "right" && iconElement}
+            </View>
+        );
+    };
+
+    return (
+        <TouchableOpacity style={buttonStyle} disabled={isDisabled} activeOpacity={0.7} ref={ref} {...props}>
+            {renderContent()}
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    button: {
+        borderRadius: borderRadius.full,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    iconLeft: {
+        marginRight: spacing.sm,
+    },
+    iconRight: {
+        marginLeft: spacing.sm,
+    },
+});

package/src/components/DynamicStatusBar.tsx

@@ -0,0 +1,93 @@
+import { StatusBar } from 'expo-status-bar';
+import { useEffect, useState } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useThemeSafe } from '../theme';
+
+export interface DynamicStatusBarProps {
+  /** Animated scroll value to track */
+  scrollY: Animated.Value;
+  /** Scroll threshold for style change */
+  threshold?: number;
+  /** Default status bar style */
+  defaultStyle?: 'light' | 'dark';
+}
+
+/**
+ * Dynamic status bar that changes style based on scroll position.
+ * Provides a smooth transition with animated background.
+ *
+ * @example
+ * ```tsx
+ * const scrollY = useRef(new Animated.Value(0)).current;
+ *
+ * <DynamicStatusBar scrollY={scrollY} threshold={200} />
+ * <Animated.ScrollView
+ *   onScroll={Animated.event(
+ *     [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+ *     { useNativeDriver: true }
+ *   )}
+ * >
+ *   {content}
+ * </Animated.ScrollView>
+ * ```
+ */
+export function DynamicStatusBar({
+  scrollY,
+  threshold = 200,
+  defaultStyle = 'light',
+}: DynamicStatusBarProps) {
+  const { isDark, colors } = useThemeSafe();
+  const insets = useSafeAreaInsets();
+  const [style, setStyle] = useState<'light' | 'dark'>(defaultStyle);
+
+  useEffect(() => {
+    const listener = scrollY.addListener(({ value }) => {
+      if (isDark) {
+        if (style !== 'light') setStyle('light');
+        return;
+      }
+
+      const newStyle = value > threshold ? 'dark' : 'light';
+      if (newStyle !== style) {
+        setStyle(newStyle);
+      }
+    });
+
+    return () => scrollY.removeListener(listener);
+  }, [isDark, threshold, style, scrollY]);
+
+  const backgroundOpacity = scrollY.interpolate({
+    inputRange: [threshold - 40, threshold],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  const activeStyle = isDark ? 'light' : style;
+
+  return (
+    <>
+      <StatusBar style={activeStyle} />
+      <Animated.View
+        style={[
+          styles.background,
+          {
+            height: insets.top,
+            backgroundColor: colors.background,
+            opacity: backgroundOpacity,
+          },
+        ]}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+});