Compex Native

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.

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

Content

• Container
• Form Builder
• Icon Button
• Options Button
• Loading
• Small CardProduct
• Medium CardProduct
• Large CardProduct

Container

Usage

<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

Form Builder

Usage

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 fields

Options Button

Usage

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

Small Card Product

Usage

<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

Medium Card Product

Usage

<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

Large Card Product

Usage

<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