Material Button

Based On Material Button by Abdalla Emad Eldin

it's a small react native component with the right behavior for both android and ios.

Usage

import React, { Component } from 'react';
import { TouchableNativeFeedback } from 'react-native';
import { Button } from 'mfrag38-react-native-clickable-view';

export default class Example extends Component {
	render() {
		return (
			<Button
				icon='facebook'
				iconColor='white'
				iconPosition='left'
				text='Login With Facebook'
				textStyle={{ color: 'white' }}
				style={{
					backgroundColor: '#000',
					borderColor: '#000',
					width: 300,
				}}
				background={TouchableNativeFeedback.Ripple('#6473f3', true)} // android only (first param for color, second param set true if button has radius)
				activeOpacity={0.5} // ios only (set button opacity when clicked)
				loading={false} // if true button set to disable mood and content converted to loading indicator
				indicatorColor='white'
				iconType='material'
				disabled
			/>
		);
	}
}

Screenshoot

Supported Icons

Ionicons by Ben Sperry (v4.2.4, 696 icons)
Octicons by Github, Inc. (v8.0.0, 177 icons)
Evilicons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
FontAwesome by Dave Gandy (v4.7.0, 675 icons)
MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)

Installation

1- Run yarn add mfrag38-react-native-clickable-view

  #OR
  #npm install --save mfrag38-react-native-clickable-view

2- Run react-native link react-native-vector-icons

Properties

Button

| name | type | default | | :------------- | :------------------------------------- | :---------------------------------------------- | | style | Number | | | disabled | Bool | false | | onPress | Function | | | onPressIn | Function | | | onPressOut | Function | | | onLongPress | Function | | | delayPressIn | Number | | | delayPressOut | Number | | | delayLongPress | Number | | | loading | Bool | false | | indicatorColor | Color | #000 | | activeOpacity | Number (IOS Only) | 0.5 | | background | TouchableNativeFeedback (Android Only) | TouchableNativeFeedback.Ripple('#777777', true) |

Text

| name | type | default | | :-------- | :----- | :------ | | text | String | | textStyle | Object |

Icon

| Name | Type | Default | | :----------- | :----- | :------ | | iconType | String | ion | | icon | String | | iconSize | Number | 20 | | iconColor | String | #000 | | iconPosition | String | left | | iconStyle | Object |

## License

The MIT License.

See [LICENSE](LICENSE)