hcmobile-sdk/components/button/index.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { 
    View, 
    Text, 
    Image,
    ImageBackground,
    TouchableOpacity,
    StyleSheet 
} from 'react-native';
import PropTypes from 'prop-types';

// create a component
class Button extends Component {

    static propTypes = {
        text : PropTypes.string,
        onPress : PropTypes.func,
        textStyle : PropTypes.object,
        backImg : PropTypes.number,
        backImgStyle : PropTypes.object,
        activeOpacity : PropTypes.number,
        disable : PropTypes.bool,
        backImgResizeMode:PropTypes.string,
        style : PropTypes.object,
    }
    

    render() {
        const { 
            text,
            onPress,
            textStyle,
            backImg,
            backImgStyle,
            backImgResizeMode,
            disable,
            activeOpacity,
            style,
        } = this.props;
        const container = backImg ? styles.container : 
                            [styles.container,(style? style : styles.border)];
        return (
            <TouchableOpacity 
                style={container}
                onPress = {disable ? ()=>{} :  onPress }
                activeOpacity = {activeOpacity ? activeOpacity : 0.5}>
                <ImageBackground 
                    resizeMode = {backImgResizeMode ? backImgResizeMode : 'contain'}
                    source = {backImg ? backImg : null}
                    style = {backImgStyle ? backImgStyle : styles.imgBack}>
                    <Text style = {textStyle ? textStyle : styles.text}>
                        {text}
                    </Text>
                    
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    text:{
        fontSize: 14,
        color:'black',
    },
    imgBack:{
        padding:5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
    border:{
        borderRadius: 5,
        borderColor: '#5ab5f4',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

//make this component available to the app
export default Button;