# 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
```

<br/>

## 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;
```

<br />
<br />

## 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;
```

<br />
<br />

## 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;
```
