arm-components/README.md

components for react-native

# react native
## Get started
### npm i arm-components or npm install arm-components
### import { Button, CheckBox, Container, Row, ImageBlock } from 'arm-components';

## example

<img src="https://github.com/AmurKhoyetsyan/JS/blob/master/react_native/img/arm-components.gif?raw=true" alt="exp of components react native" stye="width:320px;" />

## ImageBlock
### auto width or auto height
	<ImageBlock
		url={require('../img/1.jpg')} 
		width={100}
	/>
	<ImageBlock
		url={require('../img/1.jpg')} 
		height={100}
	/>

### source={{uri: url}} or source={require(url)}
	<ImageBlock
		url={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}} 
		height={100}
	/>
	<ImageBlock
		url={require('../img/1.jpg')}
		height={100}
	/>

### border radius
	<ImageBlock
		url={require('../img/1.jpg')} 
		width={imageBlockWidth}
		borderRadius={20}
	/>
	<ImageBlock
		url={require('../img/1.jpg')} 
		width={imageBlockWidth}
		borderRadius={{
			topLeft: 20,
			topRight: 20,
			bottomLeft: 20,
			bottomRight: 20
		}}
	/>

## Button
	<Button 
		activeOpacity={0.5} // 0.1 --- 1
		btn={style.parent} // {parent style}
		text={style.text} // {text style}
		onPress={this.function} //function
		onLongPress={this.function} //function
		onPressIn={this.function} //function
		onPressOut={this.function} //function
		diseblid={false} // false or true
		title="Click me" // title
		icon={<FontAwesome>{Icons.chevronLeft}</FontAwesome>} // icon left
		iconRight={<FontAwesome>{Icons.chevronLeft}</FontAwesome>} // icon right
	/>

## CheckBox
	<CheckBox
		disabled={ false }
		checked={ false }
		activeOpacity={ 1 }
		title={ 'Title' }
		titleLeft={ 'Left Title' }
		color={ '#000000' }
		width={18}
		onChange={}
	/>

## Container
	<Container
		style={{}}
	>
		...
		... // children
		...
	</Container>

## Row
	<Row
		style={{}}
	>
		...
		... // children
		...
	</Row>

...

# and finally all components have an onLyout attribute

## example
	constructor(){
		super();
		this.state = {
			imageBlockWidth: 0
		}
	}
	render(){
		let { imageBlockWidth } = this.state;
		return(
			<Container>
				<Row
					onLayout={(event)=>{
						let { x, y, width, height } = event.nativeEvent.layout;
						this.setState({
							imageBlockWidth: width / 3
						});
					}}
				>
					<ImageBlock
						url={require('../img/1.jpg')} 
						width={imageBlockWidth}
					/>
					<ImageBlock
						url={require('../img/2.jpg')} 
						width={imageBlockWidth}
					/>
					<ImageBlock
						url={require('../img/3.jpg')} 
						width={imageBlockWidth}
					/>
				</Row>
			</Container>
		)
	}