react-native-uikit v0.1.6

react-native-UIKit

A collection of stateless (or minimally stateful) stylized and configurable UI presentation components for rapid prototyping in react native.

Getting Started

npm i react-native-uikit -S

import what you need

import { Button, Card } from 'react-native-uikit';

Components

AlertMessage, ArticleText, Avatar, AvatarHeader, Button, Card, Carousel, Close, DateItem, Divider, FieldError, Grid, GalleryOffset, Heading, ImageCustom, InputField, LikeBtn, ListBasic, LoginFb, LoginForm, MapSection, Message, MessageList, ProfileHeader, RatingBox, ReviewCell, Search, ThumbSwiper, Time

any margin issues occur between components wrap the component in a

<View></View>

Example

Components can be combined to create larger entities

import {AvatarHeader, ImageCustom, LikeBtn, ArticleText, Divider } from 'react-native-uikit';

<View style={{flex:1, paddingTop: 20}}>

  <View>
    <AvatarHeader
      src={'https://s3.amazonaws.com/uifaces/faces/twitter/9lessons/128.jpg'}
      heading={'John Doe'}
      timestamp={1460227647478}
      circle={true}
      backgroundColor={'#fff'}
      height={40}
      gutter={10}
    />
  <ImageCustom
      src={'https://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg'}
      height={300}
      onPress={() => console.log('pressed')}
    />
    <View style={{paddingTop: 10, paddingHorizontal: 10, backgroundColor: '#fff'}}>
      <LikeBtn
        active={true}
        likes={232}
        onPress={() => console.log('liked')}
      />
      <ArticleText
        username={'John Doe'}
        text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '}
        onPress={() => console.log('link to profile')}
      />
      <Divider color={'#eee'}/>
    </View>
  </View>

</View>

Documentation

AlertMessage

source

import { AlertMessage } from 'react-native-uikit'

<AlertMessage
  message={'This is the alert message here'}
  onPress={() => console.log('pressed')}
/>

ArticleText

source

import { ArticleText } from 'react-native-uikit'

<ArticleText
  username={'username'}
  text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}
  onPress={() => console.log('pressed')}
/>

ArticleList

source

import { ArticleList } from 'react-native-uikit'

<ArticleList
  headerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee', marginBottom: 3}}>HEADER CONTENT</Text>}
  items={[
    {id:0, category:'Misc', timestamp: 1463338637801, title:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', src:'https://placehold.it/200/798466'},
    {id:1, category:'Misc', timestamp: 1463338637801, title:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', src:'https://placehold.it/200/311112'},
    {id:2, category:'Misc', timestamp: 1463338637801, title:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', src:'https://placehold.it/200/D4BB69'},
    {id:3, category:'Misc', timestamp: 1463338637801, title:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', src:'https://placehold.it/200/ABB2B8'},
    {id:4, category:'Misc', timestamp: 1463338637801, title:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', src:'https://placehold.it/200/798466'},
    {id:5, category:'Misc', timestamp: 1463338637801, title:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', src:'https://placehold.it/200/919888'},
  ]}
  footerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee'}}>FOOTER CONTENT</Text>}
  onPress={(id) => console.log(id)}
/>

Avatar

source

import { Avatar} from 'react-native-uikit'

<Avatar
  src={'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'}
  size={40}
  circle={true}
  onPress={() => console.log('pressed')}
/>

AvatarHeader

source

import { AvatarHeader } from 'react-native-uikit'

<AvatarHeader src={'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'}
  heading={'Lynsey Smith'}
  timestamp={1460227647478}
  circle={true}
  backgroundColor={'#fff'}
  height={40}
  gutter={10}
/>

Button

source

import { Button } from 'react-native-uikit'

<Button
  color={'#fff'}
  backgroundColor={'#0094EA'}
  radius={5}>
  Submit
</Button>

ButtonOutline

source

import { ButtonOutline } from 'react-native-uikit'

<ButtonOutline
  color={'#222'}
  borderWidth={4}
  fontWeight={'bold'}
  fontSize={19}
  radius={1}>
  Submit
</ButtonOutline>

Card

source

import { Card } from 'react-native-uikit'

<Card
  onPress={() => console.log('card pressed')}
  src={'https://s-media-cache-ak0.pinimg.com/736x/5f/70/41/5f704159cdf6512cf21000ec4827fc03.jpg'}
  title={'Card title - Some quick example text to build on the card title and make up the bulk of the card'}
  link={'www.example.com'}
  radius={5}
  marginBottom={30}
/>

Carousel

source

import { Carousel } from 'react-native-uikit'

<Carousel
  images={[
    {id:0, src:'https://placehold.it/600/311112'},
    {id:1, src:'https://placehold.it/600/59C480'},
    {id:2, src:'https://placehold.it/600/546C80'},
    {id:3, src:'https://placehold.it/600/D58554'},
    {id:4, src:'https://placehold.it/600/F0CD9B'},
    {id:5, src:'https://placehold.it/600/311112'},
  ]}
  height={300}
/>

Close

source

import { Close } from 'react-native-uikit'

<Close
  size={50}
  color={'#222'}
  onPress={() => console.log('closed')}
/>

DateItem

source

import { DateItem } from 'react-native-uikit'

<DateItem
  timestamp={1460227647478}
  color={'#222'}
  marginLeft={10}
/>

Divider

source

import { Divider } from 'react-native-uikit'

<Divider
  color={'#eee'}
/>

FieldError

source

import { FieldError } from 'react-native-uikit'

<FieldError
  errorMsg={'error something has gone wrong!'}
  error={true}
  color={'red'}
  marginBottom={40}
/>

Grid

source

import { Grid } from 'react-native-uikit'

<Grid
  headerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee', marginBottom: 3}}>HEADER CONTENT</Text>}
  images={[
    {id:0, src:'https://placehold.it/200/798466'},
    {id:1, src:'https://placehold.it/200/311112'},
    {id:2, src:'https://placehold.it/200/ABB2B8'},
    {id:3, src:'https://placehold.it/200/D4BB69'},
    {id:4, src:'https://placehold.it/200/798466'},
    {id:5, src:'https://placehold.it/200/919888'},
    {id:6, src:'https://placehold.it/200/ABB2B8'},
    {id:7, src:'https://placehold.it/200/919888'},
    {id:8, src:'https://placehold.it/200/A9C781'},
    {id:9, src:'https://placehold.it/200/311112'},
  ]}
  footerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee'}}>FOOTER CONTENT</Text>}
  onPress={(id) => console.log(id)}
  itemsPerRow={3}
  spacing={2}
/>

GalleryOffset

source

import { GalleryOffset } from 'react-native-uikit'

<GalleryOffset
  imagesArray={[
    'https://placehold.it/600/311112',
    'https://placehold.it/600/A9C781',
    'https://placehold.it/600/919888',
    'https://placehold.it/600/ABB2B8',
    'https://placehold.it/600/ABB2B8',
    'https://placehold.it/600/919888',
  ]}
  display={'column'}
/>

ImageCustom

source

import { ImageCustom } from 'react-native-uikit'

<ImageCustom
  src={'https://placehold.it/600/ABB2B8'}
  height={300}
  overlayColor={'#222'}
  overlayOpacity={0.8}
  fullHeight={true}
>
<View style={{flex:1, justifyContent:'center'}}>
  <Text style={{color:'#fff', backgroundColor:'transparent',fontSize:90, fontWeight: '100', textAlign:'center'}}>YES HELLO</Text>
</View>
</ImageCustom>

InputField

source

import { InputField } from 'react-native-uikit'

<InputField
  placeHolder={'i am the placeholder txt'}
  gutter={10}
  color={'#222'}
  backgroundColor={'#eee'}
  radius={5}
/>

LikeBtn

source

import { LikeBtn } from 'react-native-uikit'

<LikeBtn
  active={true}
  likes={322}
  //color={'#fa0008'}
  onPress={() => console.log('liked')}
/>

ListBasic

source

import { ListBasic } from 'react-native-uikit'

<ListBasic
  headerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee', marginBottom: 3}}>HEADER CONTENT</Text>}
  items={[
    {id: 0, title:'Label'},
    {id: 1, title:'Label'},
    {id: 2, title:'Label'},
    {id: 3, title:'Label'}
  ]}
  footerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee'}}>FOOTER CONTENT</Text>}
  onPress={(i) => console.log(id)}
/>

LoginFb

source

import { LoginFb } from 'react-native-uikit'

<LoginFb
  onPress={() => console.log('login with fb')}
/>

LoginForm

source

import { LoginForm } from 'react-native-uikit'

<LoginForm
  loginFb={() => console.log('login with facebook')}
  onSubmit={(email, password) => console.log(email, password)}
  error={false}
  errorMsg={'username or password incorrect'}
/>

MapSection (Deprecated )

better alternative https://github.com/lelandrichardson/react-native-maps

import { MapSection } from 'react-native-uikit'

<MapSection
  height={300}
  fullHeight={false}
  region={{
    latitude: 40.712784,
    longitude: -74.005941,
    latitudeDelta: 10,
    longitudeDelta: 10,}
  }
  annotations={[{
    latitude: 40.712784,
    longitude: -74.005941,
    title: 'New York',
    subtitle: 'This is cool!'}]
  }
  />

Message

source

import { Message } from 'react-native-uikit'

<Message
  active={true}
  user={'Jon Snow'}
  title={'Winter is Coming'}
  message={'Hey Rob, have you seen the weather report on tv ?'}
  timestamp={1460227614421}
/>

MessageList

source

import { MessageList } from 'react-native-uikit'

<MessageList
  headerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee', marginBottom: 3}}>HEADER CONTENT</Text>}
  items={[
    {id:0, active:false, user: 'Jon Snow', title: 'Winter is Coming', message: 'Hey Rob, have you seen the weather report on tv ?', timestamp: 1460223614421},
    {id:1, active:true, user: 'Ric Lowe', title: 'Guess what I found?', message: 'Hey Rob, checkout this story ?', timestamp: 1460221614421},
    {id:2, active:true ,user: 'Jon Snow', title: 'title 3', message: 'Hey Rob, have you seen the weather report on tv ?', timestamp: 1460227614421},
  ]}
  footerContent={<Text style={{textAlign:'center', fontSize: 20, padding: 10, backgroundColor: '#eee'}}>FOOTER CONTENT</Text>}
  onPress={(id) => console.log(id)}
/>

ProfileHeader

source

import { ProfileHeader } from 'react-native-uikit'

<ProfileHeader
  profileImg={'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'}
  backgroundImg={'https://placehold.it/600/ABB2B8'}
/>

RatingBox

source import { RatingBox } from 'react-native-uikit'

<RatingBox rating={4} outOf={5}/>

ReviewCell

source

import { ReviewCell } from 'react-native-uikit'

<ReviewCell
  title={'Gaucho'}
  description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore'}
  src={'https://lh5.googleusercontent.com/proxy/lvLgnhcoHke5BEhTG-bVydssje9jV_GytcBidVZh4ADXEuiybVwXN4mlIbgxxOKn2pF1uharMho8lAqGSXcMGKJMigr42UH_qZ1THp4bZplV7uyThhmwEtq38oAhKW7V5Y_6j46jAEkxkrewm9wrd_T4K2JBUw8=w271-h180'}
  onPress={() => console.log('pressed')}
  rating={4}
  outOf={5}
/>

Search (Deprecated )

better alternative https://github.com/umhan35/react-native-search-bar

import { Search } from 'react-native-uikit'

<Search (Depreciated suggested )
  placeHolder={'Search for cool stuff..'}
  //backgroundColor={'red'}
  //innerBackground={'#eee'}
  //borderColor={'#222'}
  //border={false}
  radius={5}
  //iconColor={'red'}
  onChangeText={(text) => console.log(text)}
/>

ThumbSwiper

source

import { ThumbSwiper } from 'react-native-uikit'

<ThumbSwiper
  images={[
    {id:0, src:'https://placehold.it/200/798466'},
    {id:1, src:'https://placehold.it/200/311112'},
    {id:2, src:'https://placehold.it/200/ABB2B8'},
    {id:3, src:'https://placehold.it/200/D4BB69'},
    {id:4, src:'https://placehold.it/200/798466'},
    {id:5, src:'https://placehold.it/200/919888'},
    {id:6, src:'https://placehold.it/200/ABB2B8'},
    {id:7, src:'https://placehold.it/200/919888'},
    {id:8, src:'https://placehold.it/200/A9C781'},
    {id:9, src:'https://placehold.it/200/311112'},
  ]}
  onPress={(id) => console.log(id)}
/>

Time

source

11.47 AM

import { Time } from 'react-native-uikit'

<Time
  timestamp={1460227647478}
  color={'#222'}
/>