@towsila/expo-ui-library 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/ui/rating.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+interface RatingStarsProps {
+  rating: number;
+  size?: number;
+  color?: string;
+}
+
+export default function RatingStars({
+  rating,
+  size = 16,
+  color = "#F59E0B",
+}: RatingStarsProps) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
+      {[0, 1, 2, 3, 4].map((index) => {
+        let icon: React.ComponentProps<typeof Ionicons>["name"];
+
+        if (rating >= index + 1) {
+          icon = "star";
+        } else if (rating >= index + 0.5) {
+          icon = "star-half";
+        } else {
+          icon = "star-outline";
+        }
+
+        return (
+          <Ionicons
+            key={index}
+            name={icon}
+            size={size}
+            color={color}
+          />
+        );
+      })}
+    </View>
+  );
+}

package/src/components/ui/toast.tsx

@@ -26,7 +26,7 @@ export default function Toast({
 }: ToastProps) {
   const { colors } = useAppTheme();
 
-  const translateY = useRef(new Animated.Value(-120)).current;
+  const translateY = useRef(new Animated.Value(-200)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -48,7 +48,7 @@ export default function Toast({
     const timer = setTimeout(() => {
       Animated.parallel([
         Animated.timing(translateY, {
-          toValue: -120,
+          toValue: -200,
           duration: 250,
           useNativeDriver: true,
         }),
@@ -132,6 +132,7 @@ const styles = StyleSheet.create({
 
   container: {
     flexDirection:"row",
+    alignItems: "flex-start",
     gap:10,
     position: "absolute",
     top: 60,
@@ -156,5 +157,6 @@ const styles = StyleSheet.create({
   text: {
     fontFamily: Fonts.montserrat.semiBold,
     fontSize: textSize.sm,
+    flex: 1,
   },
 });

package/src/index.ts

@@ -60,4 +60,5 @@ export {default as WarningModel} from "./components/ui/warningModel";
 export {default as Toast} from "./components/ui/toast";
 export {default as AccountStatusScreen} from "./components/screens/AccountStatusScreen";
 export {sendEmail} from "./service/sendEmail";
-export {useToast} from "./hooks/useToast";
+export {useToast} from "./hooks/useToast";
+export {default as RatingStars} from "./components/ui/rating";