DEV Community

tuantvk
tuantvk

Posted on • Edited on

MonalisaUI - UI component library for React Native

#reactnative #monalisaui #react

MonalisaUI

MonalisaUI

NPM

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

MonalisaUI

Usage

Visit https://tuantvk.gitbook.io/monalisaui/ for full documentation.

Github https://github.com/tuantvk/monalisa-ui

Install 

yarn add monalisa-ui
# or
npm install --save monalisa-ui
Enter fullscreen mode Exit fullscreen mode

Components

Example

MonalisaUI 

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;
Enter fullscreen mode Exit fullscreen mode

MonalisaUI 

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;
Enter fullscreen mode Exit fullscreen mode

MonalisaUI 

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;
Enter fullscreen mode Exit fullscreen mode

MonalisaUI 

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

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

export default Example;
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Read next

zainbinfurqan profile image

Currency Converter Chrome Extension

Zain Ahmed -

aniruddhaadak profile image

🚀 Lucide React: High-Quality, Open-Source Icons for Your React Projects

ANIRUDDHA ADAK -

high5dev profile image

Applying an Image on a 3D Model with React Three Drei’s Decal

Full-stack Software Engineer -

martinovicdev profile image

Building React Forms with Ease Using React Hook Form, Zod and Shadcn

Boris Martinovic -