# Mecute Design Module for ReactNative

## How to install

- type command below in your project terminal

```
npm install @mecute/design

...

cd ios && pod install (for iOS)
```

<br/>

## StyleButton

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


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

  return (
    <View>
      <StyleButton
        theme="gray"
        type="enabled"
        size="xl"
        onPress={onPressHandler}
        pressOption={["debounce", 250]}  // throttle, debounce feature with duration
        buttonStyle={{ backgroundColor: "blue" }}   // custom button style
        textStyle={{ color: "red" }}  // custom text style
      >
        TEXT YOU WANT TO TYPE
      </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}
    />
  );
};

```

<br />
<br />

## Skeleton

Skeleton UI Pages we provide for better UX

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

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

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

  ...

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


```
