arm-components

react native

Get started

npm i arm-components or npm install arm-components

import { Button, CheckBox, Container, Row, ImageBlock } from 'arm-components';

example

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>
	)
}