arm-components/components/Button.js

components for react-native

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default class Button extends Component{
	constructor(props){
		super(props);
		this.state = {
			disabled: this.props.disabled || false,
			title: this.props.title,
			btn: this.props.btn,
			text: this.props.text,
			activeOpacity: this.props.activeOpacity || 0.5,
			icon: this.props.icon,
			iconRight: this.props.iconRight,
			onLayout: this.props.onLayout
		}
	}

	componentWillReceiveProps(newProps){
        this.setState({
        	disabled: newProps.disabled || false,
            title: newProps.title,
			btn: newProps.btn,
			text: newProps.text,
			activeOpacity: newProps.activeOpacity || 0.5,
			icon: newProps.icon,
			iconRight: newProps.iconRight
        });
    }

	render(){
		const { title, btn, text, activeOpacity, icon, iconRight, disabled, onLayout } = this.state;
		return(
			<TouchableOpacity 
				activeOpacity={ (disabled)?(1):(activeOpacity) }
				onPress={(disabled)?(null):(this.props.onPress)}
				onLongPress={(disabled)?(null):(this.props.onLongPress)}
				onPressIn={(disabled)?(null):(this.props.onPressIn)}
				onPressOut={(disabled)?(null):(this.props.onPressOut)}
				onLayout={onLayout}
			>
				<View style={[{
					display: 'flex',
					flexDirection: 'row',
					flexWrap: 'wrap',
					justifyContent: 'center',
					alignItems: 'center'
				}, btn]} 
					opacity={(disabled)?(0.5):(1)}
				>
					<View style={(typeof icon !== 'undefined')?({marginRight: 5}):({marginRight: 0})}>
						{ icon }
					</View>
					<Text style={text}>
						{ title }
					</Text>
					<View style={(typeof iconRight !== 'undefined')?({marginLeft: 5}):({marginLeft: 0})}>
						{ iconRight }
					</View>
				</View>
			</TouchableOpacity>
		)
	}
}