Mobile 개발/RN(React Native)

리액트 네이티브 2021 ui kit top9

히핑소 2021. 5. 19. 16:27
반응형

1. Native Base

Web-site: https://nativebase.io/
GitHub stars: 13.9k
Price: Free
License: Apache License 2.0
Demo: https://expo.io/@geekyants/nativebasekitchensink
Type of support: Community support via GitHub issues
Documentation: Full documentation


Ingenious, sleek and dynamic front-end framework for building cross-platform Android and iOS mobile apps using ready-to-use generic components of React Native. With Native Base, you can take advantage of shared UI cross-platform components, which will radically increase your productivity. It provides great native look and feel, with platform-specific design for Android and iOS over the same JavaScript codebase. Native Base is 100% open source. Here are a nice starter kit and a nice playground.

What it offers:

  • Easy component styling;
  • Wide range of component options;
  • Use any native third-party libraries;
  • Import custom components;
  • Intuitive component structure;
  • 3 preset themes (Platform, Material, and CommonColor);

 

2. React Native Elements

Web-site: https://react-native-elements.github.io/react-native-elements/
GitHub stars: 18.9k
Price: Free
License: MIT
Demo: https://expo.io/@monte9/react-native-elements-app
Type of support: Community support via GitHub issues
Documentation: Full documentation


React Native Elements is Cross-Platform consistent design across Android, iOS, and web. This is the key differentiator from the other free React Native UI Kits. It is easy to use, and it’s been built completely in JavaScript. The team also provides a playground app on Expo. The design system facilitates easy customization and styling of any component. The main aim for React Native Elements is to facilitate an all-in-one UI kit to create apps in the React Native ecosystem. It contains many great UI components made by developers all around the open source community. React Native Elements assembles these component packages together by providing you a convenient kit with consistent APIs and amazing look and feel.

Key facts:

  • All-in-one UI kit;
  • Supports iOS and Android;
  • Supports Expo;
  • Comprehensive documentation;
  • A decent list of small components like avatar, buttons, form elements, icons, typography, sliders;
  • Complex elements like pricing, rating, card, search bar, checkbox, list items.

3. Shoutem

Web-site: https://shoutem.github.io/
GitHub stars: 4.5k
Price: Free
License: MIT License
Demo: 
Type of support: Community support via GitHub issues
Documentation: Full documentation


Shoutem is an open source UI toolkit for React Native with a simple, affordable and powerful mobile application creator tool that can be used to develop both Android and iOS apps. It provides an easy to use app designer interface which can help app developers save time. The coding part is not required, due to the drag and drop interface which you can preview in a native preview app experience. With Shoutem you can import or create content with a powerful CMS tool. It also offers an analyzing tool through which you can monitor user behavior and optimize your app’s UI. You can monetize your users and generate profits with the help of multiple modules provided by Shoutem.

Key features:

  • 20+ UI components;
  • Variety of app themes;
  • Parallax effects;
  • Transition animations;
  • Large extension library.

4. UI Kitten

Web-site: https://akveo.github.io/react-native-ui-kitten/
GitHub stars: 6.7k
Price: Free
License: MIT License
Demo: https://play.google.com/store/apps/details?id=com.akveo.kittenTricks
Type of support: Dedicated support for the paid version
Documentation: Full documentation


React Native UI Kitten is a framework that includes a set of commonly used UI components styled in a similar way. It creates an environment for you to focus on business logic and also it takes care of the UI appearance of your app. It brings on a concept similar to CSS classes, to save you time when styling particular elements. The most noteworthy aspect of UI kitten is that you can change the theme you are using for your app easily and efficiently just by changing some variables. It comes with the Kitten Tricks platform which is a live demo of React Native UI Kitten published on both App Store and Google Play. UI kitten is a perfect starter kit for your next cross-platform React Native app.

5. Nachos UI

Web-site: https://avocode.com/nachos-ui
GitHub stars: 2k
Price: From 15$ per month
License: MIT License
Demo: 
Type of support: Community support via GitHub issues
Documentation: Full documentation


Nachos UI represents a React Native component library. Nachos UI provides over 30 UI components to work with. It facilitates customizable UI components that work on the web. It provides Jest Snapshot testing and uses prettier, an opinionated JavaScript formatter. You can pick from a bunch of pre-coded UI components ready for your next application in JavaScript or React. It was coded using Avocado. Avocode is a fully-featured platform for sharing, hands-off and inspects Photoshop and Sketch designs.

Key features:

  • 30+ pre-coded UI components including typography, radio, spinner, slider, card, etc.;
  • React Native Web support.

6. React Native UI Library


This UI library in React Native includes UI toolset and components libraries. React Native UI libraries enables you to build better apps faster with the minimum effort by providing you with a pre-made set of components that you can leverage. These set of components are customizable and can be customized later based on your needs. There are numerous React Native UI libraries and toolkits. The most popular ones are React Native Icons, React Native Vector Icons, React Native Components, Native Base, React Native Forms, React Native Elements, React Native Resources, etc.

7. React Native Paper

Web-site: https://reactnativepaper.com/
GitHub stars: 6k
Price: Free
License: MIT License
Demo: 
Type of support: Community support via GitHub issues
Documentation: Full documentation


React Native Paper emphasizes Material design for React Native. It supports Cross-platform Material Design for React Native. React Native Paper offers components that are customizable and production ready, written in React Native. The main features of Paper include that it follows material design guidelines, works on both iOS and Android following platform-specific guidelines and it also has full theming support.

 

8. Teaset


Teaset is a UI library for React Native. It provides more than 20 pure JS (ES6) components which focus mainly on content display and action control. Its simplicity and design allow designers to easily include the libraries into any React application. The documentation on this particular library is very minimal, but you can find the Github repository based on it, with the showcase of this library components.

9. React Native Starter Kit by Flatlogic

Web-site: https://flatlogic.com/templates/react-native
GitHub stars: 1k
Price: Free, $99.95, $449.95
License: Mozilla Public License 2.0
Demo: https://play.google.com/store/apps/details?id=com.reactnativestarter.app
Type of support: Dedicated support via email
Documentation: Full documentation

React Native Starter is a mobile application template that contains many ready-to-use components and pages, including theme support.  The product is actually a mobile application template with lots of built-in components like sidebar, navigation, form elements, etc – all you need to start building your mobile app faster. You won’t spend lots of time building your app from scratch.

This starter kit is perfect for eCommerce applications, offering lifetime updates and support. The design itself is clean, modern and eye-catching. Trends like color gradients and simple curves are also there.

Key features:

  • Supports iOS and Android;
  • 16 pre-built components;
  • Chat application;
  • Multiple colors schemes;
  • Selection of UI elements;
  • Modular architecture;
  • Easy analytics integration (GA, Firebase, etc);
  • Sign in/signup screens;
  • 6 Color Themes;
  • Simple customization (using themes and plop generator);
  • Built without Expo.

 

출처 https://www.instamobile.io/mobile-design/free-react-native-ui-kits/

https://flatlogic.com/blog/top-react-native-ui-components-kits/

 

반응형