@mecute/design v0.4.14

Mecute Design Module for ReactNative

peer dependency

• react-native: 0.68.1

How to install

npm install @mecute/design

<!-- for iOS -->
cd ios && pod install

StyleButton

import React from 'react';
import { View } from "react-native";
import { StyleButton } from "@mecute/design";


function App () {
  const handleButtonPress = () => {
    console.log("Button Pressed!");
  };

  return (
    <View>
      <StyleButton
        theme="gray"
        type="enabled"
        size="xl"
        onPress={handleButtonPress}
        pressOption={["debounce", 250]}  // throttle, debounce feature with duration
        buttonStyle={{ backgroundColor: "blue" }}   // custom button style
        textStyle={{ color: "red" }}  // custom text style
      >
        TEXT HERE
      </StyleButton>
    </View>
  )
};

export default App;

Switch

import React, { useState } from 'react';
import { View } from "react-native";
import { Switch } from "@mecute/design";

function App() {
  const [checked, setChecked] = useState<boolean>(false);

  return (
    <Switch
      checked={checked}
      setChecked={setChecked}
      scale={1}
    />
  );
};

export default App;

Skeleton

Skeleton UI Pages

• <Skeleton.Profile />
• <Skeleton.ListView />
• <Skeleton.DetailView />

import React, { useState } from 'react';
import { View } from "react-native";
import { Skeleton } from "@mecute/design";

function App() {
  const [isLoading, setIsLoading] = useState<boolean>(false);

  ...

  return (
    ...
    {isLoading && <Skeleton.ListView />}
  );
};

export default App;