related-ui-components 1.9.2 → 1.9.3

package/src/app.tsx

@@ -1,151 +1,127 @@
-// // App.tsx or any other screen component
-// import React, { useState } from "react";
-// import {
-//   SafeAreaView,
-//   StyleSheet,
-//   TextInput,
-//   View,
-//   Text,
-//   ScrollView,
-//   Button,
-// } from "react-native";
-// import Barcode, { BarcodeFormat } from "./components/Barcode/Barcode";
+import React, { useState } from "react";
+import { View, Button, Text } from "react-native";
+import {
+  FilterResult,
+  Filters,
+  Popup,
+  ScratchCard,
+  ScratchCardContent,
+  UnlockRewards,
+} from "./components";
+import BRANDS from "./constants/BRANDS";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "./theme";
+import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
-// export default function App() {
-//   const [barcodeValue, setBarcodeValue] = useState("123456789012");
-//   const [barcodeFormat, setBarcodeFormat] = useState<BarcodeFormat>(
-//     BarcodeFormat.EAN13,
-//   );
-//   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+const MyScreen = () => {
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
 
-//   const handleBarcodeError = (error: Error) => {
-//     console.error("Custom Barcode Error:", error.message);
-//     setErrorMsg(`Barcode Error: ${error.message}`);
-//   };
+  const { theme } = useTheme();
 
-//   const cycleFormat = () => {
-//     const formats = Object.values(BarcodeFormat);
-//     const currentIndex = formats.indexOf(barcodeFormat);
-//     const nextIndex = (currentIndex + 1) % formats.length;
-//     setBarcodeFormat(formats[nextIndex]);
-//     // Adjust value for specific formats if needed
-//     if (formats[nextIndex] === BarcodeFormat.EAN13) setBarcodeValue("978020137962"); // Valid EAN13
-//     else if (formats[nextIndex] === BarcodeFormat.UPC) setBarcodeValue("012345678905"); // Valid UPC
-//     else if (formats[nextIndex] === BarcodeFormat.CODE39) setBarcodeValue("HELLO-WORLD");
-//     else setBarcodeValue("TEST12345");
+  const handleApplyFilters = (result: FilterResult) => {
+    console.log("Filters applied:", result);
+    // Process filter results...
+  };
 
-//   };
+  const rewardsData = [
+    {
+      icon: (
+        <Ionicons name="briefcase-outline" size={30} color={theme.primary} />
+      ),
+      activeIcon: (
+        <Ionicons name="briefcase-outline" size={30} color={theme.onPrimary} />
+      ),
+      title: "Aqua Guardian",
+      description:
+        "Maintain water usage below the community average for a month.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: "#FFCDD2",
+      statusTextColor: "#D32F2F",
+    },
+    {
+      icon: <Ionicons name="heart-outline" size={30} color={theme.primary} />,
+      activeIcon: (
+        <Ionicons name="heart-outline" size={30} color={theme.onPrimary} />
+      ),
+      title: "Wellness Warrior",
+      description: "Complete 30 days of healthy hydration tracking.",
+      isActive: true,
+      status: "15/30",
+      statusBackgroundColor: "#C8E6C9",
+      statusTextColor: "#388E3C",
+    },
+    {
+      icon: <Ionicons name="airplane-outline" size={24} color={theme.helper} />,
+      activeIcon: (
+        <Ionicons name="airplane-outline" size={24} color={theme.primary} />
+      ),
+      title: "Eco Traveler",
+      description: "Log 5 trips where you chose sustainable travel options.",
+      isActive: false,
+      status: "2/5",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="school-outline" size={24} color={theme.helper} />,
+      activeIcon: (
+        <Ionicons name="school-outline" size={24} color={theme.primary} />
+      ),
+      title: "Knowledge Seeker",
+      description: "Complete all water conservation learning modules.",
+      isActive: false,
+      status: "3/5",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="settings-outline" size={24} color={theme.helper} />,
+      activeIcon: (
+        <Ionicons name="settings-outline" size={24} color={theme.primary} />
+      ),
+      title: "Smart Saver",
+      description: "Set up and use all water-saving features in the app.",
+      isActive: true,
+      status: "4/4",
+      statusBackgroundColor: theme.primary,
+      statusTextColor: theme.background,
+    },
+  ];
 
-//   return (
-//     <SafeAreaView style={styles.container}>
-//       <ScrollView contentContainerStyle={styles.scrollContent}>
-//         <Text style={styles.title}>Custom Barcode Generator</Text>
+  return (
+    <>
+      <GestureHandlerRootView>
+        <Popup visible={true} onClose={()=>{}}>
+        <ScratchCard
+          backgroundColor="#8A2BE2"
+          text="Scratch to reveal your prize!"
+          textFontColor="#FFFFFF"
+          textFontSize={18}
+          textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
+          width={300}
+          height={150}
+          gradient={{
+            colors: ["#ff0000", "#00ff00", "#0000ff"],
+            start: { x: 0, y: 0 },
+            end: { x: 300, y: 300 },
+          }}
+          onScratched={() => alert("Congratulations! You won a prize!")}
+        >
+          <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
+            <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
+              50% OFF COUPON
+            </Text>
+            <Text style={{ marginTop: 8, color: "#333" }}>
+              Use code: SCRATCH50
+            </Text>
+          </ScratchCardContent>
+        </ScratchCard>
+        </Popup>
+      </GestureHandlerRootView>
+    </>
+  );
+};
 
-//         <TextInput
-//           style={styles.input}
-//           placeholder="Enter barcode value"
-//           value={barcodeValue}
-//           onChangeText={setBarcodeValue}
-//           autoCapitalize="characters" // Good for some formats like CODE39
-//         />
-
-//         <View style={styles.formatSelector}>
-//           <Text>Format: {barcodeFormat}</Text>
-//           <Button title="Cycle Format" onPress={cycleFormat} />
-//         </View>
-
-//         {errorMsg && <Text style={styles.errorTextDisplay}>{errorMsg}</Text>}
-
-//         <Text style={styles.label}>Default:</Text>
-//         <Barcode
-//           value={barcodeValue}
-//           format={barcodeFormat}
-//           onError={handleBarcodeError}
-//         />
-
-//         <Text style={styles.label}>Customized (CODE128):</Text>
-//         <Barcode
-//           value="CUSTOM-CODE-128"
-//           format={BarcodeFormat.CODE128}
-//           lineColor="blue"
-//           backgroundColor="#e0e0ff"
-//           height={80}
-//           width={1.5} // Bar width
-//           fontSize={16}
-//           textMargin={5}
-//           margin={20} // Margin around the SVG
-//           onError={handleBarcodeError}
-//           style={styles.customBarcodeStyle}
-//         />
-
-//         <Text style={styles.label}>No Text Value (EAN13):</Text>
-//         <Barcode
-//           value="590123412345" // Needs valid check digit for EAN13
-//           format={BarcodeFormat.EAN13}
-//           displayValue={false}
-//           onError={handleBarcodeError}
-//         />
-
-//         <Text style={styles.label}>Invalid Value Example (for EAN13):</Text>
-//         <Barcode
-//           value="INVALID" // This will likely cause an error for EAN13
-//           format={BarcodeFormat.EAN13}
-//           onError={handleBarcodeError}
-//         />
-//          <Text style={styles.label}>Empty Value:</Text>
-//         <Barcode
-//           value=""
-//           format={BarcodeFormat.CODE128}
-//           onError={handleBarcodeError}
-//         />
-//       </ScrollView>
-//     </SafeAreaView>
-//   );
-// }
-
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     backgroundColor: "#f0f0f0",
-//   },
-//   scrollContent: {
-//     alignItems: "center",
-//     padding: 20,
-//   },
-//   title: {
-//     fontSize: 24,
-//     fontWeight: "bold",
-//     marginBottom: 20,
-//   },
-//   input: {
-//     height: 40,
-//     borderColor: "gray",
-//     borderWidth: 1,
-//     paddingHorizontal: 10,
-//     marginBottom: 20,
-//     width: "90%",
-//     backgroundColor: "white",
-//   },
-//   label: {
-//     fontSize: 16,
-//     fontWeight: "600",
-//     marginTop: 20,
-//     marginBottom: 8,
-//   },
-//   customBarcodeStyle: {
-//     borderWidth: 1,
-//     borderColor: "purple",
-//     padding: 5, // Padding for the View container, not the barcode margin
-//   },
-//   formatSelector: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//     justifyContent: "space-between",
-//     width: "90%",
-//     marginBottom: 15,
-//   },
-//   errorTextDisplay: {
-//     color: 'red',
-//     marginVertical: 10,
-//   }
-// });
+export default MyScreen;

package/src/components/Banner/Banner.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
   StyleSheet,
   Text,
+  TouchableOpacity,
   ViewStyle,
   TextStyle,
   ImageSourcePropType,
@@ -11,7 +12,6 @@ import {
 } from "react-native";
 import { Card, CardFooter } from "../Card";
 import { useTheme, ThemeType } from "../../theme";
-import { TouchableOpacity } from "react-native-gesture-handler";
 
 export interface BannerProps {
   backgroundImage: ImageSourcePropType;

package/src/index.ts

@@ -1,10 +1,10 @@
-// import { registerRootComponent } from 'expo';
-// import "react-native-reanimated";
+import { registerRootComponent } from 'expo';
+import "react-native-reanimated";
 
 
-// import App from "./app";
+import App from "./app";
 
-// registerRootComponent(App);
+registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";