{"id":1741,"date":"2025-07-22T04:23:41","date_gmt":"2025-07-22T04:23:41","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1741"},"modified":"2025-07-25T05:16:32","modified_gmt":"2025-07-25T05:16:32","slug":"flmbanner","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/22\/flmbanner\/","title":{"rendered":"\ubc30\ub108\/FlmBanner"},"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>l<\/p>\n\n\n\n

# npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n
2.\uc758\uc874\uc131 \ubaa8\ub4c8 \uc124\uce58 \/ peerModule install<\/strong><\/p>\n\n\n\n
— FlmBottomSheet\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c \ubc18\ub4dc\uc2dc \uc124\uce58\ud574\uc57c \ud558\ub294 \ubaa8\ub4c8\uc785\ub2c8\ub2e4.
This is a module that must be installed to use FlmBottomSheet.<\/p>\n\n\n\n
1)React-Native Expo<\/strong><\/p>\n\n\n\n
— react-native-freelifemakers-ui \uc774 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc544\ub798 \ub450\uac1c\uc758 \ubaa8\ub4c8\uc744 \ubc18\ub4dc\uc2dc \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.
To use this module, you must install the following two modules: react-native-freelifemakers-ui<\/p>\n\n\n\n
— \ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c \uc5d1\uc2a4\ud3ec\ub294 \ubc18\ub4dc\uc2dc react-native-reanimated@3.17.4 \ubc84\uc804\uc744 \uc124\uce58 \ud569\ub2c8\ub2e4.
React Native Expo requires react-native-reanimated@3.17.4 to be installed.<\/p>\n\n\n\n
— \uc5d1\uc2a4\ud3ec \ud504\ub85c\uc81d\ud2b8\uc640 3.17.4\ubc84\uc804\uc774 \uac00\uc7a5 \ud638\ud658\uc774 \uc798\ub418\uba70 \uc774\uac83\ubcf4\ub2e4 \uc0c1\uc704\ubc84\uc804 \uc124\uce58\uc2dc FlmBanner\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
Expo Project is most compatible with version 3.17.4, and the FlmBanner may not work when installing a higher version.<\/p>\n\n\n\n
# npm install react-native-gesture-handler\n# npm install react-native-reanimated@3.17.4<\/code><\/pre>\n\n\n\n
-babel.config.js
–> \uc774 \ud30c\uc77c\uc774 \uc5c6\uc73c\uba74 \ud30c\uc77c\uc744 \uc9c1\uc811 \ub9cc\ub4e7\ub2c8\ub2e4.
If this file does not exist, create it yourself.
–> \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \ub0b4 package.json\ud30c\uc77c\uacfc \ub3d9\uc77c\ud55c \uc704\uce58\uc5d0 \ub9cc\ub4e4\uba74\ub429\ub2c8\ub2e4.
Just create it in the same location as the package.json file in your project folder.
–> \uc544\ub798\uc5d0 reanimated\ubaa8\ub4c8\uc744 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 \uc124\uc815\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.
Apply the following settings for the reanimated module below:<\/p>\n\n\n\n
\/\/ babel.config.js\nmodule.exports = function(api) {\n  api.cache(true);\n  return {\n    presets: ['babel-preset-expo'],\n    plugins: [\n      'react-native-reanimated\/plugin', \/\/react-native-reanimated module setting\n    ],\n  };\n};\n<\/code><\/pre>\n\n\n\n
2)React-Native CLI<\/strong><\/p>\n\n\n\n
— react-native-freelifemakers-ui \uc774 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc544\ub798 \ub450\uac1c\uc758 \ubaa8\ub4c8\uc744 \ubc18\ub4dc\uc2dc \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.
To use this module, you must install the following two modules: react-native-freelifemakers-ui<\/p>\n\n\n\n
— \uc548\ub4dc\ub85c\uc774\ub4dc\uc5d0\uc11c\ub294 react-native-reanimated\ubaa8\ub4c8\uc774 \uc548\uc815\uc801\uc73c\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0\uac00 \uc788\uc2b5\ub2c8\ub2e4.
On Android, the react-native-reanimated module may not work reliably.<\/p>\n\n\n\n
— IOS\uc5d0\uc11c\ub294 \uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud569\ub2c8\ub2e4.
It works fine on iOS.<\/p>\n\n\n\n
— \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c CLI\uc5d0\uc11c\ub294 react-native-reanimated \ucd5c\uc120\ubc84\uc804\uc744 \uc124\uce58\ud574\ub3c4 \ub429\ub2c8\ub2e4.
For React Native CLI, you can install the latest version of react-native-reanimated.<\/p>\n\n\n\n
— \ud604\uc7ac 3.18.0\ubc84\uc804 \uc124\uce58\ud574\uc11c \ud14c\uc2a4\ud2b8 \ud574\ubcf8 \uacb0\uacfc \uc798 \uc791\ub3d9 \ud569\ub2c8\ub2e4.
I have currently installed version 3.18.0 and tested it and it works well.<\/p>\n\n\n\n
# npm install react-native-gesture-handler\n# npm install react-native-reanimated<\/code><\/pre>\n\n\n\n
-babel.config.js
–> \uc774 \ud30c\uc77c\uc774 \uc5c6\uc73c\uba74 \ud30c\uc77c\uc744 \uc9c1\uc811 \ub9cc\ub4e7\ub2c8\ub2e4.
If this file does not exist, create it yourself.
–> \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \ub0b4 package.json\ud30c\uc77c\uacfc \ub3d9\uc77c\ud55c \uc704\uce58\uc5d0 \ub9cc\ub4e4\uba74\ub429\ub2c8\ub2e4.
Just create it in the same location as the package.json file in your project folder.
–> \uc544\ub798\uc5d0 reanimated\ubaa8\ub4c8\uc744 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 \uc124\uc815\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.
Apply the following settings for the reanimated module below:<\/p>\n\n\n\n
\/\/ babel.config.js\nmodule.exports = {\n  presets: ['module:@react-native\/babel-preset'],\n  plugins: ['react-native-reanimated\/plugin'], \/\/react-native-reanimated module setting\n};<\/code><\/pre>\n\n\n\n
2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong><\/p>\n\n\n\n
    \n
  • \ubc30\ub108\ub97c \uc678\ubd80 \ubc84\ud2bc\uc73c\ub85c \uc5f4\uace0 \ub2eb\uc744 \uc218 \uc788\uace0 \ubc30\ub108 \ub0b4\uc758 \ub2eb\uae30 \ubc84\ud2bc \ud0ed\ud560 \uacbd\uc6b0 \ubc30\ub108\ub97c \uac1c\ubcc4\uc801\uc73c\ub85c \ub2eb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
    Banners can be opened and closed with external buttons, and banners can be closed individually by tapping the close button within the banner.<\/li>\n\n\n\n
  • \ud14d\uc2a4\ud2b8 \ubc30\ub108, \uc774\ubbf8\uc9c0 \ubc30\ub108, \ucee4\uc2a4\ud140 \ubc30\ub108\uac00 \uc788\uc2b5\ub2c8\ub2e4.
    There are text banners, image banners, and custom banners.<\/li>\n\n\n\n
  • \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud574\uc11c \uc2e4\ud589\ud574\ubcf4\uace0 \uc798 \uc791\ub3d9\ud558\uba74 \uc218\uc815\ud574\uc11c \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
    Please copy and run the code below. If it works well, you can modify it and use it.<\/li>\n<\/ul>\n\n\n\n
    1)\ud14d\uc2a4\ud2b8 \ubc30\ub108 \/ Text Banner<\/strong><\/p>\n\n\n\n
            <FlmBanner\n          type=\"text\"\n          data={{\n            message: \"\ud14d\uc2a4\ud2b8\ubc30\ub108 (\uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9)\/Text Banner (Animated)\",\n            id: \"promo1\",\n          }}\n          onPress={() =>\n            Alert.alert(\n              \"\ud14d\uc2a4\ud2b8 \ubc30\ub108\/Text Banner\",\n              \"\ud14d\uc2a4\ud2b8 \ubc30\ub108\uac00 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4\/Text banner clicked\",\n            )\n          }\n          isVisible={isTextBannerVisible} \/\/ \uac1c\ubcc4 isVisible prop \uc804\ub2ec \/ Passing individual isVisible props\n          onClose={handleCloseTextBanner} \/\/ \ub2eb\uae30 \ucf5c\ubc31 \ud568\uc218 \uc804\ub2ec \/ Passing a close callback function\n          animationMaxHeight={80}\n          style={{\n            backgroundColor: \"#e0f7fa\",\n            borderColor: \"#00bcd4\",\n            borderWidth: 1,\n          }}\n          textStyle={{ color: \"#006064\", fontSize: 17 }}\n        \/><\/code><\/pre>\n\n\n\n
    2)\uc774\ubbf8\uc9c0 \ubc30\ub108 \/ Image Banner<\/strong><\/p>\n\n\n\n
            <FlmBanner\n          type=\"image\"\n          data={{\n            imageUrl: \"https:\/\/picsum.photos\/600\/400\",\n            title:\n              \"\uc774\ubbf8\uc9c0\ubc30\ub108 1! (\uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9)\/Image Banner 1! (Animation applied)\",\n            id: \"product2\",\n          }}\n          onPress={() =>\n            Alert.alert(\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 1\/Image Banner 1\",\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 1\uc774 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4!\/Image banner 1 has been clicked!\",\n            )\n          }\n          isVisible={isImageBanner1Visible} \/\/ \uac1c\ubcc4 isVisible prop \uc804\ub2ec\n          onClose={handleCloseImageBanner1} \/\/ \ub2eb\uae30 \ucf5c\ubc31 \ud568\uc218 \uc804\ub2ec\n          style={{ borderColor: \"#ffeb3b\", borderWidth: 2 }}\n          imageStyle={{ borderRadius: 15 }}\n          titleStyle={{ color: \"#4a148c\", fontSize: 20, textShadowRadius: 8 }}\n        \/><\/code><\/pre>\n\n\n\n
    3)\ucee4\uc2a4\ud140 \ubc30\ub108 \/ Custom Banner<\/strong><\/p>\n\n\n\n
            <FlmBanner\n          type=\"image\"\n          data={{\n            imageUrl:\n              \"https:\/\/avatars3.githubusercontent.com\/u\/17571969?s=400&v=4\",\n            title:\n              \"\ucee4\uc2a4\ud140\ubc30\ub108 2! (\uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9) \/ Custom Banner 2! (Animated)\",\n            id: \"product3\",\n          }}\n          onPress={() =>\n            Alert.alert(\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 2 \/ Image Banner 2\",\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 2\uac00 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4! \/ Image banner 2 was clicked!\",\n            )\n          }\n          isVisible={isImageBanner2Visible} \/\/ \uac1c\ubcc4 isVisible prop \uc804\ub2ec \/ Passing individual isVisible props\n          onClose={handleCloseImageBanner2} \/\/ \ub2eb\uae30 \ucf5c\ubc31 \ud568\uc218 \uc804\ub2ec \/ Passing a close callback function\n          style={{ backgroundColor: \"#f3e5f5\", borderRadius: 20 }}\n          imageStyle={{ opacity: 0.9 }}\n          titleStyle={{ color: \"#4a148c\", fontSize: 22, fontWeight: \"normal\" }}\n        \/><\/code><\/pre>\n\n\n\n
    3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n
    \/\/ FlmBannerApp.js\nimport React, { useState } from \"react\";\nimport {\n  SafeAreaView,\n  ScrollView,\n  View,\n  StyleSheet,\n  Text,\n  Alert,\n} from \"react-native\";\n\nimport { FlmBanner, FlmButton, FlmText } from \"react-native-freelifemakers-ui\";\n\nconst FlmBannerApp = () => {\n  \/\/  \uac01 \ubc30\ub108\uc758 \uac00\uc2dc\uc131\uc744 \uc704\ud55c \uac1c\ubcc4 \uc0c1\ud0dc \uc815\uc758 \/ Define individual states for visibility of each banner\n  const [isTextBannerVisible, setIsTextBannerVisible] = useState(true);\n  const [isImageBanner1Visible, setIsImageBanner1Visible] = useState(true);\n  const [isImageBanner2Visible, setIsImageBanner2Visible] = useState(true);\n\n  \/\/ \uac01 \ubc30\ub108\uc758 \ub2eb\uae30 \ud578\ub4e4\ub7ec \ud568\uc218 \/ Close handler function for each banner\n  const handleCloseTextBanner = () => {\n    setIsTextBannerVisible(false);\n    console.log(\"\ud14d\uc2a4\ud2b8 \ubc30\ub108 \ub2eb\ud798 \/ Text Banner Close\");\n  };\n\n  const handleCloseImageBanner1 = () => {\n    setIsImageBanner1Visible(false);\n    console.log(\"\uc774\ubbf8\uc9c0 \ubc30\ub108 1 \ub2eb\ud798 \/ Image Banner 1 Close\");\n  };\n\n  const handleCloseImageBanner2 = () => {\n    setIsImageBanner2Visible(false);\n    console.log(\"\uc774\ubbf8\uc9c0 \ubc30\ub108 2 \ub2eb\ud798 \/ Image Banner 2 Close\");\n  };\n\n  \/\/ \ubaa8\ub4e0 \ubc30\ub108\ub97c \ub3d9\uc2dc\uc5d0 \ud1a0\uae00\ud558\ub294 \ud568\uc218 (\uc678\ubd80 \ubc84\ud2bc\uc6a9) \/ Function to toggle all banners simultaneously (for external buttons)\n  const handleToggleAllBanners = () => {\n    setIsTextBannerVisible((prev) => !prev);\n    setIsImageBanner1Visible((prev) => !prev);\n    setIsImageBanner2Visible((prev) => !prev);\n    console.log(\n      `\ubaa8\ub4e0 \ubc30\ub108 \uc0c1\ud0dc \ud1a0\uae00\/Toggle all banner states: ${isTextBannerVisible ? \"\uc228\uae40\/hidden\" : \"\uc624\ud508\/open\"}`,\n    );\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView contentContainerStyle={styles.scrollViewContent}>\n        <FlmText style={styles.heading}>\n          \ubc30\ub108 \uc228\uae40\/\uc624\ud508 \ud1a0\uae00 \uc608\uc2dc (\ub2eb\uae30 \ubc84\ud2bc & \uc560\ub2c8\uba54\uc774\uc158)\n        <\/FlmText>\n        <FlmText style={styles.heading}>\n          Banner Hide\/Open Toggle Example (Close Button & Animation)\n        <\/FlmText>\n        {\/* \ud14d\uc2a4\ud2b8 \ubc30\ub108 *\/}\n        <FlmBanner\n          type=\"text\"\n          data={{\n            message: \"\ud14d\uc2a4\ud2b8\ubc30\ub108 (\uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9)\/Text Banner (Animated)\",\n            id: \"promo1\",\n          }}\n          onPress={() =>\n            Alert.alert(\n              \"\ud14d\uc2a4\ud2b8 \ubc30\ub108\/Text Banner\",\n              \"\ud14d\uc2a4\ud2b8 \ubc30\ub108\uac00 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4\/Text banner clicked\",\n            )\n          }\n          isVisible={isTextBannerVisible} \/\/ \uac1c\ubcc4 isVisible prop \uc804\ub2ec \/ Passing individual isVisible props\n          onClose={handleCloseTextBanner} \/\/ \ub2eb\uae30 \ucf5c\ubc31 \ud568\uc218 \uc804\ub2ec \/ Passing a close callback function\n          animationMaxHeight={80}\n          style={{\n            backgroundColor: \"#e0f7fa\",\n            borderColor: \"#00bcd4\",\n            borderWidth: 1,\n          }}\n          textStyle={{ color: \"#006064\", fontSize: 17 }}\n        \/>\n        <View style={{ height: 20 }} \/>\n\n        {\/* \uc774\ubbf8\uc9c0 \ubc30\ub108 1 *\/}\n        <FlmBanner\n          type=\"image\"\n          data={{\n            imageUrl: \"https:\/\/picsum.photos\/600\/400\",\n            title:\n              \"\uc774\ubbf8\uc9c0\ubc30\ub108 1! (\uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9)\/Image Banner 1! (Animation applied)\",\n            id: \"product2\",\n          }}\n          onPress={() =>\n            Alert.alert(\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 1\/Image Banner 1\",\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 1\uc774 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4!\/Image banner 1 has been clicked!\",\n            )\n          }\n          isVisible={isImageBanner1Visible} \/\/ \uac1c\ubcc4 isVisible prop \uc804\ub2ec\n          onClose={handleCloseImageBanner1} \/\/ \ub2eb\uae30 \ucf5c\ubc31 \ud568\uc218 \uc804\ub2ec\n          style={{ borderColor: \"#ffeb3b\", borderWidth: 2 }}\n          imageStyle={{ borderRadius: 15 }}\n          titleStyle={{ color: \"#4a148c\", fontSize: 20, textShadowRadius: 8 }}\n        \/>\n        <View style={{ height: 20 }} \/>\n\n        {\/* \uc774\ubbf8\uc9c0 \ucee4\uc2a4\ud140 \ubc30\ub108 2 \/ Image Custom Banner 2*\/}\n        <FlmBanner\n          type=\"image\"\n          data={{\n            imageUrl:\n              \"https:\/\/avatars3.githubusercontent.com\/u\/17571969?s=400&v=4\",\n            title:\n              \"\ucee4\uc2a4\ud140\ubc30\ub108 2! (\uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9) \/ Custom Banner 2! (Animated)\",\n            id: \"product3\",\n          }}\n          onPress={() =>\n            Alert.alert(\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 2 \/ Image Banner 2\",\n              \"\uc774\ubbf8\uc9c0 \ubc30\ub108 2\uac00 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4! \/ Image banner 2 was clicked!\",\n            )\n          }\n          isVisible={isImageBanner2Visible} \/\/ \uac1c\ubcc4 isVisible prop \uc804\ub2ec \/ Passing individual isVisible props\n          onClose={handleCloseImageBanner2} \/\/ \ub2eb\uae30 \ucf5c\ubc31 \ud568\uc218 \uc804\ub2ec \/ Passing a close callback function\n          style={{ backgroundColor: \"#f3e5f5\", borderRadius: 20 }}\n          imageStyle={{ opacity: 0.9 }}\n          titleStyle={{ color: \"#4a148c\", fontSize: 22, fontWeight: \"normal\" }}\n        \/>\n\n        <View style={{ height: 30 }} \/>\n\n        {\/* \ubaa8\ub4e0 \ubc30\ub108\ub97c \ub3d9\uc2dc\uc5d0 \ud1a0\uae00\ud558\ub294 \ubc84\ud2bc \/ Button to toggle all banners simultaneously *\/}\n        <FlmButton\n          title={\n            isTextBannerVisible ||\n            isImageBanner1Visible ||\n            isImageBanner2Visible\n              ? \"\ubaa8\ub4e0 \ubc30\ub108 \uc228\uae30\uae30 \/ Hide all banners\"\n              : \"\ubaa8\ub4e0 \ubc30\ub108 \ubcf4\uc774\uae30 \/ Show all banners\"\n          }\n          onPress={handleToggleAllBanners}\n        \/>\n\n        <View style={{ height: 50 }} \/>\n        <Text style={styles.content}>\n          \uc5ec\uae30\ub294 \ubc30\ub108 \uc544\ub798\uc758 \ub2e4\ub978 \ucf58\ud150\uce20\uc785\ub2c8\ub2e4. \ubc30\ub108\uac00 \uc560\ub2c8\uba54\uc774\uc158\uacfc \ud568\uaed8\n          \uc0ac\ub77c\uc9c0\uac70\ub098 \ub098\ud0c0\ub0a0 \uac83\uc785\ub2c8\ub2e4.\n        <\/Text>\n        <Text style={styles.content}>\n          Here is another content below the banner. The banner will disappear or\n          appear with animation.\n        <\/Text>\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});\n\nexport default FlmBannerApp;\n<\/code><\/pre>\n\n\n\n
    4.\uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/strong><\/p>\n\n\n\n
    \n