# Mecute Design Module for ReactNative

## How to install

- type command below in your project terminal

```
npm install @mecute/design

...

cd ios && pod install
```

<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}
      >
        TEXT YOU WANT TO TYPE
      </StyleButton>
    </View>
  )
}

export default App;


```

<br/>

### You can set throttle/debounce feature with duration or custom button style to 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}
        <!-- You can set throttle/debounce feature with duration -->
        pressOption={["debounce", 250]}
        <!-- You can set custom button style -->
        buttonStyle={{ backgroundColor: "blue" }}
      >
        TEXT YOU WANT TO TYPE
      </StyleButton>
    </View>
  )
}

export default App;
```

<br/>

### You can put Icon next to Button"s text either to the left or right.

```
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}
        leftIcon={
          <Image source={require("./assets/images/sample/TestBox.png")} />
        }
        rightIcon={
          <Image source={require("./assets/images/sample/TestBox.png")} />
        }
      >
        Icon rendering next to text
      </StyleButton>
    </View>
  )
}

export default App;


```

<br />

## Switch

```
  import React 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}
      switchStyle,
      containerStyle,
    />
  );
};

```
