react-native-styled-badges 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Lachlan Crawford
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# React Native Badges
+
+`BadgeStack` is a customizable React Native component that allows you to stack multiple badges in any corner of a child view. It supports animation and styling options.
+
+## ✨ Features
+
+- Display multiple badges in a corner of any wrapped component.
+- Customize badge colors and text colors.
+- Optional fade-in animation.
+- Supports positioning in all four corners.
+
+## 📦 Installation
+
+Copy the `BadgeStack.tsx` component into your project. It uses only built-in React Native libraries and requires no external dependencies.
+
+## 🔧 Props
+
+| Prop         | Type             | Default     | Description |
+|--------------|------------------|-------------|-------------|
+| `badges`     | `Badge[]`        | **Required**| Array of badge objects (`label`, `color`, `labelColor`) |
+| `position`   | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | Corner in which badges should appear |
+| `animate`    | `boolean`        | `false`     | Whether badges should fade in |
+| `badgeStyle` | `ViewStyle`      | `undefined` | Style override for badge container |
+| `textStyle`  | `TextStyle`      | `undefined` | Style override for badge text |
+| `children`   | `ReactNode`      | **Required**| Child component to wrap |
+
+## 🧩 Badge Type
+
+```ts
+type Badge = {
+  label: string;
+  color?: string;       // Background color of badge
+  labelColor?: string;  // Text color of badge
+};
+```
+
+
+## 🚀 Usage
+```
+import React from 'react';
+import { View, Text } from 'react-native';
+import BadgeStack from './BadgeStack';
+
+const MyComponent = () => {
+  const badges = [
+    { label: 'New', color: '#28a745' },
+    { label: 'Hot', color: '#dc3545', labelColor: '#fff' },
+  ];
+
+  return (
+    <BadgeStack badges={badges} position="top-left" animate>
+      <View style={{ width: 100, height: 100, backgroundColor: '#ddd' }}>
+        <Text>Content</Text>
+      </View>
+    </BadgeStack>
+  );
+};
+
+export default MyComponent;
+```
+## 🖌️ Customization
+You can customize the badges by using the badgeStyle and textStyle props to override padding, font size, border radius, etc.
+
+## 🎬 Animation
+When the animate prop is set to true, each badge fades into view using Animated.View.
+
+## 📄 License
+This component is open for modification and use in any React Native project. No specific license is applied. Add your own if needed.

package/lib/module/BadgeStack/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+const BadgeStack = ({
+  badges,
+  position = 'top-right',
+  animate = false,
+  badgeStyle,
+  textStyle,
+  children
+}) => {
+  const positionStyle = getPositionStyle(position);
+  const renderBadges = () => {
+    return badges.map((badge, index) => {
+      const offset = index * 22;
+      const animStyle = animate ? {
+        opacity: fadeInAnim
+      } : {};
+      return /*#__PURE__*/React.createElement(Animated.View, {
+        key: badge.label + index,
+        style: [styles.badge, {
+          top: position.includes('top') ? offset : undefined,
+          bottom: position.includes('bottom') ? offset : undefined,
+          backgroundColor: badge.color || '#007AFF'
+        }, badgeStyle, animStyle]
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: [styles.badgeText, textStyle, {
+          color: badge.labelColor || "#fff",
+          textDecorationStyle: 'dotted'
+        }]
+      }, badge.label));
+    });
+  };
+
+  // Animation (optional)
+  const fadeInAnim = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (animate) {
+      Animated.timing(fadeInAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [animate]);
+  const styles = StyleSheet.create({
+    container: {
+      position: 'relative'
+    },
+    stackContainer: {
+      position: 'absolute',
+      zIndex: 10,
+      elevation: 5
+    },
+    badge: {
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      borderRadius: 12,
+      marginVertical: 1,
+      alignSelf: 'flex-start',
+      elevation: 5
+    },
+    badgeText: {
+      color: '#fff',
+      fontSize: 10,
+      fontWeight: '600'
+    }
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, children, /*#__PURE__*/React.createElement(View, {
+    style: [styles.stackContainer, positionStyle]
+  }, renderBadges()));
+};
+function getPositionStyle(position) {
+  const style = {
+    position: 'absolute'
+  };
+  if (position.includes('top')) style.top = 0;
+  if (position.includes('bottom')) style.bottom = 0;
+  if (position.includes('left')) style.left = 0;
+  if (position.includes('right')) style.right = 0;
+  return style;
+}
+export default BadgeStack;
+//# sourceMappingURL=index.js.map

package/lib/module/BadgeStack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","Animated","BadgeStack","badges","position","animate","badgeStyle","textStyle","children","positionStyle","getPositionStyle","renderBadges","map","badge","index","offset","animStyle","opacity","fadeInAnim","createElement","key","label","style","styles","top","includes","undefined","bottom","backgroundColor","color","badgeText","labelColor","textDecorationStyle","useRef","Value","current","useEffect","timing","toValue","duration","useNativeDriver","start","create","container","stackContainer","zIndex","elevation","paddingHorizontal","paddingVertical","borderRadius","marginVertical","alignSelf","fontSize","fontWeight","left","right"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\r\nimport {\r\n  View,\r\n  Text,\r\n  StyleSheet,\r\n  Animated,\r\n} from 'react-native';\r\n\r\nimport type { ViewStyle, TextStyle } from 'react-native';\r\ntype Badge = {\r\n  label: string;\r\n  color?: string; // Named color or hex\r\n  labelColor?: string; // Named color or hex\r\n};\r\n\r\ntype Position =\r\n  | 'top-right'\r\n  | 'top-left'\r\n  | 'bottom-right'\r\n  | 'bottom-left';\r\n\r\ntype Props = {\r\n  badges: Badge[];\r\n  position?: Position;\r\n  animate?: boolean;\r\n  badgeStyle?: ViewStyle;\r\n  textStyle?: TextStyle;\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst BadgeStack: React.FC<Props> = ({\r\n  badges,\r\n  position = 'top-right',\r\n  animate = false,\r\n  badgeStyle,\r\n  textStyle,\r\n  children,\r\n}) => {\r\n  const positionStyle = getPositionStyle(position);\r\n\r\n  const renderBadges = () => {\r\n    return badges.map((badge, index) => {\r\n      const offset = index * 22;\r\n      const animStyle = animate ? { opacity: fadeInAnim } : {};\r\n      return (\r\n        <Animated.View\r\n          key={badge.label + index}\r\n          style={[\r\n            styles.badge,\r\n            {\r\n              top: position.includes('top') ? offset : undefined,\r\n              bottom: position.includes('bottom') ? offset : undefined,\r\n              backgroundColor: badge.color || '#007AFF',\r\n              \r\n            },\r\n            badgeStyle,\r\n            animStyle,\r\n          ]}\r\n        >\r\n          <Text style={[styles.badgeText, textStyle,{color:badge.labelColor ||\"#fff\",textDecorationStyle:'dotted'}]}>{badge.label}</Text>\r\n        </Animated.View>\r\n      );\r\n    });\r\n  };\r\n\r\n  // Animation (optional)\r\n  const fadeInAnim = React.useRef(new Animated.Value(0)).current;\r\n  React.useEffect(() => {\r\n    if (animate) {\r\n      Animated.timing(fadeInAnim, {\r\n        toValue: 1,\r\n        duration: 500,\r\n        useNativeDriver: true,\r\n      }).start();\r\n    }\r\n  }, [animate]);\r\n\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    position: 'relative',\r\n  },\r\n  stackContainer: {\r\n    position: 'absolute',\r\n    zIndex: 10,\r\n    elevation: 5,\r\n  },\r\n  badge: {\r\n    paddingHorizontal: 8,\r\n    paddingVertical: 3,\r\n    borderRadius: 12,\r\n    marginVertical: 1,\r\n    alignSelf: 'flex-start',\r\n    elevation: 5,\r\n  },\r\n  badgeText: {\r\n    color: '#fff',\r\n    fontSize: 10,\r\n    fontWeight: '600',\r\n  },\r\n});\r\n\r\n\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n      {children}\r\n      <View style={[styles.stackContainer, positionStyle]}>\r\n        {renderBadges()}\r\n      </View>\r\n    </View>\r\n  );\r\n};\r\n\r\nfunction getPositionStyle(position: Position): ViewStyle {\r\n  const style: ViewStyle = { position: 'absolute' };\r\n  if (position.includes('top')) style.top = 0;\r\n  if (position.includes('bottom')) style.bottom = 0;\r\n  if (position.includes('left')) style.left = 0;\r\n  if (position.includes('right')) style.right = 0;\r\n  return style;\r\n}\r\n\r\n\r\n\r\nexport default BadgeStack;\r\n"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,2 @@
+export { default as BadgeStack } from '../src/BadgeStack/index';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","BadgeStack"],"sources":["index.tsx"],"sourcesContent":["export {default as BadgeStack} from '../src/BadgeStack/index';"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAU,QAAO,yBAAyB","ignoreList":[]}

package/package.json

@@ -0,0 +1,152 @@
+{
+  "name": "react-native-styled-badges",
+  "version": "0.1.0",
+  "description": "A clean badge system without layout bugs",
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-badges-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/InDataStar/react-native-badges.git"
+  },
+  "author": "Lachlan Crawford <crawfordlp1@gmail.com> (https://github.com/InDataStar)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/InDataStar/react-native-badges/issues"
+  },
+  "homepage": "https://github.com/InDataStar/react-native-badges#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-native": "0.79.4",
+    "react-native-builder-bob": "^0.18.3",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.49.3"
+  }
+}

package/src/BadgeStack/index.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+
+import type { ViewStyle, TextStyle } from 'react-native';
+type Badge = {
+  label: string;
+  color?: string; // Named color or hex
+  labelColor?: string; // Named color or hex
+};
+
+type Position =
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-left';
+
+type Props = {
+  badges: Badge[];
+  position?: Position;
+  animate?: boolean;
+  badgeStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  children: React.ReactNode;
+};
+
+const BadgeStack: React.FC<Props> = ({
+  badges,
+  position = 'top-right',
+  animate = false,
+  badgeStyle,
+  textStyle,
+  children,
+}) => {
+  const positionStyle = getPositionStyle(position);
+
+  const renderBadges = () => {
+    return badges.map((badge, index) => {
+      const offset = index * 22;
+      const animStyle = animate ? { opacity: fadeInAnim } : {};
+      return (
+        <Animated.View
+          key={badge.label + index}
+          style={[
+            styles.badge,
+            {
+              top: position.includes('top') ? offset : undefined,
+              bottom: position.includes('bottom') ? offset : undefined,
+              backgroundColor: badge.color || '#007AFF',
+              
+            },
+            badgeStyle,
+            animStyle,
+          ]}
+        >
+          <Text style={[styles.badgeText, textStyle,{color:badge.labelColor ||"#fff",textDecorationStyle:'dotted'}]}>{badge.label}</Text>
+        </Animated.View>
+      );
+    });
+  };
+
+  // Animation (optional)
+  const fadeInAnim = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (animate) {
+      Animated.timing(fadeInAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [animate]);
+
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  stackContainer: {
+    position: 'absolute',
+    zIndex: 10,
+    elevation: 5,
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 12,
+    marginVertical: 1,
+    alignSelf: 'flex-start',
+    elevation: 5,
+  },
+  badgeText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '600',
+  },
+});
+
+
+
+  return (
+    <View style={styles.container}>
+      {children}
+      <View style={[styles.stackContainer, positionStyle]}>
+        {renderBadges()}
+      </View>
+    </View>
+  );
+};
+
+function getPositionStyle(position: Position): ViewStyle {
+  const style: ViewStyle = { position: 'absolute' };
+  if (position.includes('top')) style.top = 0;
+  if (position.includes('bottom')) style.bottom = 0;
+  if (position.includes('left')) style.left = 0;
+  if (position.includes('right')) style.right = 0;
+  return style;
+}
+
+
+
+export default BadgeStack;

package/src/index.tsx

@@ -0,0 +1 @@
+export {default as BadgeStack} from '../src/BadgeStack/index';