0.0.4 • Published 5 years ago

brcomponentsrn v0.0.4

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

BrComponentsRNBasic components for react-native

Intro

Components basics with props useful.

Why

Components have semantic names with html, which makes learning easier. Ex: <BrContent>, <BrButton, <BrTextField>.

Some properties :

  • flex
  • Middle
  • Bottom
  • Top
  • Row
  • Bg
  • vh
  • vw
  • Style={{ props natives View(Component Native) }}

How

Just import lib like this: import {BrContent} from brcomponents';

Install

npm install --save brcomponentsrn

Usage

import {BrContent} from 'brcomponentsrn';

// ...
export default function Login() {
  return (

    <ImageBackground 
        source={require('../assets/background.jpg')} 
        style={{width:'100%',height:'100%'}}>

          <Block flex={1} middle bg='rgba(66,44,140,0.9)'>
            <Block flex={0.5} botton vw={'100%'} >
              <Text
                style={{
                  fontWeight:'bold',
                  fontSize:45,
                  color:'#ccc'
                }}
              >
                BRComponentsRN
              </Text>
            </Block>
            <Block flex={0.4} middle vw={'100%'}  >
              <TextField vw={'90%'} hint='Username' />
              <TextField vw={'90%'} hint='Password' />
              <BrButton  vw={'90%'}  title='Enter'/>
              <Block alRigth vw={'90%'} style={{marginTop:5}} ><Text style={[styles.label,styles.corLink]}>Esqueci a senha</Text></Block>
            </Block>
            <Block middle row flex={0.1}>
                <Text style={styles.label}>Não tem conta?</Text>
                <Text style={[styles.label,styles.corLink]}> Crie aqui!</Text>
            </Block>
          </Block>

    </ImageBackground>
    
  );
}