MonalisaUI - UI component library for React Native
Tags: reactnative, monalisaui, react
Published: 2019-12-07 05:24:51

<p align="center">
  <img
	  src="https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisa-ui-logo.png"
		alt="MonalisaUI"
		width="150">
</p>


# MonalisaUI


[![NPM](https://nodei.co/npm/monalisa-ui.png?downloads=true)](https://nodei.co/npm/monalisa-ui/)

MonalisaUI is a free and open source UI component library for React Native to build native mobile apps for iOS and Android platforms.

<p align="center">
  <img
	  src="https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisa-cover.png"
		alt="MonalisaUI"
		width="1200">
</p>

## Usage

Visit [https://tuantvk.gitbook.io/monalisaui/](https://tuantvk.gitbook.io/monalisaui/) for full documentation.

[Github https://github.com/tuantvk/monalisa-ui](https://github.com/tuantvk/monalisa-ui)


### Install

```bash
yarn add monalisa-ui
# or
npm install --save monalisa-ui
```

### Components

- [ArticleCard](https://tuantvk.gitbook.io/monalisaui/articlecard)
- [Avatar](https://tuantvk.gitbook.io/monalisaui/avatar)
- [Badge](https://tuantvk.gitbook.io/monalisaui/badge)
- [Button](https://tuantvk.gitbook.io/monalisaui/button)
- [Card](https://tuantvk.gitbook.io/monalisaui/card)
- [Col](https://tuantvk.gitbook.io/monalisaui/col)
- [Divider](https://tuantvk.gitbook.io/monalisaui/divider)
- [Icon](https://tuantvk.gitbook.io/monalisaui/icon)
- [Input](https://tuantvk.gitbook.io/monalisaui/input)
- [ListItem](https://tuantvk.gitbook.io/monalisaui/listitem)
- [Pricing](https://tuantvk.gitbook.io/monalisaui/pricing)
- [ProgressBar](https://tuantvk.gitbook.io/monalisaui/progressbar)
- [Rating](https://tuantvk.gitbook.io/monalisaui/rating)
- [Row](https://tuantvk.gitbook.io/monalisaui/row)
- [Segment](https://tuantvk.gitbook.io/monalisaui/segment)
- [SocialIcon](https://tuantvk.gitbook.io/monalisaui/socialicon)
- [Spinner](https://tuantvk.gitbook.io/monalisaui/spinner)
- [Switch](https://tuantvk.gitbook.io/monalisaui/switch)
- [Tag](https://tuantvk.gitbook.io/monalisaui/tag)
- [Text](https://tuantvk.gitbook.io/monalisaui/text)
- [Textarea](https://tuantvk.gitbook.io/monalisaui/textarea)
- [Theme](https://tuantvk.gitbook.io/monalisaui/theme)


## Example

<p align="center">
  <img
	  src="https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisaui-articlecard.png"
		alt="MonalisaUI"
		width="300">
</p>

```javascript
import React from 'react';
import { View } from 'react-native';
import { ArticleCard } from 'monalisa-ui';

const datas = [
  {
    img: 'http://lorempixel.com/640/480/abstract',
    title: 'Et saepe in aut voluptates illum eum laudantium ipsam similique.',
    category: 'Aut voluptatem dicta',
    author: 'Dr. Ida Marvin',
    time: '21 min ago',
  },
  {
    img: 'http://lorempixel.com/640/480/abstract',
    title: 'Et saepe in aut voluptates illum eum laudantium ipsam similique.',
    category: 'Aut voluptatem dicta',
    author: 'Dr. Ida Marvin',
    time: '21 min ago',
  },
  {
    img: 'http://lorempixel.com/640/480/abstract',
    title: 'Et saepe in aut voluptates illum eum laudantium ipsam similique.',
    category: 'Aut voluptatem dicta',
    author: 'Dr. Ida Marvin',
    time: '21 min ago',
  },
];

const Example = () => (
  <View>
    {
      datas.map((data, index) => (
        <ArticleCard
          key={index}
          {...data}
          style={{ marginBottom: 15 }}
        />
      ))
    }
  </View>
);

export default Example;
```

<p align="center">
  <img
	  src="https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisaui-listitem.png"
		alt="MonalisaUI"
		width="300">
</p>

```javascript
import React from 'react';
import { View } from 'react-native';
import { ListItem } from 'monalisa-ui';

const Example = () => (
  <View>
    <ListItem
      title="Matteo Kilback"
      subTitle="United States of America"
    />
    <ListItem
      title="Lauriane Dibbert"
      subTitle="United States of America"
    />
  </View>
);

export default Example;
```

<p align="center">
  <img
	  src="https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisaui-socialicon.png"
		alt="MonalisaUI"
		width="300">
</p>

```javascript
import React from 'react';
import { View } from 'react-native';
import { SocialIcon } from 'monalisa-ui';

const Example = () => (
  <View>
    <SocialIcon
      type="facebook"
    />
    <SocialIcon
      type="twitter"
    />
    <SocialIcon
      type="instagram"
    />
    <SocialIcon
      type="youtube"
    />
  </View>
);

export default Example;
```

<p align="center">
  <img
	  src="https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisaui-rating.png"
		alt="MonalisaUI"
		width="300">
</p>

```javascript
import React from 'react';
import { View } from 'react-native';
import { Rating } from 'monalisa-ui';

const Example = () => (
  <View>
    <Rating />
  </View>
);

export default Example;
```

## Contributing

So you want to contribute? Fun! I love seeing new PRs for MonalisaUI. If you are thinking about working on something, feel free to make an issue beforehand so that you can make sure it'll be worth your time!