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