@inspirasia/compex-native

Compex Native

Branch
Master

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

Property	Description	Type	Default
isLoading	Showing indicator show or not	boolean	false
isHeader	Showing header show or not	boolean	false
headerIcon	Modify to show icon	any	none
headerContent	Modify header content	any	none
headerTitle	Modify title of header	string	none
headerTitleColor	Modify title color	string	none
headerBackgroundColor	Modify background color	string	none
headerAndroidStatusBarColor	Modify android status bar color	string	none

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

Property	Description	Type	Default
options	An array for options	array	none
selectedIndex	Showing header show or not	number	none
onChange	Func that should returns to change state	func	none
buttonStyle	Modify button style	style	none
titleStyle	Modify title style	style	none
selectedButtonStyle	Modify style when button selected	style	none
selectedTitleStyle	Modify title style when button selected	style	none

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

Property	Description	Type	Default
width	Width of the image	number	none
height	Height of the image	number	none
imgUri	-	source	none
title	-	string	none
price	-	string	none
onPress	Insert func when Card Pressed	func	none
imageStyle	-	style	none
containerStyle	-	style	none

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

Property	Description	Type	Default
width	Width of the image	number	none
height	Height of the image	number	none
touched	If set to true, then love icon will be fullfill type	boolean	false
imgUri	-	source	none
title	-	string	none
price	Price before discount	string	none
realPrice	Price after discount	string	none
onPress	Insert func when Card Pressed	func	none
onLikePress	Insert func when Like Button Pressed	func	none
imageStyle	-	style	none
containerStyle	-	style	none

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

Property	Description	Type	Default
touched	If set to true, then love icon will be fullfill type	boolean	false
imgUri	-	source	none
likesCount	-	number	0
description	-	string	none
onPress	Insert func when Card Pressed	func	none
onLikePress	Insert func when Like Button Pressed	func	none
onSharePress	Insert func when Share Button Pressed	func	none
imageStyle	-	style	none
containerStyle	-	style	none