{"id":1569,"date":"2025-06-20T05:27:21","date_gmt":"2025-06-20T05:27:21","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1569"},"modified":"2025-06-20T05:34:19","modified_gmt":"2025-06-20T05:34:19","slug":"flmcheckbox","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/06\/20\/flmcheckbox\/","title":{"rendered":"\uccb4\ud06c\ubc15\uc2a4\/FlmCheckBox"},"content":{"rendered":"\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><\/p>\n\n\n\n
import {FlmCheckBox, FlmText} from 'react-native-freelifemakers-ui';<\/code><\/pre>\n\n\n\n
— \ub450 \uac1c\uc758 \ub77c\ub514\uc624 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.
The basic code using two checkbox buttons is written as follows:<\/p>\n\n\n\n
          <FlmCheckBox\n            options={[\n              {label: '\uac00\uc871\/family', value: 'family'},\n              {label: '\ucf54\uba54\ub514\/comedy', value: 'drama'},\n            ]}\n            initialValues={['family']}\n            direction=\"vertical\"\n            onValueChange={setSelectedMovieTypes}\n          \/><\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong>
-\uc544\ub798\ub294 Expo\uc5d0\uc11c \uc2e4\ud589\uac00\ub2a5\ud55c \ucf54\ub4dc \uc608\uc81c \uc785\ub2c8\ub2e4.
Below is an example of code that can be run on Expo.<\/p>\n\n\n\n
\nimport React, {useState} from 'react';\nimport {View, Text, StyleSheet, ScrollView, SafeAreaView} from 'react-native';\nimport {FlmText, FlmCheckBox} from 'react-native-freelifemakers-ui';\n\nexport default function App() {\n  const [selectedMovieTypes, setSelectedMovieTypes] = useState(['family']); \/\/ default\n  const [selectedFruitTypes, setSelectedFruitTypes] = useState(['apple']); \/\/ horizaontal\n  const [selectedInterests, setSelectedInterests] = useState(['sports']); \/\/ custom\n\n  const interestOptions = [\n    {label: '\uc2a4\ud3ec\uce20\/sports', value: 'sports'},\n    {label: '\uc74c\uc545\/music', value: 'music'},\n    {label: '\uc5ec\ud589\/travel', value: 'travel', disabled: true},\n  ];\n\n  return (\n    <SafeAreaView style={appStyles.safeArea}>\n      <ScrollView style={appStyles.scrollViewContent}>\n        <View style={appStyles.section}>\n          {\/* Default *\/}\n          <FlmText style={appStyles.header}>\n            1.\uae30\ubcf8 \/ Default - \uad00\uc2ec\uc0ac \uc120\ud0dd \/ Select Interests\n          <\/FlmText>\n\n          <FlmCheckBox\n            options={[\n              {label: '\uac00\uc871\/family', value: 'family'},\n              {label: '\ucf54\uba54\ub514\/comedy', value: 'drama'},\n            ]}\n            initialValues={['family']}\n            direction=\"vertical\"\n            onValueChange={setSelectedMovieTypes}\n          \/>\n\n          <FlmText style={appStyles.header}>\n            \uc120\ud0dd\ub41c \uad00\uc2ec\uc0ac \/ Selected Interests:{' '}\n            {selectedMovieTypes.length > 0\n              ? selectedMovieTypes.join(', ')\n              : '\uc5c6\uc74c'}\n          <\/FlmText>\n\n          {\/* Horizontal *\/}\n          <FlmText style={appStyles.header}>\n            2.\uac00\ub85c\ud615 \/ Horizontal - \uacfc\uc77c \uc120\ud0dd \/ Select Fruits\n          <\/FlmText>\n\n          <FlmCheckBox\n            options={[\n              {label: '\uc0ac\uacfc\/apple', value: 'apple'},\n              {label: '\uc624\ub80c\uc9c0\/orange', value: 'orange'},\n            ]}\n            initialValues={['apple']}\n            direction=\"horizontal\"\n            onValueChange={setSelectedFruitTypes}\n          \/>\n\n          <FlmText style={appStyles.header}>\n            \uc120\ud0dd\ub41c \uacfc\uc77c \/ Selected FruitTypes:{' '}\n            {selectedFruitTypes.length > 0\n              ? selectedFruitTypes.join(', ')\n              : '\uc5c6\uc74c'}\n          <\/FlmText>\n\n          {\/* Custom *\/}\n          <FlmText style={appStyles.header}>\n            3.\uc0ac\uc6a9\uc790 \uc815\uc758 \/ Custom - \uad00\uc2ec\uc0ac \uc120\ud0dd \/ Select Interests\n          <\/FlmText>\n\n          <FlmCheckBox\n            label=\"\uad00\uc2ec \uc788\ub294 \ud56d\ubaa9\uc744 \ubaa8\ub450 \uc120\ud0dd\ud558\uc138\uc694\\Select all items you are interested in:\"\n            options={interestOptions}\n            initialValues={['sports']}\n            onValueChange={setSelectedInterests}\n            direction=\"vertical\"\n            checkBoxGroupStyle={appStyles.customCheckBoxGroup}\n            checkBoxOptionStyle={appStyles.customCheckBoxOption}\n            checkBoxSquareWrapperStyle={appStyles.customSquareWrapper}\n            checkBoxSquareStyle={appStyles.customSquare}\n            checkBoxCheckedStyle={appStyles.customCheckedSquare}\n            checkBoxLabelStyle={appStyles.customLabel}\n            checkBoxCheckedLabelStyle={appStyles.customCheckedLabel}\n          \/>\n\n          <FlmText style={appStyles.header}>\n            \uc120\ud0dd\ub41c \uad00\uc2ec\uc0ac \/ Selected Interests:{' '}\n            {selectedInterests.length > 0\n              ? selectedInterests.join(', ')\n              : '\uc5c6\uc74c'}\n          <\/FlmText>\n        <\/View>\n      <\/ScrollView>\n    <\/SafeAreaView>\n  );\n}\n\nconst appStyles = StyleSheet.create({\n  safeArea: {\n    flex: 1,\n    backgroundColor: '#f9f9f9',\n  },\n  scrollViewContent: {\n    padding: 20,\n  },\n  section: {\n    marginBottom: 30,\n    padding: 15,\n    backgroundColor: '#fff',\n    borderRadius: 8,\n    shadowColor: '#000',\n    shadowOffset: {width: 0, height: 1},\n    shadowOpacity: 0.1,\n    shadowRadius: 2,\n    elevation: 2,\n  },\n  header: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    marginBottom: 15,\n    color: '#333',\n    textAlign: 'center',\n  },\n\n  \/\/ Flm\uccb4\ud06c\ubc15\uc2a4 \uc2a4\ud0c0\uc77c \/ FlmCheckBox style\n  customCheckBoxGroup: {\n    marginVertical: 10,\n  },\n  customCheckBoxOption: {\n    backgroundColor: '#FFD580', \/\/ orange\n    borderRadius: 10,\n    paddingVertical: 10,\n    paddingHorizontal: 15,\n    marginVertical: 5,\n  },\n  customSquareWrapper: {\n    borderColor: '#FFA500', \/\/ orange\n    backgroundColor: '#fff',\n  },\n  customSquare: {\n    backgroundColor: 'transparent',\n  },\n  customCheckedSquare: {\n    backgroundColor: '#FFA500', \/\/ orange\n  },\n  customLabel: {\n    color: '#333',\n    fontSize: 15,\n  },\n  customCheckedLabel: {\n    color: '#333',\n    fontWeight: 'bold',\n  },\n});\n<\/code><\/pre>\n\n\n\n
4.\uc2a4\ud06c\ub9bf\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
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 — \ub450 \uac1c\uc758 \ub77c\ub514\uc624 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.The basic code using two checkbox buttons is written as follows: 3.\uc608\uc81c\ucf54\ub4dc \/ Example code-\uc544\ub798\ub294 Expo\uc5d0\uc11c \uc2e4\ud589\uac00\ub2a5\ud55c \ucf54\ub4dc \uc608\uc81c \uc785\ub2c8\ub2e4.Below is an example of code that can be run on Expo. 4.\uc2a4\ud06c\ub9bf\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":[15,1],"tags":[],"class_list":["post-1569","post","type-post","status-publish","format-standard","hentry","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1569","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=1569"}],"version-history":[{"count":5,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1569\/revisions"}],"predecessor-version":[{"id":1577,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1569\/revisions\/1577"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}