Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tuckerconnelly/carbon-ui
React Native Material Design library for all platforms
https://github.com/tuckerconnelly/carbon-ui
android ios material-design react react-native web
Last synced: 1 day ago
JSON representation
React Native Material Design library for all platforms
- Host: GitHub
- URL: https://github.com/tuckerconnelly/carbon-ui
- Owner: tuckerconnelly
- License: mit
- Created: 2016-02-15T11:26:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T14:40:40.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T17:12:24.519Z (7 days ago)
- Topics: android, ios, material-design, react, react-native, web
- Language: JavaScript
- Homepage:
- Size: 446 KB
- Stars: 209
- Watchers: 9
- Forks: 17
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
**No longer maintained!**
# 
[Material Design](https://material.google.com/) library for React Native that runs on all platforms.
### Installation
```
npm -S i tuckerconnelly/carbon-ui#0.1 // or, if you want the latest:
npm -S i tuckerconnelly/carbon-ui
```
Material Design is built on the Roboto Fonts, so you need to make them available for Carbon UI.
You can download them [here](https://github.com/tuckerconnelly/carbon-ui-docs/tree/master/android/app/src/main/assets/fonts), and then install them for your platform:
- [iOS](https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f)
- [Android](https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.3qrdx42mx)
- [Exponent](https://docs.getexponent.com/versions/v11.0.0/guides/using-custom-fonts.html)
- Web
Install [react-native-web](https://github.com/necolas/react-native-web), and then place the `` in your `index.web.js`:
```js
import 'babel-polyfill'
import React from 'react'
import { AppRegistry } from 'react-native-web'
import { WebStyles } from 'carbon-ui'
import App from './src/index'
const AppWithStyles = () =>
AppRegistry.registerComponent('CarbonUIExample', () => AppWithStyles)
AppRegistry.runApplication('CarbonUIExample', { rootTag: document.getElementById('root') })
```
### Usage
Once you're installed, you can use any of [Carbon UI's components](https://carbon-ui.com/components/AppBar):
```js
import React from 'react'
import { Paper, Display1, FlatButton } from 'carbon-ui'
export default () =>
Giant display
Flat button
```
### Documentation
- [Installation](https://carbon-ui.com/getting-started/installation)
- [Themes](https://carbon-ui.com/styles/theme)
- [Colors](https://carbon-ui.com/styles/colors)
- [Responsive UI](https://carbon-ui.com/styles/responsive)
- [Elevation and shadows](https://carbon-ui.com/styles/elevation)
- [Typography](https://carbon-ui.com/styles/typography)
- [Motion](https://carbon-ui.com/styles/motion)
- [Components](https://carbon-ui.com/components)
### Known issues
**Performance on Android**
Performance on Android can get pretty slow if you're not careful. Carbon UI makes good use of the Animated API, which is particularly slow on Android.
Carbon UI optimizes a lot, using native animations and graceful degradations, and it'll generally be good-to-go out of the box.
Long term, the React Native team is doing [good work](https://productpains.com/post/react-native/offload-some-animations-from-js-thread-for-better-perf) to improve Animated performance.
If you run in to any snags, check out the [Known issues](https://carbon-ui.com/getting-started/known-issues) page in the docs for tips on improving performance, or file an issue here.
### Disclaimer
This is still a beta. Expect bugs 😛
### Connect
Follow the creator on Twitter, [@TuckerConnelly](https://twitter.com/TuckerConnelly)
### License
MIT