{"id":1756,"date":"2025-07-25T05:09:02","date_gmt":"2025-07-25T05:09:02","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1756"},"modified":"2025-07-25T05:17:54","modified_gmt":"2025-07-25T05:17:54","slug":"flmdivider","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/25\/flmdivider\/","title":{"rendered":"\uad6c\ubd84\uc120\/FlmDivider"},"content":{"rendered":"\n

\ud83c\udf0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot
\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive :
https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link<\/a><\/p>\n\n\n\n

1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Instal<\/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>
— thickness : \uad6c\ubd84\uc120 \ub450\uaed8 \/ divider thickness
— spacing : \uc704,\uc544\ub798 \uc5ec\ubc31 \/ Top and bottom margins<\/p>\n\n\n\n
1)\uac00\ub85c \/ Horizontal<\/p>\n\n\n\n
 <FlmDivider color=\"#00bcd4\" thickness={2} spacing={25} \/><\/code><\/pre>\n\n\n\n
2)\uc138\ub85c \/ Vertical<\/p>\n\n\n\n
    <FlmDivider\n        orientation=\"vertical\" \/\/ \uc138\ub85c \uad6c\ubd84\uc120\uc73c\ub85c \uc124\uc815 \/ Set as vertical divider\n        color=\"#a5d6a7\"\n        thickness={4}\n        spacing={10}\n        style={{ height: \"80%\", borderRadius: 2 }}\n    \/><\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n
\/\/ FlmBannerApp.js\nimport { SafeAreaView, ScrollView, View, StyleSheet } from \"react-native\";\nimport { FlmText, FlmDivider } from \"react-native-freelifemakers-ui\";\n\nconst FlmDividerApp = () => {\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView contentContainerStyle={styles.scrollViewContent}>\n        <FlmText style={styles.heading}>\uad6c\ubd84\uc120 \uc0ac\uc6a9 \uc608\uc81c \/ FlmDivider<\/FlmText>\n        <FlmText style={styles.heading}>Example of using a FlmDivider<\/FlmText>\n\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          \uac00\ub85c \uad6c\ubd84\uc120 \/ Horizontal FlmDivider\n        <\/FlmText>\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          Example of using FlmDivider\n        <\/FlmText>\n\n        {\/* \uac00\ub85c \uad6c\ubd84\uc120 \uc608\uc81c 1 \/ Example of using FlmDivider 1 *\/}\n        <FlmDivider color=\"#00bcd4\" thickness={2} spacing={25} \/>\n\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          \uac00\ub85c \uad6c\ubd84\uc1202 \/ Horizontal FlmDivider2\n        <\/FlmText>\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          Example of using FlmDivider2\n        <\/FlmText>\n\n        {\/* \uac00\ub85c \uad6c\ubd84\uc120 \uc608\uc81c 2 \/ Example of using FlmDivider 2 *\/}\n        <FlmDivider\n          color=\"#ffeb3b\"\n          thickness={3}\n          spacing={30}\n          style={{ borderRadius: 5 }}\n        \/>\n\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          \uc138\ub85c \uad6c\ubd84\uc120 \uc608\uc81c \/ Vertical FlmDivider\n        <\/FlmText>\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          Example of using a Vertical FlmDivider\n        <\/FlmText>\n\n        {\/* \uc138\ub85c \uad6c\ubd84\uc120 \uc608\uc81c \ucd94\uac00 \/ Example of using Vertical FlmDivider *\/}\n        <View style={styles.verticalDividerContainer}>\n          <View>\n            {\/* \uc67c\ucabd \ud14d\uc2a4\ud2b8\ub4e4\uc744 \ubb36\uc5b4\uc8fc\ub294 View \ucd94\uac00 (\uc120\ud0dd \uc0ac\ud56d\uc774\uc9c0\ub9cc \ub808\uc774\uc544\uc6c3 \uad00\ub9ac\uc5d0 \uc720\uc6a9) *\/}\n            {\/* Add a View to group the left texts (optional, but useful for managing layout) *\/}\n            <FlmText category=\"h6\">\uc67c\ucabd \ub0b4\uc6a9<\/FlmText>\n            <FlmText category=\"h6\">Left Content<\/FlmText>\n          <\/View>\n          <FlmDivider\n            orientation=\"vertical\" \/\/ \uc138\ub85c \uad6c\ubd84\uc120\uc73c\ub85c \uc124\uc815 \/ Set as vertical divider\n            color=\"#a5d6a7\"\n            thickness={4}\n            spacing={10}\n            style={{ height: \"80%\", borderRadius: 2 }} \/\/ \ubd80\ubaa8 View\uc758 \ub192\uc774\uc5d0 \ub9de\ucdb0 \ub192\uc774 \uc124\uc815 \/ Set height to match parent View's height\n          \/>\n          <View>\n            <FlmText category=\"h6\">\uc624\ub978\ucabd \ub0b4\uc6a9<\/FlmText>\n            <FlmText category=\"h6\">Right Content<\/FlmText>\n          <\/View>\n        <\/View>\n\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          \ub9c8\uc9c0\ub9c9 \uac00\ub85c \uad6c\ubd84\uc120\n        <\/FlmText>\n        <FlmText category=\"subtitle\" style={{ textAlign: \"center\" }}>\n          Final Horizontal FlmDivider\n        <\/FlmText>\n        {\/* \ub9c8\uc9c0\ub9c9 \uac00\ub85c \uad6c\ubd84\uc120 \/ last horizontal divider *\/}\n        <View style={{ width: \"100%\", alignItems: \"center\" }}>\n          <FlmDivider\n            color=\"#673ab7\"\n            thickness={1}\n            spacing={40}\n            style={{ width: \"80%\", alignSelf: \"center\" }} \/\/ FlmDivider \uc790\uccb4\uc758 \ub108\ube44\ub294 \uc720\uc9c0 \/ The width of the FlmDivider itself is maintained\n          \/>\n        <\/View>\n        <View style={{ height: 50 }} \/>\n      <\/ScrollView>\n    <\/SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n  },\n  scrollViewContent: {\n    paddingVertical: 20,\n    alignItems: \"center\",\n  },\n  heading: {\n    fontSize: 24,\n    fontWeight: \"bold\",\n    marginBottom: 30,\n    textAlign: \"center\",\n  },\n  content: {\n    fontSize: 16,\n    textAlign: \"center\",\n    marginHorizontal: 20,\n    lineHeight: 24,\n  },\n  verticalDividerContainer: {\n    flexDirection: \"row\", \/\/ \uac00\ub85c\ub85c \uc815\ub82c\ud558\uc5ec \uc138\ub85c \uad6c\ubd84\uc120\uacfc \ub0b4\uc6a9\uc744 \ubc30\uce58 \/ Align vertical dividers and content horizontally\n    alignItems: \"center\", \/\/ \uc138\ub85c \uc911\uc559 \uc815\ub82c \/ vertical center alignment\n    justifyContent: \"center\", \/\/ \uac00\ub85c \uc911\uc559 \uc815\ub82c \/ horizontal center alignment\n    height: 150, \/\/ \uc138\ub85c \uad6c\ubd84\uc120\uc774 \ubcf4\uc77c \uc218 \uc788\ub3c4\ub85d \ucee8\ud14c\uc774\ub108 \ub192\uc774 \uc9c0\uc815 \/ Specify container height so that vertical dividers are visible\n    width: \"90%\",\n    marginVertical: 20,\n    borderWidth: 1,\n    borderColor: \"#ccc\",\n    borderRadius: 10,\n    padding: 10,\n  },\n});\n\nexport default FlmDividerApp;\n<\/code><\/pre>\n\n\n\n
4.\uc2a4\ud06c\ub9b0\uc0f7 \/ Screenshot<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83c\udf0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link 1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Instal 2.\uc0ac\uc6a9\ud558\uae30 \/ Usage— thickness : \uad6c\ubd84\uc120 \ub450\uaed8 \/ divider thickness— spacing : \uc704,\uc544\ub798 \uc5ec\ubc31 \/ Top and bottom margins 1)\uac00\ub85c \/ Horizontal 2)\uc138\ub85c \/ Vertical 3.\uc608\uc81c\ucf54\ub4dc \/ Example code 4.\uc2a4\ud06c\ub9b0\uc0f7 \/ Screenshot<\/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-1756","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\/1756","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=1756"}],"version-history":[{"count":9,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1756\/revisions"}],"predecessor-version":[{"id":1767,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1756\/revisions\/1767"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}