eurekalabscompany / eureka-rn-components Goto Github PK

View Code? Open in Web Editor NEW

3.0 2.0 0.0 48 KB

Uma biblioteca para componentes para React Native

License: MIT License

JavaScript 100.00%

eureka-rn-components's Introduction

eureka-rn-components

A Libary of React Native Components

This library uses the react-native-elements library. All these components can be used.

Installation

npm i https://github.com/EurekaLabs-Dev/eureka-rn-components --save

Install react-native-vector-icons (if you do not already have it)

npm i react-native-vector-icons --save && react-native link react-native-vector-icons

If you have any issues with icons not working or installation of React Native Vector Icons, check out their installation guide here

Included

API

Avatar

Take an image and description to show a circulated image with the description.

import { Avatar } from 'eureka-rn-components';
<Avatar
    image={{uri: 'http://natashavanzetti.com/wp-content/uploads/2015/08/Ther-1-person-thumbnail.png'}}
    size={60}
    description='Joana'
    />

Avatar PropTypes

prop	default	type	description
image	none	any (required)	A source from an image, the same for the Image component.
size	40	number	The size is the width and height of the Image Circle.
description	none	any	Can be a text or Component. This shows under the image.
style	none	object	This style is applied in the container.

Timeline

Take a array of items and show that in a simple timeline(circles over a line).

The items in the array must be in this format:

  {
    title: string,
    startDate: datetime,
    endDate: datetime,
    status: string (optional)
  }

  import { Timeline } from 'eureka-rn-components';

  const itens = [{
    title: 'Jogo de Futebol',
    startDate: Date.now() + 200 * 3600 * 1000,
    endDate: Date.now(),
    status: 'Vai iniciar'
  }, {
    title: 'Acampamento',
    startDate: Date.now(),
    endDate: Date.now(),
    status: 'Em Andamento'
  }, {
    title: 'Jogo de boliche',
    startDate: Date.now() - 125 * 3600 * 1000,
    endDate: Date.now(),
    status: 'Em Andamento'
  }];

  <View style={{flex: 1, paddingTop: 20}}>
    <Timeline
      currentDayColor='orange'          
      itens={itens}/>
  </View>

Timeline PropTypes

prop	default	type	description
itens	none	array (required)	Items that will be shown in timeline.
currentDayColor	grey	string	Circle's background color of the day that matches the current date.
currentDayTextColor	white	string	Text's background color of the day that matches the current date.
lineColor	#c4c4c4	string	Color of the line between the circles and circle's border.

Recommend Projects