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

npm install react-native-freelifemakers-ui

2.사용법

✔️thickness : 구분선 두께

✔️spacing : 위,아래 여백

1. 가로

<FlmDivider color="#00bcd4" thickness={2} spacing={25} />

2)세로

    <FlmDivider
        orientation="vertical" // 세로 구분선으로 설정 / Set as vertical divider
        color="#a5d6a7"
        thickness={4}
        spacing={10}
        style={{ height: "80%", borderRadius: 2 }}
    />

3.전체코드

import { SafeAreaView, ScrollView, View, StyleSheet } from "react-native";
import { FlmText, FlmDivider } from "react-native-freelifemakers-ui";

const FlmDividerApp = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <FlmText style={styles.heading}>구분선 사용 예제 / FlmDivider</FlmText>
        <FlmText style={styles.heading}>Example of using a FlmDivider</FlmText>

        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          가로 구분선 / Horizontal FlmDivider
        </FlmText>
        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          Example of using FlmDivider
        </FlmText>

        {/* 가로 구분선 예제 1 / Example of using FlmDivider 1 */}
        <FlmDivider color="#00bcd4" thickness={2} spacing={25} />

        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          가로 구분선2 / Horizontal FlmDivider2
        </FlmText>
        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          Example of using FlmDivider2
        </FlmText>

        {/* 가로 구분선 예제 2 / Example of using FlmDivider 2 */}
        <FlmDivider
          color="#ffeb3b"
          thickness={3}
          spacing={30}
          style={{ borderRadius: 5 }}
        />

        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          세로 구분선 예제 / Vertical FlmDivider
        </FlmText>
        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          Example of using a Vertical FlmDivider
        </FlmText>

        {/* 세로 구분선 예제 추가 / Example of using Vertical FlmDivider */}
        <View style={styles.verticalDividerContainer}>
          <View>
            {/* 왼쪽 텍스트들을 묶어주는 View 추가 
            (선택 사항이지만 레이아웃 관리에 유용) */}
            {/* Add a View to group the left texts 
            (optional, but useful for managing layout) */}
            <FlmText category="h6">왼쪽 내용</FlmText>
            <FlmText category="h6">Left Content</FlmText>
          </View>
          <FlmDivider
            orientation="vertical" // 세로 구분선으로 설정 // Set as vertical divider
            color="#a5d6a7"
            thickness={4}
            spacing={10}
            // 부모 View의 높이에 맞춰 높이 설정 
            // Set height to match parent View's height
            style={{ height: "80%", borderRadius: 2 }} 
          />
          <View>
            <FlmText category="h6">오른쪽 내용</FlmText>
            <FlmText category="h6">Right Content</FlmText>
          </View>
        </View>

        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          마지막 가로 구분선
        </FlmText>
        <FlmText category="subtitle" style={{ textAlign: "center" }}>
          Final Horizontal FlmDivider
        </FlmText>
        {/* 마지막 가로 구분선 / last horizontal divider */}
        <View style={{ width: "100%", alignItems: "center" }}>
          <FlmDivider
            color="#673ab7"
            thickness={1}
            spacing={40}
            // FlmDivider 자체의 너비는 유지 
            // The width of the FlmDivider itself is maintained
            style={{ width: "80%", alignSelf: "center" }} 
          />
        </View>
        <View style={{ height: 50 }} />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  scrollViewContent: {
    paddingVertical: 20,
    alignItems: "center",
  },
  heading: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 30,
    textAlign: "center",
  },
  content: {
    fontSize: 16,
    textAlign: "center",
    marginHorizontal: 20,
    lineHeight: 24,
  },
  verticalDividerContainer: {
    
    // 가로로 정렬하여 세로 구분선과 내용을 배치 
    // Align vertical dividers and content horizontally
    flexDirection: "row", 
    
    // 세로 중앙 정렬 
    // vertical center alignment
    alignItems: "center", 
    
    // 가로 중앙 정렬 
    // horizontal center alignment
    justifyContent: "center", 
    
    // 세로 구분선이 보일 수 있도록 컨테이너 높이 지정 
    // Specify container height so that vertical dividers are visible
    width: "90%",
    height: 150, 
    marginVertical: 20,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 10,
    padding: 10,
  },
});

export default FlmDividerApp;

4.스크린샷

Untitled