1. react-native-freelifemakers-ui NPM Module Install

npm install react-native-freelifemakers-ui

2.Usage

✔️Module import

import { FlmText } from 'react-native-freelifemakers-ui';

3.Full Code

// flmText.tsx
import React from "react";
import { View, StyleSheet, ScrollView } from "react-native";
import { FlmText } from "react-native-freelifemakers-ui"; // 사용법 / Usage

const flmText = () => {
  return (
    <ScrollView style={styles.scrollView}>
      <View style={styles.container}>
        <FlmText category="subtitle">1.기본 텍스트 / Basic Text</FlmText>
        <FlmText>FlmText1 - Basic</FlmText>
        <FlmText style={styles.sectionMargin}>FlmText1</FlmText>

        <FlmText category="subtitle">
          2.카테고리적용 / Apply Category : category =
          [Heading(H1~H6),Paragraph(p1,p2)]
        </FlmText>
        <FlmText>FlmText2 : categoy=h1 </FlmText>
        <FlmText category="h1" style={styles.sectionMargin}>
          FlmText2
        </FlmText>

        <FlmText>FlmText 3 - categoy=p1 </FlmText>
        <FlmText category="p1" style={styles.sectionMargin}>
          FlmText3
        </FlmText>

        <FlmText>FlmText 4 category=subtitle</FlmText>
        <FlmText category="subtitle" style={styles.sectionMargin}>
          FlmText4
        </FlmText>

        <FlmText>FlmText 5 category=label</FlmText>
        <FlmText category="label" style={styles.sectionMargin}>
          FlmText4
        </FlmText>

        <FlmText>FlmText 5 category=caption</FlmText>
        <FlmText category="caption" style={styles.sectionMargin}>
          FlmText4
        </FlmText>

        <FlmText category="subtitle">
          3.기타스타일적용 / Apply other styles : Style=[StyleSheet]
        </FlmText>
        <FlmText
          category="p1"
          style={{ backgroundColor: "#e0ffe0", padding: 10, borderRadius: 5 }}
        >
          P1에 배경색과 패딩을 추가했습니다. / Adding background and padding
        </FlmText>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: "#FFFFFF", // 배경색을 밝게 설정
  },
  container: {
    padding: 20,
    paddingTop: 50, // 상단 패딩 추가
  },
  sectionMargin: {
    marginBottom: 20, // 각 섹션 사이에 여백 추가
  },
});

export default flmText;

4.ScreenShot