npm package: @inspirasia/compex-native
Description: Compex for all solution
Author: Gungde Aditya
Latest version: 1.6.1

# Compex Native

<table>
    <tr>
        <th>Branch</th>
        <!-- <th>Pipeline</th>
        <th>Test coverage </th> -->
    </tr>
    <tr>
        <td>Master</td>
        <!-- <td>
            <a href="https://gitlab.com/inspirasia/core/core-www/commits/master">
                <img alt="pipeline status" src="https://gitlab.com/inspirasia/core/core-www/badges/master/pipeline.svg" />
            </a>
        </td>
        <td>
            <a shref="https://gitlab.com/inspirasia/core/core-www/commits/master">
                <img alt="coverage report" src="https://gitlab.com/inspirasia/core/core-www/badges/master/coverage.svg" />
            </a>
        </td> -->
    </tr>
</table>

## Getting Started

##### Compex for your solutions

## Basic Usage

- Globally installed node >= 6.0
- Globally installed npm >= 4.0
- Globally installed React Native CLI which allow you to easily create and initialize projects.

```shell
    yarn add @inspirasia/compex-native
    // or with npm
    npm install --save @inspirasia/compex-native
```

## Content

- [Container](#container)
- [Form Builder](#formbuilder)
- [Icon Button](#iconbutton)
- [Options Button](#optionsbutton)
- [Loading](#loading)
- [Small CardProduct](#smallcardproduct)
- [Medium CardProduct](#mediumcardproduct)
- [Large CardProduct](#largecardproduct)

## <a name="#container"></a> Container

##### Usage

```jsx
<Container
    isHeader
    headerIcon={
        <Icon type="MaterialCommunityIcons" size={24} name="menu" />
    }
    headerTitle="Compex">
. . .
</Container>

<Container
    isHeader
    isLoading={true}>
. . .
</Container>

<Container
    isHeader
    headerBackgroundColor="red"
    headerAndroidStatusBarColor="white">
. . .
</Container>
```

##### Properties

<table>
    <tr>
        <th width="100">Property</th>
        <th width="250">Description</th>
        <th width="80">Type</th>
        <th width="100">Default</th>
    </tr>
    <tr>
        <td>isLoading</td>
        <td>Showing indicator show or not</td>
        <td>
            <code>boolean</code>
        </td>
        <td>
            <code>false</code>
        </td>
    </tr>
    <tr>
        <td>isHeader</td>
        <td>Showing header show or not</td>
        <td>
            <code>boolean</code>
        </td>
        <td>
            <code>false</code>
        </td>
    </tr>
    <tr>
        <td>headerIcon</td>
        <td>Modify to show icon</td>
        <td>
            <code>any</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>headerContent</td>
        <td>Modify header content</td>
        <td>
            <code>any</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>headerTitle</td>
        <td>Modify title of header</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>headerTitleColor</td>
        <td>Modify title color</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>headerBackgroundColor</td>
        <td>Modify background color</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>headerAndroidStatusBarColor</td>
        <td>Modify android status bar color</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
</table>

## <a name="#formbuilder"></a> Form Builder

![alt text](https://media.giphy.com/media/9AIKRfDkEgrSsS25g1/giphy.gif)

##### Usage

```jsx
import { FormBuilder } from "@gungdeaditya/compex-native";

class Test extends Component {
    const fields =[...];

    handleSubmit (selectedIndex) {
        const formValues = this.formGenerator.getValues();
        console.log("FORM VALUES", formValues);
    }

    render () {
        return (
        <View style={styles.container}>
            <FormBuilder ref={c => { this.formGenerator = c; }} fields={fields} />
            <Button block onPress={() => this.handleSubmit()}>
                <Text>Login</Text>
            </Button>
        </View>
        )
    }
}

```

The form that showing above gif is generated by these <a href="https://gist.github.com/gungdeaditya/c635e51f6d1f290269fafe51e198b2a3">fields</a>

## <a name="#optionsbutton"></a> Options Button

![alt text](https://media.giphy.com/media/tHA7zJpdte2UPStrhx/giphy.gif)

##### Usage

```jsx
constructor () {
  super()
  this.state = {
    selectedIndex: 2
  }
  this.updateIndex = this.updateIndex.bind(this)
}

updateIndex (selectedIndex) {
  this.setState({selectedIndex})
}

render () {
  const buttons = ['Hello', 'World', 'Buttons']

  return (
    <OptionsButton
      onPress={this.updateIndex}
      selectedIndex={this.state.selectedIndex}
      buttons={buttons}
    />
  )
}

```

##### Properties

<table>
    <tr>
        <th width="100">Property</th>
        <th width="250">Description</th>
        <th width="80">Type</th>
        <th width="100">Default</th>
    </tr>
    <tr>
        <td>options</td>
        <td>An array for options</td>
        <td>
            <code>array</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>selectedIndex</td>
        <td>Showing header show or not</td>
        <td>
            <code>number</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>onChange</td>
        <td>Func that should returns to change state</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>buttonStyle</td>
        <td>Modify button style</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>titleStyle</td>
        <td>Modify title style</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>selectedButtonStyle</td>
        <td>Modify style when button selected</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>selectedTitleStyle</td>
        <td>Modify title style when button selected</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
</table>

## <a name="#optionsbutton"></a> Small Card Product

![](images/smallcard.png)

##### Usage

```jsx
<SmallCardProduct
  height={250}
  width={150}
  title="Hello World"
  price="$34.0"
  imgUri={{
    uri:
      "https://cdn-images.threadless.com/threadless-shop/products/6103/1272x920shirt_guys_10.jpg?w=1272&h=920"
  }}
/>
```

##### Properties

<table>
    <tr>
        <th width="100">Property</th>
        <th width="250">Description</th>
        <th width="80">Type</th>
        <th width="100">Default</th>
    </tr>
    <tr>
        <td>width</td>
        <td>Width of the image</td>
        <td>
            <code>number</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>height</td>
        <td>Height of the image</td>
        <td>
            <code>number</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>imgUri</td>
        <td>-</td>
        <td>
            <code>source</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>title</td>
        <td>-</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>price</td>
        <td>-</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>onPress</td>
        <td>Insert func when Card Pressed</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>imageStyle</td>
        <td>-</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>containerStyle</td>
        <td>-</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
</table>

## <a name="#optionsbutton"></a> Medium Card Product

![](images/mediumcard.png)

##### Usage

```jsx
<MediumCardProduct
  height={250}
  width={150}
  touched={true}
  title="Hello World"
  price="$34.50"
  realPrice="$25.0"
  imgUri={{
    uri:
      "https://cdn-images.threadless.com/threadless-shop/products/6103/1272x920shirt_guys_10.jpg?w=1272&h=920"
  }}
/>
```

##### Properties

<table>
    <tr>
        <th width="100">Property</th>
        <th width="250">Description</th>
        <th width="80">Type</th>
        <th width="100">Default</th>
    </tr>
    <tr>
        <td>width</td>
        <td>Width of the image</td>
        <td>
            <code>number</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>height</td>
        <td>Height of the image</td>
        <td>
            <code>number</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>touched</td>
        <td>If set to true, then love icon will be fullfill type</td>
        <td>
            <code>boolean</code>
        </td>
        <td>
            <code>false</code>
        </td>
    </tr>
    <tr>
        <td>imgUri</td>
        <td>-</td>
        <td>
            <code>source</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>title</td>
        <td>-</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>price</td>
        <td>Price before discount</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>realPrice</td>
        <td>Price after discount</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>onPress</td>
        <td>Insert func when Card Pressed</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
     <tr>
        <td>onLikePress</td>
        <td>Insert func when Like Button Pressed</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>imageStyle</td>
        <td>-</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>containerStyle</td>
        <td>-</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
</table>

## <a name="#optionsbutton"></a> Large Card Product

![](images/largecard.png)

##### Usage

```jsx
<LargeCardProduct
  touched={true}
  description="Hello World"
  likesCount={12345}
  imgUri={{
    uri:
      "https://cdn-images.threadless.com/threadless-shop/products/6103/1272x920shirt_guys_10.jpg?w=1272&h=920"
  }}
/>
```

##### Properties

<table>
    <tr>
        <th width="100">Property</th>
        <th width="250">Description</th>
        <th width="80">Type</th>
        <th width="100">Default</th>
    </tr>
    <tr>
        <td>touched</td>
        <td>If set to true, then love icon will be fullfill type</td>
        <td>
            <code>boolean</code>
        </td>
        <td>
            <code>false</code>
        </td>
    </tr>
     <tr>
        <td>imgUri</td>
        <td>-</td>
        <td>
            <code>source</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>likesCount</td>
        <td>-</td>
        <td>
            <code>number</code>
        </td>
        <td>
            <code>0</code>
        </td>
    </tr>
    <tr>
        <td>description</td>
        <td>-</td>
        <td>
            <code>string</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>onPress</td>
        <td>Insert func when Card Pressed</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>onLikePress</td>
        <td>Insert func when Like Button Pressed</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>onSharePress</td>
        <td>Insert func when Share Button Pressed</td>
        <td>
            <code>func</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>imageStyle</td>
        <td>-</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
    <tr>
        <td>containerStyle</td>
        <td>-</td>
        <td>
            <code>style</code>
        </td>
        <td>
            <code>none</code>
        </td>
    </tr>
</table>