related-ui-components 1.3.7 → 1.3.9

package/src/components/BrandIcon/BrandIcon.tsx

@@ -1,5 +1,5 @@
 import { useTheme, ThemeType } from "../../theme";
-import React from 'react';
+import React from "react";
 import {
   View,
   Image,
@@ -9,7 +9,9 @@ import {
   ViewStyle,
   ImageSourcePropType,
   ImageStyle,
-} from 'react-native';
+  Text,
+  TextStyle,
+} from "react-native";
 
 interface BrandIconProps {
   brand: {
@@ -19,40 +21,44 @@ interface BrandIconProps {
   };
   size?: number;
   selected?: boolean;
+  showName?: boolean;
   onPress?: () => void;
   disabled?: boolean;
+  // styles for the circular button
   containerStyle?: StyleProp<ViewStyle>;
+  // styles for the outer wrapper (align center + name)
+  wrapperStyle?: StyleProp<ViewStyle>;
+  nameStyle?: TextStyle;
   imageStyle?: StyleProp<ImageStyle>;
   selectionIndicatorStyle?: StyleProp<ViewStyle>;
-  selectionIndicatorIcon?: React.ReactNode
+  selectionIndicatorIcon?: React.ReactNode;
 }
 
 const BrandIcon: React.FC<BrandIconProps> = ({
   brand,
   size = 66,
   selected = false,
+  showName = false,
   onPress,
   disabled = false,
   containerStyle,
+  wrapperStyle,
   imageStyle,
   selectionIndicatorStyle,
-  selectionIndicatorIcon
+  selectionIndicatorIcon,
+  nameStyle
 }) => {
-  const {theme} = useTheme();
-  const styles = createStyles(theme); // Create styles using theme
+  const { theme } = useTheme();
+  const styles = createStyles(theme);
 
+  // fixed circle dimensions
   const iconSize = {
     width: size,
     height: size,
     borderRadius: size / 2,
   };
 
-  const imageSize = {
-    width: size,
-    height: size,
-    borderRadius: size / 2,
-  };
-
+  // size for the check indicator
   const indicatorSize = {
     width: size * 0.3,
     height: size * 0.3,
@@ -65,70 +71,77 @@ const BrandIcon: React.FC<BrandIconProps> = ({
   };
 
   return (
-    <TouchableOpacity
-      style={[
-        styles.container,
-        iconSize,
-        selected && styles.selectedContainer,
-        containerStyle,
-      ]}
-      onPress={onPress}
-      disabled={disabled || !onPress}
-      activeOpacity={0.8}
-    >
-      <Image
-        source={brand.logo}
-        style={[styles.logo, imageSize, imageStyle]}
-        resizeMode="contain"
-      />
+    <View style={[styles.wrapper, wrapperStyle]}>
+      <TouchableOpacity
+        style={[
+          styles.container,
+          iconSize,
+          selected && styles.selectedContainer,
+          containerStyle,
+        ]}
+        onPress={onPress}
+        disabled={disabled || !onPress}
+        activeOpacity={0.8}
+      >
+        <Image
+          source={brand.logo}
+          style={[{ width: size, height: size, borderRadius: size / 2 }, imageStyle]}
+          resizeMode="contain"
+        />
 
-      {selected && (
-        <View
-          style={[
-            styles.selectionIndicator,
-            indicatorSize,
-            indicatorPosition,
-            selectionIndicatorStyle,
-          ]}
-        >
+        {selected && (
+          <View
+            style={[
+              styles.selectionIndicator,
+              indicatorSize,
+              indicatorPosition,
+              selectionIndicatorStyle,
+            ]}
+          >
             {selectionIndicatorIcon}
-        </View>
-      )}
-    </TouchableOpacity>
+          </View>
+        )}
+      </TouchableOpacity>
+
+      {showName && <Text style={[styles.name, {width: iconSize.width}, nameStyle]}>{brand.name}</Text>}
+    </View>
   );
 };
 
-// Function to create themed styles
-const createStyles = (theme: ThemeType) => StyleSheet.create({
-  container: {
-    backgroundColor: theme.surface, // Use surface for background
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: theme.border, // Use border color
-    shadowColor: '#000000', // Keep shadow black for now
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  selectedContainer: {
-    borderColor: theme.primary, // Use primary for selected border
-    borderWidth: 2, // Keep border width for selected state
-  },
-  logo: {},
-  selectionIndicator: {
-    position: 'absolute',
-    backgroundColor: theme.primary, // Use primary for indicator background
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 2,
-  },
-  checkmark: { // Style is unused in current code, but if used:
-    width: '60%',
-    height: '60%',
-    // tintColor: theme.onPrimary, // Use onPrimary if checkmark is an icon/image
-  },
-});
+const createStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    wrapper: {
+      alignItems: "center",
+    },
+    container: {
+      backgroundColor: theme.surface,
+      justifyContent: "center",
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: theme.border,
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 2,
+    },
+    selectedContainer: {
+      borderColor: theme.primary,
+      borderWidth: 2,
+    },
+    selectionIndicator: {
+      position: "absolute",
+      backgroundColor: theme.primary,
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 2,
+    },
+    name: {
+      marginTop: 4,
+      color: theme.onSurface,
+      fontSize: 12,
+      textAlign: "center",
+    },
+  });
 
 export default BrandIcon;

package/src/components/Marquee/Marquee.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useMemo } from "react";
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  ViewStyle,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+  cancelAnimation,
+} from "react-native-reanimated";
+
+const DEFAULT_ANIMATION_SPEED_MS = 15000;
+
+type ReusableMarqueeProps<T> = {
+  data: T[];
+  renderItem: (item: T, index: number) => React.ReactElement;
+  itemWidth: number;
+  itemHeight: number;
+  itemSpacing: number;
+  animationSpeedMs?: number;
+  style?: ViewStyle
+  contentContainerStyle?: ViewStyle;
+};
+
+const ReusableMarquee = <T extends { id: string | number }>({
+  data: baseData,
+  renderItem,
+  itemWidth,
+  itemHeight,
+  itemSpacing,
+  animationSpeedMs = DEFAULT_ANIMATION_SPEED_MS,
+  style,
+  contentContainerStyle,
+}: ReusableMarqueeProps<T>): React.ReactElement | null => {
+  const translateX = useSharedValue(0);
+
+  // Memoize calculations that depend on props to avoid unnecessary recalculations
+  const { ONE_SET_WIDTH, DATA } = useMemo(() => {
+    if (!baseData || baseData.length === 0) {
+      return { ONE_SET_WIDTH: 0, DATA: [] };
+    }
+    const calculatedWidth = baseData.reduce(
+      (sum) => sum + itemWidth + itemSpacing,
+      0,
+    );
+    // Duplicate data for seamless looping
+    const duplicatedData = [...baseData, ...baseData];
+    return { ONE_SET_WIDTH: calculatedWidth, DATA: duplicatedData };
+  }, [baseData, itemWidth, itemSpacing]);
+
+  useEffect(() => {
+    if (DATA.length > 0 && ONE_SET_WIDTH > 0) {
+      translateX.value = 0; // Reset position when props change
+      const animation = withRepeat(
+        withTiming(-ONE_SET_WIDTH, {
+          duration: animationSpeedMs,
+          easing: Easing.linear,
+        }),
+        -1, // Infinite repeat
+        false, // Don't reverse
+      );
+      translateX.value = animation;
+
+      return () => {
+        cancelAnimation(translateX);
+      };
+    } else {
+      cancelAnimation(translateX);
+      translateX.value = 0;
+      return undefined;
+    }
+  }, [translateX, ONE_SET_WIDTH, DATA, animationSpeedMs]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: translateX.value }],
+    };
+  });
+
+  if (DATA.length === 0) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { height: itemHeight },
+        style,
+      ]}
+    >
+      {/* Animated container holds items and moves horizontally */}
+      <Animated.View
+        style={[
+          styles.animatedContainer,
+          { height: itemHeight },
+          animatedStyle,
+          contentContainerStyle,
+        ]}
+      >
+        {/* Map over the duplicated data */}
+        {DATA.map((item, index) => (
+          <View
+            key={`${item.id}-${index}`}
+            style={[
+              styles.itemWrapper,
+              {
+                width: itemWidth,
+                height: itemHeight,
+                marginRight: itemSpacing,
+              },
+            ]}
+          >
+            {renderItem(item, index)}
+          </View>
+        ))}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  animatedContainer: {
+    flexDirection: "row",
+  },
+  itemWrapper: {
+  },
+});
+
+export default ReusableMarquee;
+

package/src/components/Marquee/index.ts

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

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";