style-dictionary - A build system for creating cross-platform styles.

•    Javascript

---

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

style styleguide design-systems cross-platform design-tools build-system build-tool style-dictionary dictionary amazon css design properties tokens sass scss ios android react react-native style-guide

react-native-css - Style React-Native components with css

•    Javascript

---

React-native-css turns valid CSS into the Facebook subset of CSS. if you still want access to the the old implementation, please check v1 branch.

react react-native react-component css styling components ios

react-native-extended-stylesheet - Extended StyleSheets for React Native

•    Javascript

---

Drop-in replacement of React Native StyleSheet with media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff.Global variables are passed to EStyleSheet.build() and available in all stylesheets.

react react-native stylesheets theme theming style styling react-component react-native-component mobile ios android

native-css - Convert pure CSS to React Style or javascript literal objects.

•    Javascript

---

Convert pure CSS to javascript literal objects or React Style. 'Cause of this, all ids and inheritance relationships are converted to classes.

css react semantic jsformat css-animations style react-style native convert

react-native-tableview-simple - Flexible and lightweight React Native component for UITableView made with pure CSS

•    Javascript

---

This cross-platform component is inspired by the iOS-TableView. Made with pure CSS, the intention is to provide a flexible and lightweight alternative to a bridged component. react-native-tableview-simple provides you with some predefined CSS-styles, inspired by the native TableView. You can always mix the Cell-instances inside a Section, with other (React-Native)-Views. Therefore the Cell-Component itself can't be manipulated heavily.

react-native uitableview tableview ios react css react-component crossplatform android

react-native-typography - Pixel–perfect, native–looking typographic styles for React Native ✒️

•    Javascript

---

Pixel–perfect, native–looking typographic styles for React Native. Creating great Text Styles in React Native is not a simple task, it requires a lot of fiddling and handling edge cases.

react react-native typography typography-themes ios android style styles typeface font

learn-tachyons - :heart_eyes: Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS!

•    HTML

---

Learn how to use Tachyons to craft beautiful, 100% responsive, functional and fast User Interface/Experience (UI/UX) with minimal CSS in much less time. The User Interface (UI) or User Experience (UX) is the part of your application that the people ("end users") see and interact with. Ensuring that the UI/UX is the best it can be, is easily the top priority for our Web/Mobile projects.

mobile-first beautiful functional fast css style styles learn beginner tutorial how-to

react-native-drawer - React Native Drawer

•    Javascript

---

React native drawer, configurable to achieve material design style, slack style, parallax, and more. Works in both iOS and Android. This module supports a wide range of drawer styles, and hence has a lot of props.

react react-native react-component drawer side-menu menu ios android material-design

css-to-react-native - Convert CSS text to a React Native stylesheet object

•    Javascript

---

Converts CSS text to a React Native stylesheet object. Converts all number-like values to numbers, and string-like to strings.

styled-components react reactnative styles css

glamorous-native - React Native component styling solved💄

•    Javascript

---

glamorous for React Native. React component styling solved with an elegant (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs. In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.

react react-native glamorous styled-components css-in-js jsxstyle cssinjs

react-native-render-html - iOS/Android pure javascript react-native component that renders your HTML into 100% native views

•    Javascript

---

An iOS/Android pure javascript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it. Based on the original work of Thomas Beverley, props to him.

react-native render html styling css customizable ios android react-component react-native-component render-html

galio - Galio is a beautifully designed, Free and Open Source React Native Framework

•    Javascript

---

Galio is one of the coolest UI libraries you could ever use, licensed under MIT. Carefully crafted by developers for developers. Ready-made components, typography, and a gorgeous base theme that is easily adaptable to each project.

react react-native expo android ios galio mobile-development reactnative react-native-app react-native-ui react-native-galio open-source minimalist-design component-library ui-kit bootstrap

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

•    Javascript

---

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

react-component react css modules

theme - Style your React Native components on one place

•    Javascript

---

The React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code. @shoutem/theme is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web. All the documentation is available on the Developer portal.

shoutem-ui react-native react-native-style

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

•    Javascript

---

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

react style styles stylesheet inline bundle extract css

react-native-popup-dialog - A React Native Popup Dialog, Highly Customizable, Easy Use & Support Custom Animation

•    Javascript

---

React Native Popup Dialog for iOS & Android. Another similar dialog component: react-native-dialog-component the main difference is style.

react react-animate react-native component dialog es6 popup react-dialog react-native-popup-dialog react-native-dialog popup-dialog react-component ios android

react-native-actionsheet - An elegant ActionSheet component for React Native.

•    Javascript

---

Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS. The style of ActionSheet is defined in lib/styles.js. We can pass the styles prop to cover default style. See Example .

react-native actionsheet action-sheet react-native-action-sheet react-native-actionsheet custom-action-sheet

NativeBase - Essential cross-platform UI components for React Native

•    Javascript

---

NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native. What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.

react-native nativebase ui-components native-platforms ios android react native native-modules react-component navbar packager rnpm

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

•    Javascript

---

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

react css ui styled-components rebass design-system react-components styled-system components grid typography layout color theme emotion react-component presentational stateless functional

React Native - A framework for building native apps with React.

•    Javascript

---

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps.

mobile-framework mobile-development mobile-application-development hybrid-mobile-framework