Package detail

react-native-colibri

nidorx25MIT0.2.0-pre.1

React Native Colibri

button, card, carousel, carousel-image, carousel image, datepicker, date-picker, date picker, emptystate, empty-state, empty state, loading, segment, separator, simpletext, simple-text, simple text, toast, theme, modal, animated-modal, animated modal, tableview, table-view, table view, react native, react native button, react native card, react native carousel, react native carousel-image, react native carousel image, react native datepicker, react native date-picker, react native date picker, react native emptystate, react native empty-state, react native empty state, react native loading, react native segment, react native separator, react native simpletext, react native simple-text, react native simple text, react native toast, react native theme, react native modal, react native animated-modal, react native animated modal, react native tableview, react native table-view, react native table view

readme

React Native Colibri

Fast, Small and Beautiful

Colibri is front-end framework created to build cross platform Android & iOS mobile apps using ready to use generic components of React Native. It contains a set of general purpose UI components styled in a similar way.

Quick Start

You can install React Native Colibri via Yarn or NPM.

# Yarn
yarn add react-native-colibri

# NPM
npm i react-native-colibri --save

Link resources (Fonts on Android)

react-native link

Guidelines

Typography

Installing custom fonts

Configuring fonts in Theme

Example:

import { setTheme} from 'react-native-colibri';

setTheme({
    fontFamily:{
        thin: 'Roboto-Thin',
        thinItalic: 'Roboto-ThinItalic',
        light: 'Roboto-Light',
        lightItalic: 'Roboto-LightItalic',
        regular: 'Roboto-Regular',
        regularItalic: 'Roboto-RegularItalic',
        medium: 'Roboto-Medium',
        mediumItalic: 'Roboto-MediumItalic',
        bold: 'Roboto-Bold',
        boldItalic: 'Roboto-BoldItalic',
    }
});

Components

Button

A button consists of text that clearly communicates what action will occur when the user touches it.

Card

This page provides guidance on the base elements of a card

Carousel

Allows you to display multiple items in a horizontal slide.

CarouselImage

Allows you to display multiple items in a horizontal slide with images, like Google Play Store.

Package detail

react-native-colibri

readme

React Native Colibri

Quick Start

Guidelines

Typography

Installing custom fonts

Configuring fonts in Theme

Components

Button

Card

Carousel

CarouselImage

DateFormatted

DatePicker

EmptyState

Loading

OkCancelView

Segment

Separator

SimpleText

Title

AnimatedModal

TableView

Utils

Migration