{"id":1803,"date":"2025-08-06T12:55:43","date_gmt":"2025-08-06T12:55:43","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1803"},"modified":"2025-08-06T13:20:43","modified_gmt":"2025-08-06T13:20:43","slug":"flmac","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/08\/06\/flmac\/","title":{"rendered":"\uc778\ub514\ucf00\uc774\ud130\/FlmActivityIndicator"},"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 {FlmActivityIndicator, FlmButton} from 'react-native-freelifemakers-ui'; <\/code><\/pre>\n\n\n\n
2)\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/p>\n\n\n\n
<FlmActivityIndicator animating={isAnimating} \/><\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n
import React, {useState} from 'react';\nimport {View, Text, StyleSheet, ScrollView} from 'react-native';\nimport {SafeAreaView} from 'react-native-safe-area-context';\n\/\/ FlmUnifiedActivityIndicator \ucef4\ud3ec\ub10c\ud2b8 \uacbd\ub85c\ub97c \ub9de\uac8c \uc870\uc815\ud574\uc8fc\uc138\uc694.\n\/\/import FlmUnifiedActivityIndicator from \".\/FlmUnifiedActivityIndicator\";\nimport {FlmActivityIndicator, FlmButton} from 'react-native-freelifemakers-ui'; \/\/ FlmActivityIndicator \ucef4\ud3ec\ub10c\ud2b8 \uacbd\ub85c\ub97c \ub9de\uac8c \uc870\uc815\ud574\uc8fc\uc138\uc694.\n\nconst FlmActivityIndicatorApp = () => {\n  const [isAnimating, setIsAnimating] = useState(true);\n\n  \/\/ \uc560\ub2c8\uba54\uc774\uc158 \uc0c1\ud0dc\ub97c \ud1a0\uae00\ud558\ub294 \ud568\uc218\n  \/\/ Function to toggle animation state\n  const toggleAnimation = () => {\n    setIsAnimating(!isAnimating);\n  };\n\n  return (\n    <SafeAreaView style={styles.safeArea}>\n      <ScrollView contentContainerStyle={styles.scrollViewContent}>\n        <View style={styles.container}>\n          <Text style={styles.title}>FlmUnifiedActivityIndicator \uc608\uc81c<\/Text>\n          <Text style={styles.title}>FlmUnifiedActivityIndicator Example<\/Text>\n\n          {\/* \uae30\ubcf8 \uc778\ub514\ucf00\uc774\ud130 (Large) *\/}\n          {\/* Basic Indicator (Large) *\/}\n          <View style={styles.section}>\n            <Text style={styles.sectionTitle}>\n              \uae30\ubcf8 \uc778\ub514\ucf00\uc774\ud130 \/ Default Indicator\n            <\/Text>\n            <FlmActivityIndicator animating={isAnimating} \/>\n          <\/View>\n\n          {\/* \uc791\uc740 \ud06c\uae30 \uc778\ub514\ucf00\uc774\ud130 (Small) *\/}\n          {\/* Small Size Indicator (Small) *\/}\n          <View style={styles.section}>\n            <Text style={styles.sectionTitle}>\n              \uc791\uc740 \uc778\ub514\ucf00\uc774\ud130 \/ Small Indicator\n            <\/Text>\n            <FlmActivityIndicator size=\"small\" animating={isAnimating} \/>\n          <\/View>\n\n          {\/* \uc0ac\uc6a9\uc790 \uc815\uc758 \uc0c9\uc0c1 \uc778\ub514\ucf00\uc774\ud130 (Red) *\/}\n          {\/* Custom Color Indicator (Red) *\/}\n          <View style={styles.section}>\n            <Text style={styles.sectionTitle}>\uc0ac\uc6a9\uc790 \uc815\uc758 \uc0c9\uc0c1 (Red)<\/Text>\n            <FlmActivityIndicator color=\"red\" animating={isAnimating} \/>\n          <\/View>\n\n          {\/* \uc22b\uc790 \ud06c\uae30 \uc778\ub514\ucf00\uc774\ud130 (70) *\/}\n          {\/* Numeric Size Indicator (70) *\/}\n          <View style={styles.section}>\n            <Text style={styles.sectionTitle}>\n              \uc22b\uc790 \ud06c\uae30 \/ Numeric Size (70)\n            <\/Text>\n            <FlmActivityIndicator\n              size={70}\n              color=\"#007bff\"\n              animating={isAnimating}\n            \/>\n          <\/View>\n\n          {\/* \ub2e4\ub978 \uc0c9\uc0c1\uc758 \uc778\ub514\ucf00\uc774\ud130 (Green) *\/}\n          {\/* Another Color Indicator (Green) *\/}\n          <View style={styles.section}>\n            <Text style={styles.sectionTitle}>\ub2e4\ub978 \uc0c9\uc0c1 (Green)<\/Text>\n            <FlmActivityIndicator color=\"green\" animating={isAnimating} \/>\n          <\/View>\n\n          {\/* \uc560\ub2c8\uba54\uc774\uc158 \ud1a0\uae00 \ubc84\ud2bc *\/}\n          {\/* Animation Toggle Button *\/}\n          <FlmButton\n            title={\n              isAnimating\n                ? '\uc560\ub2c8\uba54\uc774\uc158 \uba48\ucd94\uae30\/animation stop'\n                : '\uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791\ud558\uae30\/animation start'\n            }\n            onPress={toggleAnimation}\n            style={styles.toggleButton}\n          \/>\n        <\/View>\n      <\/ScrollView>\n    <\/SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  safeArea: {\n    flex: 1,\n    backgroundColor: '#f0f2f5',\n  },\n  scrollViewContent: {\n    flexGrow: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    paddingVertical: 20,\n  },\n  container: {\n    width: '100%',\n    maxWidth: 400, \/\/ \ucd5c\ub300 \ub108\ube44 \uc124\uc815\uc73c\ub85c \ud070 \ud654\uba74\uc5d0\uc11c \ubcf4\uae30 \uc88b\uac8c\n    alignItems: 'center',\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 30,\n    color: '#333',\n    textAlign: 'center',\n  },\n  section: {\n    marginBottom: 25,\n    alignItems: 'center',\n    width: '100%',\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginBottom: 10,\n    color: '#555',\n    textAlign: 'center',\n  },\n  toggleButton: {\n    marginTop: 30,\n    width: '80%', \/\/ \ubc84\ud2bc \ub108\ube44 \uc870\uc815\n  },\n});\n\nexport default FlmActivityIndicatorApp;\n<\/code><\/pre>\n\n\n\n
4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n
\n