Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nidorx/react-native-colibri
React Native Generic UI Components
https://github.com/nidorx/react-native-colibri
android animation carousel ios mobile modal react react-native table-view ui ux
Last synced: 2 months ago
JSON representation
React Native Generic UI Components
- Host: GitHub
- URL: https://github.com/nidorx/react-native-colibri
- Owner: nidorx
- License: mit
- Created: 2019-08-24T00:27:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T09:55:39.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T14:08:00.663Z (3 months ago)
- Topics: android, animation, carousel, ios, mobile, modal, react, react-native, table-view, ui, ux
- Language: TypeScript
- Size: 7.35 MB
- Stars: 10
- Watchers: 4
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
```bash
# Yarn
yarn add react-native-colibri
# NPM
npm i react-native-colibri --save
```
Link resources (Fonts on Android)
```bash
react-native link
```
## Guidelines
### Typography
#### Installing custom fonts
#### Configuring fonts in Theme
Example:
```jsx
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.
### DateFormatted
### DatePicker
### EmptyState
### Loading
### OkCancelView
### Segment
### Separator
### SimpleText
### Title
### AnimatedModal
### TableView
### Utils
## Migration
https://react-native-community.github.io/upgrade-helper/?from=0.60.5&to=0.67.2