인디케이터/FlmActivityIndicator

1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Install

npm install react-native-freelifemakers-ui

2.사용하기 / Usage
1)모듈 불러오기 / import Module

import {FlmActivityIndicator, FlmButton} from 'react-native-freelifemakers-ui'; 

2)사용하기 / Usage

<FlmActivityIndicator animating={isAnimating} />

3.예제코드 / Example code

import React, {useState} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
// FlmUnifiedActivityIndicator 컴포넌트 경로를 맞게 조정해주세요.
//import FlmUnifiedActivityIndicator from "./FlmUnifiedActivityIndicator";
import {FlmActivityIndicator, FlmButton} from 'react-native-freelifemakers-ui'; // FlmActivityIndicator 컴포넌트 경로를 맞게 조정해주세요.

const FlmActivityIndicatorApp = () => {
  const [isAnimating, setIsAnimating] = useState(true);

  // 애니메이션 상태를 토글하는 함수
  // Function to toggle animation state
  const toggleAnimation = () => {
    setIsAnimating(!isAnimating);
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <View style={styles.container}>
          <Text style={styles.title}>FlmUnifiedActivityIndicator 예제</Text>
          <Text style={styles.title}>FlmUnifiedActivityIndicator Example</Text>

          {/* 기본 인디케이터 (Large) */}
          {/* Basic Indicator (Large) */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>
              기본 인디케이터 / Default Indicator
            </Text>
            <FlmActivityIndicator animating={isAnimating} />
          </View>

          {/* 작은 크기 인디케이터 (Small) */}
          {/* Small Size Indicator (Small) */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>
              작은 인디케이터 / Small Indicator
            </Text>
            <FlmActivityIndicator size="small" animating={isAnimating} />
          </View>

          {/* 사용자 정의 색상 인디케이터 (Red) */}
          {/* Custom Color Indicator (Red) */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>사용자 정의 색상 (Red)</Text>
            <FlmActivityIndicator color="red" animating={isAnimating} />
          </View>

          {/* 숫자 크기 인디케이터 (70) */}
          {/* Numeric Size Indicator (70) */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>
              숫자 크기 / Numeric Size (70)
            </Text>
            <FlmActivityIndicator
              size={70}
              color="#007bff"
              animating={isAnimating}
            />
          </View>

          {/* 다른 색상의 인디케이터 (Green) */}
          {/* Another Color Indicator (Green) */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>다른 색상 (Green)</Text>
            <FlmActivityIndicator color="green" animating={isAnimating} />
          </View>

          {/* 애니메이션 토글 버튼 */}
          {/* Animation Toggle Button */}
          <FlmButton
            title={
              isAnimating
                ? '애니메이션 멈추기/animation stop'
                : '애니메이션 시작하기/animation start'
            }
            onPress={toggleAnimation}
            style={styles.toggleButton}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f0f2f5',
  },
  scrollViewContent: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 20,
  },
  container: {
    width: '100%',
    maxWidth: 400, // 최대 너비 설정으로 큰 화면에서 보기 좋게
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#333',
    textAlign: 'center',
  },
  section: {
    marginBottom: 25,
    alignItems: 'center',
    width: '100%',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 10,
    color: '#555',
    textAlign: 'center',
  },
  toggleButton: {
    marginTop: 30,
    width: '80%', // 버튼 너비 조정
  },
});

export default FlmActivityIndicatorApp;

4.스크린샷/ScreenShot