related-ui-components 1.1.6

package/src/app/_layout.tsx

@@ -0,0 +1,38 @@
+import { DarkTheme, DefaultTheme, ThemeProvider as Custom } from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { StatusBar } from 'expo-status-bar';
+import { useEffect } from 'react';
+import 'react-native-reanimated';
+import {ThemeProvider} from '@/theme/ThemeContext';
+
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [loaded] = useFonts({
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+  });
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+      <ThemeProvider>
+      <Stack>
+        {/* <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> */}
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="auto" />
+      </ThemeProvider>
+  );
+}

package/src/app/index.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { View, StyleSheet, Button, Text, TouchableOpacity } from "react-native"; // Added TouchableOpacity
+import { Ionicons } from "@expo/vector-icons";
+import UnlockRewards from "@/components/UnlockRewards/UnlockRewards"; // Adjust path if needed
+import {Popup} from "@/components/Popup";
+import { DealCardWithBackgroundImage } from "@/components";
+import { useTheme } from "@/theme";
+
+export default function RewardsScreen() {
+  const [showRewards, setShowRewards] = useState(false);
+
+  // --- Define a NEW "Cosmic Explorer" theme ---
+  const cosmicActiveIconStyle = {
+    backgroundColor: "#2a2a4e", // Dark blue-purple base
+    borderColor: "#7DF9FF", // Bright cyan border
+    borderWidth: 1.5,
+    borderRadius: 25, // Circular
+    padding: 10,
+  };
+
+  const cosmicInactiveIconStyle = {
+    backgroundColor: "#4a4a6e", // Muted purple-grey
+    borderRadius: 25, // Circular
+    padding: 10,
+    opacity: 0.7, // Slightly faded
+  };
+  const theme = useTheme();
+
+  // --- New "Cosmic Explorer" Rewards Data ---
+  const rewardsData = [
+    {
+      icon: <Ionicons name="water-outline" size={24} color={theme.onSecondary} />,
+      activeIcon: <Ionicons name="water" size={24} color={theme.primary} />,
+      title: "Aqua Guardian",
+      description:
+        "Maintain water usage below the community average for a month.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="build-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="build-outline" size={24} color={theme.onPrimary} />,
+      title: "Leak Detective",
+      description: "Successfully report and fix a water leak on your property.",
+      isActive: true,
+      status: "1/1",
+      statusBackgroundColor: theme.primary,
+      statusTextColor: theme.onPrimary,
+    },
+    {
+      icon: <Ionicons name="leaf-outline" size={24} color={theme.onSecondary} />,
+      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
+      title: "Eco-Warrior",
+      description:
+        "Implement a rainwater harvesting system or greywater recycling.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+  ];
+  const handleOpenRewards = () => {
+    setShowRewards(true);
+  };
+
+  const handleCloseRewards = () => {
+    setShowRewards(false);
+  };
+
+
+  return (
+    <View style={styles.container}>
+    <UnlockRewards
+      title="Your Rewards"
+      description="Complete tasks to unlock special benefits"
+      rewards={rewardsData}
+      // onClose={handleClose}
+      showCloseIcon={true}
+      closeIconVariant="nested"
+      topBackgroundHeight={200}
+      customCloseIcon={<Ionicons name="close-circle" size={28} color={theme.primary} />}
+    />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+    // backgroundColor: "#0a0a1e", // Very dark background for the screen
+  },
+  // Custom button style
+  button: {
+    backgroundColor: "#302b63", // Use a gradient color
+    paddingVertical: 12,
+    paddingHorizontal: 30,
+    borderRadius: 25,
+    shadowColor: "#7DF9FF",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    elevation: 6,
+  },
+  buttonText: {
+    color: "#E0E0FF",
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});

package/src/components/Badges/Badge.tsx

@@ -0,0 +1,81 @@
+import { useTheme } from "../../theme";
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ImageStyle,
+  Text,
+  TextStyle,
+} from "react-native";
+
+// Badge props
+export interface BadgeProps {
+  icon: React.ReactNode;
+  activeIcon?: React.ReactNode;
+
+  isActive?: boolean;
+
+  // Style customization
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+  activeStyle?: StyleProp<ViewStyle>;
+  inactiveStyle?: StyleProp<ViewStyle>;
+
+  label?: string;
+  labelStyle?: StyleProp<TextStyle>;
+}
+
+// Simple Badge component
+export const Badge: React.FC<BadgeProps> = ({
+  icon,
+  isActive = false,
+  size,
+  style,
+  activeStyle,
+  inactiveStyle,
+  activeIcon,
+  label,
+  labelStyle,
+}) => {
+  const theme = useTheme();
+
+  const styles = StyleSheet.create({
+    badge: {
+      borderRadius: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.secondary,
+      padding: 8,
+    },
+    activeBadge: {
+      backgroundColor: theme.primary,
+    },
+    label: {
+        fontSize: 12,
+        color: theme.text,
+        marginTop: 4,
+        textAlign: "center",
+        fontWeight: "500",
+      },
+  });
+
+  const badgeStyles = [
+    styles.badge,
+    size ? { width: size, height: size } : {},
+    style,
+    isActive ? [styles.activeBadge, activeStyle] : inactiveStyle,
+  ];
+
+  return (
+    <View style={{ alignItems: "center" }}>
+      <View style={badgeStyles}>
+        {isActive && activeIcon ? activeIcon : icon}
+      </View>
+      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
+    </View>
+  );
+};
+
+export default Badge;

package/src/components/Badges/README.md

@@ -0,0 +1,98 @@
+# Badge Component
+
+A customizable badge component for React Native applications that displays icons with optional labels, supporting both active and inactive states. Perfect for creating navigation tabs, feature highlights, or status indicators.
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Badge } from '@your-org/component-library';
+import { StarIcon } from 'your-icon-library';
+
+const MyBadgeExample = () => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Badge 
+        icon={<StarIcon size={24} color="#FFFFFF" />}
+        label="Favorite"
+        isActive={true}
+      />
+    </View>
+  );
+};
+
+export default MyBadgeExample;
+```
+
+## Props
+
+### Core Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `icon` | `React.ReactNode` | ✅ | - | Icon to display in the badge |
+| `activeIcon` | `React.ReactNode` | ❌ | - | Alternative icon to display when badge is active |
+| `isActive` | `boolean` | ❌ | `false` | Whether the badge is in active state |
+| `label` | `string` | ❌ | - | Text label for the badge |
+
+### Dimension Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `number` | ❌ | `60` | Size of the badge in pixels |
+
+### Styling Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `style` | `StyleProp<ViewStyle>` | ❌ | - | Custom style for the badge |
+| `activeStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is active |
+| `inactiveStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is inactive |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Custom style for the label text |
+
+## Advanced Examples
+
+### With Active and Inactive Icons
+
+```jsx
+<Badge 
+  icon={<StarOutlineIcon size={24} color="#FFFFFF" />}
+  activeIcon={<StarFilledIcon size={24} color="#FFFFFF" />}
+  isActive={isFavorite}
+  label="Favorite"
+  size={80}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<Badge 
+  icon={<ProfileIcon size={30} color="#333333" />}
+  style={{ backgroundColor: '#F5F5F5', borderWidth: 1, borderColor: '#E0E0E0' }}
+  activeStyle={{ backgroundColor: '#4CAF50', borderColor: '#388E3C' }}
+  labelStyle={{ color: '#333333', fontSize: 14, fontWeight: 'bold' }}
+  label="Profile"
+  size={70}
+/>
+```
+
+### Without Label
+
+```jsx
+<Badge 
+  icon={<NotificationIcon size={24} color="#FFFFFF" />}
+  activeIcon={<NotificationActiveIcon size={24} color="#FFFFFF" />}
+  isActive={hasNotifications}
+  size={50}
+/>
+```
+
+
+### Theme Integration
+
+The Badge component automatically uses your application's theme through the `useTheme()` hook. Default styling includes:
+- Badge background color: Uses `theme.secondary` for inactive state
+- Active badge background color: Uses `theme.primary` for active state
+- Label text color: Uses `theme.text`

package/src/components/Badges/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./Badge";
+export * from "./Badge";

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,172 @@
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ViewStyle,
+  TextStyle,
+  ImageRequireSource,
+  DimensionValue,
+  View,
+} from "react-native";
+import { Card, CardFooter } from "../Card";
+import { useTheme, ThemeType } from "../../theme";
+
+export interface BannerProps {
+  backgroundImage: ImageRequireSource;
+  buttonText?: string;
+  onButtonPress?: () => void;
+  onBannerPress?: () => void;
+  containerStyle?: ViewStyle;
+  backgroundImageStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  buttonStyle?: ViewStyle;
+  buttonTextStyle?: TextStyle;
+  height?: DimensionValue;
+  customButton?: React.ReactNode;
+  contentAlignment?: "top" | "center" | "bottom";
+  
+  // New icon props
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right";
+  iconStyle?: ViewStyle;
+  iconSpacing?: number;
+}
+
+/**
+ * A customizable banner component with background image and action button
+ */
+const Banner: React.FC<BannerProps> = ({
+  backgroundImage,
+  buttonText = "Redeem",
+  onButtonPress,
+  onBannerPress,
+  containerStyle,
+  backgroundImageStyle,
+  contentContainerStyle,
+  buttonStyle,
+  buttonTextStyle,
+  height = 300,
+  customButton,
+  contentAlignment = "center",
+  
+  // Icon props with defaults
+  icon,
+  iconPosition = "left",
+  iconStyle,
+  iconSpacing = 8,
+}) => {
+  const theme = useTheme();
+  // Handle banner press if provided
+  const handlePress = onBannerPress ? onBannerPress : undefined;
+
+  // Render the button with optional icon
+  const renderButton = () => {
+    if (customButton) {
+      return customButton;
+    }
+    
+    if (!buttonText) {
+      return null;
+    }
+    
+    return (
+      <TouchableOpacity
+        style={[styles.button, buttonStyle, {borderColor: theme.primary}]}
+        onPress={onButtonPress}
+        accessibilityRole="button"
+        accessibilityLabel={buttonText}
+      >
+        <View style={[styles.buttonContent, { flexDirection: iconPosition === "left" ? "row" : "row-reverse" }]}>
+          {icon && (
+            <View 
+              style={[
+                styles.iconContainer, 
+                { 
+                  marginRight: iconPosition === "left" ? iconSpacing : 0,
+                  marginLeft: iconPosition === "right" ? iconSpacing : 0 
+                },
+                iconStyle
+              ]}
+              accessible={false}
+              importantForAccessibility="no-hide-descendants"
+            >
+              {icon}
+            </View>
+          )}
+          <Text style={[styles.buttonText, buttonTextStyle, {color: theme.primary}]}>
+            {buttonText}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <Card
+      style={[{ height }, containerStyle]}
+      backgroundImage={{
+        source: backgroundImage,
+        resizeMode: "cover",
+        style: backgroundImageStyle,
+      }}
+      onPress={handlePress}
+    >
+      <CardFooter 
+        justifyContent="center" 
+        style={[
+          styles.footer,
+          contentAlignment === "top" ? styles.footerTop : 
+          contentAlignment === "center" ? styles.footerCenter : 
+          styles.footerBottom,
+          contentContainerStyle
+        ]}
+      >
+        {renderButton()}
+      </CardFooter>
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+  },
+  footerTop: {
+    top: 0,
+  },
+  footerCenter: {
+    top: "50%",
+    transform: [{ translateY: -20 }], // Approximate button height offset
+  },
+  footerBottom: {
+    bottom: 0,
+  },
+  button: {
+    backgroundColor: "transparent",
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#FFFFFF",
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+    letterSpacing: 1,
+  },
+});
+
+export default Banner;