@umituz/react-native-gamification 1.2.1 → 1.3.0

package/LICENSE

@@ -22,3 +22,8 @@ SOFTWARE.
 
 
 
+
+
+
+
+

package/README.md

@@ -276,3 +276,8 @@ MIT
 
 
 
+
+
+
+
+

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@umituz/react-native-gamification",
-  "version": "1.2.1",
-  "description": "Comprehensive gamification system for React Native apps with achievements, points, levels, streaks, leaderboards, rewards, and progress tracking",
+  "version": "1.3.0",
+  "description": "Generic gamification system for React Native apps - achievements, points, levels, streaks with customizable UI components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit",
-    "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'"
+    "lint": "tsc --noEmit"
   },
   "keywords": [
     "react-native",
@@ -17,10 +15,8 @@
     "points",
     "levels",
     "streaks",
-    "leaderboards",
-    "rewards",
     "progress",
-    "gameification"
+    "rewards"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -29,19 +25,19 @@
     "url": "https://github.com/umituz/react-native-gamification"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.21.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "@umituz/react-native-storage": "latest",
     "zustand": ">=4.0.0"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@types/node": "^25.0.2",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
-    "typescript": "^5.3.3"
-  },
-  "dependencies": {
+    "typescript": "^5.3.3",
     "zustand": "^4.5.0"
   },
   "publishConfig": {
@@ -53,5 +49,3 @@
     "LICENSE"
   ]
 }
-
-

package/src/components/AchievementCard.tsx

@@ -0,0 +1,142 @@
+/**
+ * AchievementCard Component
+ * Displays achievement - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface AchievementCardProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  isUnlocked: boolean;
+  progress: number;
+  // Customization
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  progressBarStyle?: ViewStyle;
+  // Colors
+  unlockedColor?: string;
+  lockedColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const AchievementCard: React.FC<AchievementCardProps> = ({
+  title,
+  description,
+  icon,
+  isUnlocked,
+  progress,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  progressBarStyle,
+  unlockedColor = "#4CAF50",
+  lockedColor = "#666666",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  const accentColor = isUnlocked ? unlockedColor : lockedColor;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor, borderColor: `${accentColor}40` },
+        containerStyle,
+      ]}
+    >
+      <View style={[styles.iconContainer, { backgroundColor: `${accentColor}20` }]}>
+        {icon}
+      </View>
+
+      <View style={styles.content}>
+        <Text
+          style={[
+            styles.title,
+            { color: isUnlocked ? textColor : subtextColor },
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
+        <Text style={[styles.description, { color: subtextColor }, descriptionStyle]}>
+          {description}
+        </Text>
+
+        {!isUnlocked && (
+          <View style={[styles.progressBar, { backgroundColor: `${lockedColor}40` }, progressBarStyle]}>
+            <View
+              style={[
+                styles.progressFill,
+                { width: `${progress}%`, backgroundColor: accentColor },
+              ]}
+            />
+          </View>
+        )}
+      </View>
+
+      {isUnlocked && (
+        <View style={[styles.checkmark, { backgroundColor: unlockedColor }]}>
+          <Text style={styles.checkmarkText}>✓</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 12,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  progressBar: {
+    height: 4,
+    borderRadius: 2,
+    marginTop: 8,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  checkmarkText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+});

package/src/components/AchievementToast.tsx

@@ -0,0 +1,122 @@
+/**
+ * AchievementToast Component
+ * Shows achievement unlock notification - all text via props
+ */
+
+import React, { useEffect, useRef } from "react";
+import { View, Text, StyleSheet, Animated, type ViewStyle, type TextStyle } from "react-native";
+
+export interface AchievementToastProps {
+  visible: boolean;
+  title: string;
+  label: string; // e.g., "Achievement Unlocked!" - from app translations
+  icon: React.ReactNode;
+  onDismiss: () => void;
+  duration?: number;
+  // Customization
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  titleStyle?: TextStyle;
+  // Colors
+  backgroundColor?: string;
+  textColor?: string;
+  labelColor?: string;
+}
+
+export const AchievementToast: React.FC<AchievementToastProps> = ({
+  visible,
+  title,
+  label,
+  icon,
+  onDismiss,
+  duration = 3000,
+  containerStyle,
+  labelStyle,
+  titleStyle,
+  backgroundColor = "#FFD700",
+  textColor = "#000000",
+  labelColor = "#00000080",
+}) => {
+  const translateY = useRef(new Animated.Value(-100)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.sequence([
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true,
+        }),
+        Animated.delay(duration),
+        Animated.timing(translateY, {
+          toValue: -100,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        onDismiss();
+      });
+    }
+  }, [visible, duration, onDismiss, translateY]);
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { transform: [{ translateY }] },
+        containerStyle,
+      ]}
+    >
+      <View style={[styles.toast, { backgroundColor }]}>
+        <View style={styles.iconContainer}>{icon}</View>
+        <View style={styles.content}>
+          <Text style={[styles.label, { color: labelColor }, labelStyle]}>
+            {label}
+          </Text>
+          <Text style={[styles.title, { color: textColor }, titleStyle]}>
+            {title}
+          </Text>
+        </View>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 60,
+    left: 16,
+    right: 16,
+    zIndex: 1000,
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 16,
+    borderRadius: 16,
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 2,
+  },
+});

package/src/components/LevelProgress.tsx

@@ -0,0 +1,129 @@
+/**
+ * LevelProgress Component
+ * Displays level and progress - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface LevelProgressProps {
+  level: number;
+  points: number;
+  levelTitle: string;
+  pointsToNext: number;
+  progress: number;
+  showPoints?: boolean;
+  // Customization
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  progressBarStyle?: ViewStyle;
+  progressFillStyle?: ViewStyle;
+  badgeStyle?: ViewStyle;
+  badgeTextStyle?: TextStyle;
+  // Colors (design system integration)
+  primaryColor?: string;
+  secondaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const LevelProgress: React.FC<LevelProgressProps> = ({
+  level,
+  points,
+  levelTitle,
+  pointsToNext,
+  progress,
+  showPoints = true,
+  containerStyle,
+  titleStyle,
+  subtitleStyle,
+  progressBarStyle,
+  progressFillStyle,
+  badgeStyle,
+  badgeTextStyle,
+  primaryColor = "#FFD700",
+  secondaryColor = "#2A2A2A",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      <View style={styles.header}>
+        <View style={styles.titleSection}>
+          <Text style={[styles.levelTitle, { color: textColor }, titleStyle]}>
+            {levelTitle}
+          </Text>
+          {showPoints && (
+            <Text style={[styles.subtitle, { color: subtextColor }, subtitleStyle]}>
+              {points} / {points + pointsToNext}
+            </Text>
+          )}
+        </View>
+
+        <View style={[styles.badge, { backgroundColor: `${primaryColor}20`, borderColor: `${primaryColor}40` }, badgeStyle]}>
+          <Text style={[styles.badgeText, { color: primaryColor }, badgeTextStyle]}>
+            {level}
+          </Text>
+        </View>
+      </View>
+
+      <View style={[styles.progressBar, { backgroundColor: secondaryColor }, progressBarStyle]}>
+        <View
+          style={[
+            styles.progressFill,
+            { width: `${Math.min(100, progress)}%`, backgroundColor: primaryColor },
+            progressFillStyle,
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 16,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  titleSection: {
+    flex: 1,
+  },
+  levelTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+  },
+  subtitle: {
+    fontSize: 14,
+    marginTop: 2,
+  },
+  badge: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+  },
+  badgeText: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  progressBar: {
+    height: 8,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 4,
+  },
+});

package/src/components/PointsBadge.tsx

@@ -0,0 +1,60 @@
+/**
+ * PointsBadge Component
+ * Displays points with optional icon - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface PointsBadgeProps {
+  points: number;
+  icon?: React.ReactNode;
+  // Customization
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  // Colors
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+}
+
+export const PointsBadge: React.FC<PointsBadgeProps> = ({
+  points,
+  icon,
+  containerStyle,
+  textStyle,
+  backgroundColor = "#FFD70020",
+  textColor = "#FFD700",
+  borderColor = "#FFD70040",
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor, borderColor },
+        containerStyle,
+      ]}
+    >
+      {icon}
+      <Text style={[styles.text, { color: textColor }, textStyle]}>
+        {points}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    borderWidth: 1,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

package/src/components/StreakDisplay.tsx

@@ -0,0 +1,119 @@
+/**
+ * StreakDisplay Component
+ * Displays streak information - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface StreakDisplayProps {
+  current: number;
+  longest: number;
+  currentLabel: string; // e.g., "Current Streak"
+  bestLabel: string; // e.g., "Best"
+  daysLabel: string; // e.g., "days"
+  icon?: React.ReactNode;
+  // Customization
+  containerStyle?: ViewStyle;
+  numberStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  // Colors
+  primaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const StreakDisplay: React.FC<StreakDisplayProps> = ({
+  current,
+  longest,
+  currentLabel,
+  bestLabel,
+  daysLabel,
+  icon,
+  containerStyle,
+  numberStyle,
+  labelStyle,
+  primaryColor = "#FF6B35",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      <View style={styles.mainStreak}>
+        {icon && <View style={styles.iconContainer}>{icon}</View>}
+        <View style={styles.streakInfo}>
+          <Text style={[styles.number, { color: primaryColor }, numberStyle]}>
+            {current}
+          </Text>
+          <Text style={[styles.label, { color: subtextColor }, labelStyle]}>
+            {daysLabel}
+          </Text>
+        </View>
+        <Text style={[styles.currentLabel, { color: textColor }]}>
+          {currentLabel}
+        </Text>
+      </View>
+
+      <View style={[styles.bestStreak, { backgroundColor: `${primaryColor}20` }]}>
+        <Text style={[styles.bestLabel, { color: subtextColor }]}>
+          {bestLabel}
+        </Text>
+        <Text style={[styles.bestNumber, { color: primaryColor }]}>
+          {longest}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  mainStreak: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  streakInfo: {
+    alignItems: "center",
+  },
+  number: {
+    fontSize: 32,
+    fontWeight: "bold",
+  },
+  label: {
+    fontSize: 12,
+    textTransform: "uppercase",
+  },
+  currentLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  bestStreak: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  bestLabel: {
+    fontSize: 11,
+    textTransform: "uppercase",
+  },
+  bestNumber: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Gamification Components
+ * All text via props - NO hardcoded strings
+ */
+
+export { LevelProgress, type LevelProgressProps } from "./LevelProgress";
+export { PointsBadge, type PointsBadgeProps } from "./PointsBadge";
+export { AchievementCard, type AchievementCardProps } from "./AchievementCard";
+export { AchievementToast, type AchievementToastProps } from "./AchievementToast";
+export { StreakDisplay, type StreakDisplayProps } from "./StreakDisplay";