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

npm install react-native-freelifemakers-ui

2.Usage

✔️Default

      {/* 예제 1: 기본 메뉴 / Default Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible1}
        onClose={() => setIsMenuVisible1(false)}
        items={menuItems1}
        menuHeader={menuHeader1}
        menuDirection="left"
        menuWidth={0.7}
      />

✔️Custom

      {/* 예제 1: 기본 메뉴 / Default Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible1}
        onClose={() => setIsMenuVisible1(false)}
        items={menuItems1}
        menuHeader={menuHeader1}
        menuDirection="left"
        menuWidth={0.7}
      />

3. Full code

1. In Expo, the icon module is imported as follows:

import { Ionicons } from "@expo/vector-icons";

2)In ReactNative CLI, the icon module is imported as follows:

import Ionicons from 'react-native-vector-icons/Ionicons';

3)Example code

import React, { useState } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import {
  FlmDrawerMenu,
  FlmText,
  FlmButton,
} from "react-native-freelifemakers-ui";

const FlmDrawerMenuApp = () => {
  const [isMenuVisible1, setIsMenuVisible1] = useState(false);
  const [isMenuVisible2, setIsMenuVisible2] = useState(false);
  /**
   *
   * @param {string} label - 선택된 메뉴 항목의 레이블입니다. 
   * The label of the selected menu item.
   */

  const selectedMenu = (label) => {
    // 매개변수 'label' 값을 사용하여 Alert 메시지를 동적으로 변경합니다.
    // Dynamically change the Alert message using the value of the parameter 'label'.
    console.log(`선택된 메뉴/Selected Menu: ${label}`);
    Alert.alert(
      `${label} 선택됨/Selected ${label}`,
      `${label}에 대한 추가 로직이 실행됩니다.
      /Additional logic for ${label} will be executed.`,
    ); 
    
    // 메뉴 항목을 선택한 후 메뉴를 자동으로 닫습니다. 
    // Automatically closes the menu after selecting a menu item.
    setIsMenuVisible1(false);
    setIsMenuVisible2(false);
  };

  // --- 예제 1: 기본 스타일 메뉴 ---
  // --- Example 1: Default Style Menu ---
  const menuItems1 = [
    {
      label: "홈/Home",
      icon: <Ionicons name="home" size={20} color="#333" />,
      onPress: () => selectedMenu("홈/Home"),
    },
    {
      label: "프로필/Profile",
      icon: <Ionicons name="person" size={20} color="#333" />,
      onPress: () => selectedMenu("프로필/Profile"),
    },
    {
      label: "설정/Settings",
      icon: <Ionicons name="settings" size={20} color="#333" />,
      onPress: () => selectedMenu("설정/Settings"),
    },
  ];

  const menuHeader1 = (
    <View style={{ padding: 20, backgroundColor: "#f0f0f0" }}>
      <Text style={{ fontSize: 20, fontWeight: "bold" }}>기본 메뉴</Text>
      <Text>환영합니다!</Text>
    </View>
  );

  // --- 예제 2: 커스텀 스타일 메뉴 ---
  // --- Example 2: Custom Style Menu ---
  const menuItems2 = [
    {
      label: "새로운 소식/News",
      icon: <Ionicons name="newspaper-outline" size={22} color="#fff" />,
      onPress: () => selectedMenu("새로운소식/News"),
    },
    {
      label: "내 메시지/Messages",
      icon: <Ionicons name="chatbox-outline" size={22} color="#fff" />,
      onPress: () => selectedMenu("내 메세지/Message"),
    },
    {
      label: "로그아웃/Logout",
      icon: <Ionicons name="log-out-outline" size={22} color="#fff" />,
      onPress: () => selectedMenu("로그아웃/Logout"),
    },
  ];

  const menuHeader2 = (
    <View
      style={{
        padding: 20,
        backgroundColor: "#1e88e5",
        flexDirection: "row",
        alignItems: "center",
      }}
    >
      <Ionicons
        name="person-circle-outline"
        size={40}
        color="#fff"
        style={{ marginRight: 10 }}
      />
      <View>
        <Text style={{ fontSize: 22, fontWeight: "bold", color: "#fff" }}>
          User Name
        </Text>
        <Text style={{ color: "#e3f2fd" }}>[email protected]</Text>
      </View>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>메뉴 예시/Menu Example</Text>
      <View style={styles.buttonContainer}>
        <FlmButton
          title="기본 메뉴 열기/Default Menu Open"
          onPress={() => setIsMenuVisible1(true)}
          style={{ marginBottom: 10 }}
        />
      </View>
      <View style={styles.buttonContainer}>
        <FlmButton
          title="커스텀 메뉴 열기/Cusom Menu Open"
          onPress={() => setIsMenuVisible2(true)}
        />
      </View>
      {/* 예제 1: 기본 메뉴 / Default Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible1}
        onClose={() => setIsMenuVisible1(false)}
        items={menuItems1}
        menuHeader={menuHeader1}
        menuDirection="left"
        menuWidth={0.7}
      />
      {/* 예제 2: 커스텀 메뉴 / Custom Menu */}
      <FlmDrawerMenu
        visible={isMenuVisible2}
        onClose={() => setIsMenuVisible2(false)}
        items={menuItems2}
        menuHeader={menuHeader2}
        menuDirection="right"
        menuWidth={0.8}
        menuContainerStyle={{ backgroundColor: "#9370DB" }}
        menuItemStyle={{ borderBottomColor: "#7555B0", paddingVertical: 18 }}
        itemTextStyle={{ fontSize: 18, color: "#fff", fontWeight: "bold" }}
        overlayColor="rgba(33, 150, 243, 0.3)"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    width: "80%",
  },
});

export default FlmDrawerMenuApp;