react-native-style-tachyons - Better styling for React Native

  •        32

React Native Style Tachyons brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention. More about the advantages of this approach. Of course you can use your old styles along tachyons' classes.

https://github.com/tachyons-css/react-native-style-tachyons

Dependencies:

color : ^3.0.0
css-color-names : 0.0.4
lodash : ^4.17.10

Tags
Implementation
License
Platform

   




Related Projects

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.

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-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.

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.

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-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.

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.

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.

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.

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-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.

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-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).

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.

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-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 .

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.

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 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.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.