👉 Available for use with both React Native Expo and ReactNativeCLI.

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

npm install react-native-freelifemakers-ui

2.Usage

✔️Module import

import { FlmButton } from "react-native-freelifemakers-ui";

✔️Example Code

 {/* default */}
      <FlmButton
        title="Click!"
        onPress={handlePress}
      />

    {/* 스타일 추가버튼 / Add style button */}
    <FlmButton
        title="Green Button"
        onPress={goToApp}
        style={{ backgroundColor: '#28a745', marginTop: 20 }}
        textStyle={{ fontSize: 18 }}
    />

    {/* 비활성화된 버튼 / Disable Button*/}
    <FlmButton
        title="Disable Button"
        onPress={handlePress}
        disabled={true}
        style={{ marginTop: 20 }}
    />

3.Full code

import { Alert, Text, View, ScrollView, SafeAreaView } from "react-native";
import { FlmButton } from "react-native-freelifemakers-ui"; // 사용법 / Usage
//import { FlmRadioGroup } from "./FlmRadioGroups";
import { Ionicons } from "@expo/vector-icons";
// useRouter 훅 임포트 / Import the useRouter hook
import { useRouter } from "expo-router"; 

const handlePress = () => {
  Alert.alert("버튼이 눌렸습니다!!/The button was pressed!!.");
};

export default function Index() {
  // useRouter 훅을 컴포넌트의 최상위 레벨에서 호출합니다.
  // Call the useRouter hook at the top level of the component.
  const router = useRouter();

  const handleIconButtonPress = () => {
    // 이제 router 객체를 사용하여 화면 이동을 처리합니다.
    // '/flmText' 경로로 이동한다고 가정합니다.
    // 이 경로에 해당하는 파일 (예: app/flmText.tsx 또는 app/flmText.js)이 있어야 합니다.
    // Now, we'll use the router object to handle screen navigation.
    // Assuming we're navigating to the '/flmText' route.
    // There should be a file corresponding to that route, 
    // such as app/flmText.tsx or app/flmText.js.
    router.push("/flmText");
  };

  // 함수 정의 시 파라메터를 받도록 변경
  // Changed the function definition to accept parameters
  const navigateToScreen = (screenName) => {
    console.log(`Navigating to: /${screenName}`);
    router.push(`/${screenName}`);
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#f9f9f9" }}>
      <ScrollView contentContainerStyle={{ padding: 20, alignItems: "center" }}>
        <Text style={{ marginBottom: 20 }}>FlmButton Style</Text>

        {/* 기본버튼 / default button */}
        <FlmButton title="Default Button" onPress={handlePress} />

        {/* 연두색 버튼 / Green Color Button*/}
        <FlmButton
          title="Green Button"
          onPress={handlePress}
          style={{ backgroundColor: "#28a745", marginTop: 20 }}
          textStyle={{ fontSize: 18 }}
        />

        {/* 아이콘을 버튼 / icon button */}
        <FlmButton
          title="Icon Button!"
          icon={<Ionicons name="heart-outline" size={20} color="white" />}
          onPress={handleIconButtonPress} // 수정된 핸들러 연결
          style={{ backgroundColor: "#FFA500", marginTop: 20 }}
        />

        {/* 비활성화된 버튼 / Disable Button*/}
        <FlmButton
          title="Disable Button"
          onPress={handlePress}
          disabled={true}
          style={{ marginTop: 20 }}
        />

        {/* 아이콘을 버튼2 / icon button */}
        <FlmButton
          title="move to FlmTextInput"
          icon={<Ionicons name="heart-outline" size={20} color="white" />}
          onPress={() => navigateToScreen("flmTextInput")} //
          style={{ backgroundColor: "#FFA500", marginTop: 20 }}
        />

        {/* 기본버튼2 / default button2 */}
        <FlmButton
          title="move to FlmRadio"
          onPress={() => navigateToScreen("flmRadio")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼3 / default button3 / FlmCheckBox */}
        <FlmButton
          title="move to FlmCheckBox"
          onPress={() => navigateToScreen("flmCheckBox")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼3 / default button3 / FlmModal */}
        <FlmButton
          title="move to FlmModal"
          onPress={() => navigateToScreen("flmModal")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼4 / default button4 / FlmBottomSheet */}
        <FlmButton
          title="move to FlmBottomSheet"
          onPress={() => navigateToScreen("flmBottomSheet")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼5 / default button5 / FlmSnackBar - Using Context API */}
        <FlmButton
          title="move to FlmSnackBar"
          onPress={() => navigateToScreen("flmSnackBar")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼6 / default button6 / FlmSnackBar - Custom */}
        <FlmButton
          title="move to FlmSnackBar Custom"
          onPress={() => navigateToScreen("flmSnackBarCustom")}
          style={{ marginTop: 20 }}
        />
        {/* 기본버튼7 / default button7 / FlmSearchBar #007bff #9370DB*/}
        <FlmButton
          title="move to FlmSearchBar Custom"
          onPress={() => navigateToScreen("flmSearchBar")}
          style={{ backgroundColor: "#F44336", marginTop: 20 }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

4.ScreenShot