What is this?

Common UI Utils for react native

Installation

npm i t2s-rn-common-ui --save

Usage

##Button

import {Button} from 't2s-rn-common-ui';

handleButtonClick() {
    console.log('Button is clicked!');
}

<Button
    style={styles.buttonStyle}
    disable={false}
    onPress={() => this.handleButtonClick()}
>
    SAVE
</Button>

Properties

name | description | type | default :--------------------- |:------------------------------------------- | ----------:|:------------------ onPress | Callback method for button click | Function | - disable | Button can be enabled/disabled | Boolean | false children | Button Text | String | - buttonStyle | Style for button | Object | - buttonTextStyle | Style for button text | Object | -

##OTPView

import {OTPView} from 't2s-rn-common-ui';

<OTPView
         autoFocus={false}
         keyboardType="numeric"
         codeLength={4}
         onFulfill={(code) => this._onFinishCheckingCode1(code)}
         onCodeChange={(code) => {console.log(code)}}
/>

Properties

Customised react-native-confirmation-code-input library https://github.com/ttdung11t2/react-native-confirmation-code-input. See their docs for more info.

##Banner

import {Banner} from 't2s-rn-common-ui';

<Banner bannerText="12" bannerColor="#C73B32" />

Properties

name | description | type | default :--------------------- |:------------------------------------------- | ----------:|:------------------ bannerText | Text for banner | String | - bannerColor | Color for banner | String | green

##CardView

import {CardView} from 't2s-rn-common-ui';

<Banner bannerText="12" bannerColor="#C73B32" />

Properties

name | description | type | default :--------------------|:------------------------------------------------| ----------:|:------------------ children | Components that has to be render inside cardview| Node | - cardStyle | Style for CardView | Object | -

##DialogModal

import {DialogModal} from 't2s-rn-common-ui';

<DialogModal
       isVisible={this.state.showPopup}
       requestClose={() => this.setState({ showPopup: false })}
       title={'Some title here'}
       description={'Some description here'}
       positiveButtonClicked={() => {
           this.setState({ showPopup: false });
       }}
       negativeButtonClicked={() => this.setState({ showPopup: false })}
       positiveButtonText={'OK'}
       negativeButtonText={'CANCEL'}
/>
Note: By default only `positiveButtonText` is rendered. You can include `negativeButtonText` if you need it.

Properties

name | description | type | default :--------------------- |:------------------------------------------- | ----------:|:------------------ isVisible | Based on this prop, modal can be shown/hide | Boolean | - title | title for the modal | String | - description | content for the modal | String | - negativeButtonText | Positive button text | String | - positiveButtonText | Negative button text | String | - positiveButtonClicked | Callback method for Positive button | Function | - negativeButtonClicked | Callback method for Negative button | Function | - requestClose | | Function | - positiveButtonStyle | Style for Positive Button | Object | - negativeButtonStyle | Style for Negative Button | Object | - dialogCancelable | whether this Modal can cancelable | Boolean | true titleCenter | Button Text | String | true