{"id":1626,"date":"2025-07-05T10:49:30","date_gmt":"2025-07-05T10:49:30","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1626"},"modified":"2025-07-07T05:16:20","modified_gmt":"2025-07-07T05:16:20","slug":"flmsnackbar","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/05\/flmsnackbar\/","title":{"rendered":"\uc2a4\ub0b5\ubc14\/FlmSnackbar"},"content":{"rendered":"\n

— \uc2a4\ub0b5\ubc14\ub294 \ud1a0\uc2a4\ud2b8\uba54\uc138\uc9c0\uc640 \uc720\uc0ac\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4.
Snackbar is similar to Toast Message.<\/p>\n\n\n\n

— \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>
1)\uae30\ubcf8SnackBar \/ Default(ContextAPI) FlmSnackBar<\/p>\n\n\n\n
\nimport {\n  FlmSnackBarProvider,\n  useFlmSnackBar,\n  FlmText,\n  FlmButton,\n} from 'react-native-freelifemakers-ui';\n\nconst FlmSnackBarApp = () => {\n  const {showSnackBar} = useFlmSnackBar();\n  return (\n   <View style={styles.content}>\n         <FlmButton\n        title=\"\uae30\ubcf8 SnackBar\/Default SnackBar\"\n        onPress={() => showSnackBar('\uae30\ubcf8 SnackBar \uba54\uc2dc\uc9c0\uc785\ub2c8\ub2e4!')}\n      \/>\n    <\/View>\n  );\n}\n\nexport default function App() {\n  return (\n    <FlmSnackBarProvider>\n      <View>\n        <FlmSnackBarApp \/>\n      <\/View>\n    <\/FlmSnackBarProvider>\n  );\n}<\/code><\/pre>\n\n\n\n
2)\uc0ac\uc6a9\uc790\uc815\uc758 FlmSnackBar \/ Custom FlmSnackBar<\/strong><\/p>\n\n\n\n
import {FlmSnackBar, FlmButton} from 'react-native-freelifemakers-ui';\n\nexport default function App() {\n  const [showCustomSnackBar, setShowCustomSnackBar] = useState(false);\n  const [snackBarMessage, setSnackBarMessage] = useState('');\n  const [snackBarType, setSnackBarType] = useState('info');\n\n  const handleShowCustomSnackBar = (message, type) => {\n    setSnackBarMessage(message);\n    setSnackBarType(type);\n    setShowCustomSnackBar(true);\n  };\n\n  return (\n    <View>\n      <FlmButton\n        title=\"\ucee4\uc2a4\ud140 SnackBar\/Cusom SnackBar\"\n        onPress={() =>\n          handleShowCustomSnackBar('\uc0ac\uc6a9\uc790 \uc815\uc758 SnackBar', 'success')\n        }\n      \/>\n\n      {showCustomSnackBar && (\n        <FlmSnackBar\n          message={snackBarMessage}\n          type={snackBarType}\n          duration={3000} \/\/ \uc9c1\uc811 \uc2dc\uac04 \uc124\uc815(3s) \/ time Time setting(3s)\n          onHide={() => setShowCustomSnackBar(false)}\n          \/\/ \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \ucd94\uac00 \/.  adding custom style\n          style={{\n            backgroundColor: 'purple',\n            bottom: 100,\n            borderRadius: 20,\n            borderWidth: 2,\n            borderColor: 'white',\n          }}\n          textStyle={{\n            color: 'lightgreen',\n            fontWeight: 'bold',\n          }}\n        \/>\n      )}\n    <\/View>\n  );\n}<\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example Code<\/strong>
1)\uae30\ubcf8SnackBar \/ Default(ContextAPI) FlmSnackBar<\/p>\n\n\n\n
\n\/\/ Default FlmSnackBar - Context API\uc0ac\uc6a9\nimport React from \"react\";\nimport { View, Text, Button, StyleSheet } from \"react-native\";\nimport {\n  FlmSnackBarProvider,\n  useFlmSnackBar,\n  FlmText,\n  FlmButton,\n} from \"react-native-freelifemakers-ui\";\n\nconst FlmSnackBarApp = () => {\n  const { showSnackBar } = useFlmSnackBar();\n\n  return (\n    <View style={styles.content}>\n      <FlmText style={styles.title}>SnackBar (Default)<\/FlmText>\n      <FlmText>\n        \ud30c\ub77c\uba54\ud130\uac00 \uc5c6\uc73c\uba74 info\uac00 \uae30\ubcf8 SnackBar\ud0c0\uc785\uc73c\ub85c \uc9c0\uc815\ub429\ub2c8\ub2e4.\n      <\/FlmText>\n      <FlmText>\n        If there is no parameter, the info is specified as the default snack bar\n        type.\n      <\/FlmText>\n      <FlmButton\n        title=\"\uae30\ubcf8 SnackBar\/Default SnackBar\"\n        onPress={() => showSnackBar(\"\uae30\ubcf8 SnackBar \uba54\uc2dc\uc9c0\uc785\ub2c8\ub2e4!\")}\n      \/>\n      <View style={{ height: 10 }} \/>\n\n      <FlmButton\n        title=\"\uc778\ud3ec\uba54\uc774\uc158 SnackBar\/info SnackBar\"\n        onPress={() =>\n          showSnackBar(\"\uc778\ud3ec\uba54\uc774\uc158 SnackBar\/info SnackBar\", \"info\")\n        }\n      \/>\n      <View style={{ height: 10 }} \/>\n\n      <FlmButton\n        title=\"\uc624\ub958 SnackBar \/ error SnackBar\"\n        onPress={() => showSnackBar(\"\uc624\ub958 SnackBar\/error SnackBar\", \"error\")}\n      \/>\n      <View style={{ height: 10 }} \/>\n\n      <FlmButton\n        title=\"\uc131\uacf5 SnackBar (2\ucd08) \/ success SnackBar(2s)\"\n        onPress={() =>\n          showSnackBar(\n            \"\uc131\uacf5 SnackBar(2s) \/ success SnackBar(2s)\",\n            \"success\",\n            2000,\n          )\n        }\n      \/>\n    <\/View>\n  );\n};\n\nexport default function App() {\n  return (\n    <FlmSnackBarProvider>\n      <View style={styles.container}>\n        <FlmSnackBarApp \/>\n      <\/View>\n    <\/FlmSnackBarProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  content: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: \"bold\",\n    marginBottom: 20,\n  },\n});<\/code><\/pre>\n\n\n\n
2)\uc0ac\uc6a9\uc790\uc815\uc758 FlmSnackBar \/ Custom FlmSnackBar<\/p>\n\n\n\n
\n\/\/ Custom FlmSnackBar\nimport React, {useState} from 'react';\nimport {View, Text, Button, StyleSheet} from 'react-native';\nimport {FlmSnackBar, FlmButton} from 'react-native-freelifemakers-ui';\n\nexport default function App() {\n  const [showCustomSnackBar, setShowCustomSnackBar] = useState(false);\n  const [snackBarMessage, setSnackBarMessage] = useState('');\n  const [snackBarType, setSnackBarType] = useState('info');\n\n  const handleShowCustomSnackBar = (message, type) => {\n    setSnackBarMessage(message);\n    setSnackBarType(type);\n    setShowCustomSnackBar(true);\n  };\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>\uc0ac\uc6a9\uc790\uc815\uc758 SnackBar<\/Text>\n      <Text style={styles.title}>Custom SnackBar<\/Text>\n      <FlmButton\n        title=\"\ucee4\uc2a4\ud140 SnackBar\/Cusom SnackBar\"\n        onPress={() =>\n          handleShowCustomSnackBar('\uc0ac\uc6a9\uc790 \uc815\uc758 SnackBar', 'success')\n        }\n      \/>\n\n      {showCustomSnackBar && (\n        <FlmSnackBar\n          message={snackBarMessage}\n          type={snackBarType}\n          duration={3000} \/\/ \uc9c1\uc811 \uc2dc\uac04 \uc124\uc815(3s) \/ Set time directly (3s)\n          onHide={() => setShowCustomSnackBar(false)}\n          \/\/ \uc5ec\uae30\uc5d0 \uc6d0\ud558\ub294 \uc2a4\ud0c0\uc77c\uc744 \uc9c1\uc811 \uc8fc\uc785\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4!\n          \/\/ You can add your own desired style here!\n          style={{\n            backgroundColor: 'purple',\n            bottom: 100, \/\/ \ub354 \uc704\ub85c \uc62c\ub9bc \/ move higher\n            borderRadius: 20,\n            borderWidth: 2,\n            borderColor: 'white',\n          }}\n          textStyle={{\n            color: 'lightgreen',\n            fontWeight: 'bold',\n          }}\n        \/>\n      )}\n    <\/View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 20,\n  },\n});\n<\/code><\/pre>\n\n\n\n
4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n
\n