{"id":1808,"date":"2025-08-11T01:41:19","date_gmt":"2025-08-11T01:41:19","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1808"},"modified":"2025-08-11T01:48:37","modified_gmt":"2025-08-11T01:48:37","slug":"flmbadge","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/08\/11\/flmbadge\/","title":{"rendered":"\ubc30\uc9c0\/FlmBadge"},"content":{"rendered":"\n

1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install<\/strong><\/p>\n\n\n\n

npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n
2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong>
1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module<\/p>\n\n\n\n
import { FlmBadge, FlmText, FlmButton } from \"react-native-freelifemakers-ui\";<\/code><\/pre>\n\n\n\n
2)\uc0ac\uc6a9\ud558\uae30 \/ Usage
— \uae30\ubcf8 \/ Default<\/p>\n\n\n\n
 <FlmBadge children=\"5\" \/><\/code><\/pre>\n\n\n\n
— \uc0ac\uc6a9\uc790\uc815\uc758 \/ Custom<\/p>\n\n\n\n
<FlmBadge\n            children=\"99+\"\n            size={34}\n            textStyle={{fontSize: 10}}\n            backgroundColor=\"#10b981\"\n        \/><\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport {StyleSheet, View, Text} from 'react-native';\nimport {FlmBadge, FlmText, FlmButton} from 'react-native-freelifemakers-ui';\n\n\/\/ FlmBadge \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9 \uc608\uc2dc\n\/\/ This is an example of how to use the FlmBadge component.\nconst FlmBadgeApp = () => {\n  return (\n    <View style={styles.container}>\n      <FlmText category=\"subtitle\" style={{marginBottom: 10}}>\n        FlmBadge \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9 \uc608\uc81c \/ Example of using the FlmBadge component\n      <\/FlmText>\n      <FlmText category=\"subtitle\" style={{marginBottom: 10}}>\n        \ub2e4\uc591\ud55c \ud06c\uae30\uc640 \uc0c9\uc0c1\uc758 \ubc30\uc9c0\ub97c \ud45c\uc2dc\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. \/ Shows how to\n        display badges of different sizes and colors.\n      <\/FlmText>\n\n      {\/* 1. \uae30\ubcf8 \uc0ac\uc6a9 \uc608\uc2dc \/ Basic usage example *\/}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>\ub2e8\ub3c5 \ubc30\uc9c0 \/ sole badge<\/Text>\n        <View style={styles.exampleRow}>\n          <FlmBadge children=\"5\" \/>\n          <FlmBadge\n            children=\"99+\"\n            size={34}\n            textStyle={{fontSize: 10}}\n            backgroundColor=\"#10b981\"\n          \/>\n          <FlmBadge\n            children=\"New\"\n            size={38}\n            textStyle={{fontSize: 10}}\n            backgroundColor=\"#f97316\"\n          \/>\n        <\/View>\n      <\/View>\n\n      {\/* 2. \uc544\uc774\ucf58 \uc606\uc5d0 \ubc30\uce58\ud558\uc5ec \uc54c\ub9bc \ud45c\uc2dc\ud558\ub294 \uc608\uc2dc *\/}\n      {\/* 2. Example of displaying notifications by placing them next to the icon *\/}\n      <View style={styles.section}>\n        <Text style={styles.sectionTitle}>\uc54c\ub9bc \uc544\uc774\ucf58 \/ Notification icon<\/Text>\n        <View style={styles.exampleRow}>\n          {\/* \uc54c\ub9bc \uc544\uc774\ucf58 \uc5ed\ud560\uc744 \ud558\ub294 View *\/}\n          {\/* View that acts as a notification icon *\/}\n          <View style={styles.iconWrapper}>\n            <Text style={styles.iconText}>\ud83d\udd14<\/Text>\n            {\/* \ubc30\uc9c0\ub97c \uc808\ub300 \uc704\uce58\ub85c \uc544\uc774\ucf58\uc758 \uc624\ub978\ucabd \uc0c1\ub2e8\uc5d0 \ubc30\uce58\ud569\ub2c8\ub2e4. *\/}\n            {\/* Position the badge absolutely on the top-right of the icon. *\/}\n            <FlmBadge children=\"1\" style={styles.badgeAbsolute} \/>\n          <\/View>\n          <View style={styles.iconWrapper}>\n            <FlmText style={styles.iconText}>\ud83d\udce7<\/FlmText>\n            <FlmBadge\n              children=\"12\"\n              size={24}\n              textStyle={{fontSize: 10}}\n              style={styles.badgeAbsolute}\n            \/>\n          <\/View>\n        <\/View>\n      <\/View>\n\n      {\/* 3. `visible` prop\uc744 \uc0ac\uc6a9\ud55c \ud45c\uc2dc\/\uc228\uae40 \uc608\uc2dc *\/}\n      {\/* 3. Example of showing\/hiding using the `visible` prop *\/}\n      <View style={styles.section}>\n        <FlmText style={styles.sectionTitle}>\ud45c\uc2dc\/\uc228\uae40 - Show\/Hide<\/FlmText>\n        <View style={styles.exampleRow}>\n          <FlmBadge children=\"2\" visible={true} \/>\n          <FlmBadge children=\"1\" visible={false} \/>\n          <FlmText style={styles.smallText}>- \ubcf4\uc774\uc9c0 \uc54a\uc74c \/ invisible<\/FlmText>\n        <\/View>\n      <\/View>\n    <\/View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    backgroundColor: '#fff',\n  },\n  section: {\n    marginBottom: 30,\n  },\n  sectionTitle: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  exampleRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 20, \/\/ \ud56d\ubaa9 \uac04\uc758 \uac04\uaca9\n  },\n  iconWrapper: {\n    position: 'relative',\n    padding: 10,\n  },\n  iconText: {\n    fontSize: 30,\n  },\n  badgeAbsolute: {\n    position: 'absolute',\n    top: -5,\n    right: -5,\n  },\n  smallText: {\n    fontSize: 14,\n    color: '#6b7280',\n  },\n});\n\nexport default FlmBadgeApp;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install 2.\uc0ac\uc6a9\ud558\uae30 \/ Usage1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module 2)\uc0ac\uc6a9\ud558\uae30 \/ Usage— \uae30\ubcf8 \/ Default — \uc0ac\uc6a9\uc790\uc815\uc758 \/ Custom 3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15,1],"tags":[],"class_list":["post-1808","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1808"}],"version-history":[{"count":5,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1808\/revisions"}],"predecessor-version":[{"id":1814,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1808\/revisions\/1814"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}