carbon-native / carbon-native

A set of UI components for building React Native apps

Carbon Native

A set of UI components for building React Native apps

Demo App

• Expo
• Google Play Store

Get Started

yarn add carbon-native

Components

• Badge
• Buttons
• Card
• Container
• Content
• Icons
• List
• Range
• Toggle
• Toolbar
• Typography
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • P
  • A
  • BR
  • Em
  • Small
  • Strong
  • S
  • U
  • Mark

Badge

import {
  Badge,
} from 'carbon-native';

<Badge
  color="primary"
  text="4"
/>

⬆ back to top

Buttons

import {
  Button,
} from 'carbon-native';

<Button
  color="stable"
  text="Regular Button"
/>

<Button
  color="primary"
  text="Outline Button"
  outline
/>

<Button
  color="secondary"
  text="Clear Button"
  clear
/>

⬆ back to top

Card

import {
  Card,
  H4,
} from 'carbon-native';

<Card>
  <H4>Header</H4>
  <Text>
    Just some text rambling on.
  </Text>
</Card>

⬆ back to top

Icons

npm install react-native-vector-icons --save
rnpm link

import Icon 'react-native-vector-icons/FontAwesome';

<Icon
  name="volume-down"
  size={24}
/>

⬆ back to top

List

import {
  List,
  Item,
  ItemIcon,
  ItemContent,
  ItemText,
  Note,
} from 'carbon-native';

<List>
  <Item>
    <ItemIcon>
      <Icon name="bolt" size={24} />
    </ItemIcon>
    <ItemContent>
      <ItemText>Harry</ItemText>
      <Note>The boy who lived</Note>
    </ItemContent>
  </Item>
</List>

⬆ back to top

Range

import {
  Range,
} from 'carbon-native';

<Range
  value={this.state.value}
  onValueChange={(value) => this.setState({ value })}
/>

⬆ back to top

Toggle

import {
  Toggle,
} from 'carbon-native';

<Toggle
  color="primary"
  onValueChange={(value) => this.setState({ toggleState: value })}
  value={this.state.toggleState}
/>

⬆ back to top

Toolbar

import {
  Toolbar,
  ToolbarTitle,
} from 'carbon-native';

<Toolbar color="primary">
  <ToolbarTitle color="light">Primary</ToolbarTitle>
</Toolbar>

⬆ back to top

Typography

import {
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  P,
  BR,
  Em,
  Small,
  Strong,
  S,
  U,
} from 'carbon-native';

<H1>I'm an H1!</H1>
<H2>I'm an H2!</H2>
<H3>I'm an H3!</H3>
<H4>I'm an H4!</H4>
<H5>I'm an H5!</H5>
<H6>I'm an H6!</H6>
<P>I'm a paragraph with some text!</P>
<BR />
<P>This line is preceeded by a break</P>
<P>
  This line has a break<BR />
  before the end of the line.
</P>
<P>
  <Small>This line is small and is a great size for fine print.</Small>
</P>
<P>
  <Strong>This line is bold to indicate importance.</Strong>
</P>
<P>
  <Em>This line is italicized to indicate emphasis.</Em>
</P>
<P>
  <S>This line has a strikethrough, or a line through it.</S>
</P>
<P>
  <U>This line has an underline.</U>
</P>
<P>
  Use the Mark component to <Mark>highlight</Mark> text
</P>

⬆ back to top

Contribute

Contribution guidelines for this project

License

MIT License

carbon-native's Issues

ToolbarLeft or ToolbarRight can't work in RN 0.26

It noticed that ToolbarLeft is undefined.
So,I changed this:
Form import View from React-Native

Before:
export default function ToolbarRight(props) { return ( <Container {...props} .... > {props.children} </Container> ); }
I paste the code from container.js, then it's like
export default function ToolbarRight(props) { return ( <View style={[cs.container, props.padding && cs.padding, props.style]}> <View ... </View> </View>
It worked!
Maybe it's RN's new bug

Is this still a supported project?

Howdy,

I'm just wondering if this project is still supported or not.

When I try to implement I'm getting...

undefined is not an object (evaluating '_react.PropTypes.onOfType)

Thank you

does not working for android API 23

Web support

Hi,

I'm curious if you'd be interested in exploring web support using react-native-web? Another RN UI library, panza, is planning web support and I've worked through their known issues. Some noticeable things that you need are currently missing for web – Slider, Switch – but if you're interested I could prioritize more issues that would allow this library to run on the web platform.

Thanks

Google Play App no longer found

Is this repo still maintained? I can't get any of the demo apps to work.

Button prop type is incorrect

The Button prop type is throwing a warning when I use a ternary ie:

style={[
  periodKey === period && { backgroundColor: '#aaa' },
]}

I was able to get around the warning using one object and the spread operator, but that isn't ideal.

We need to switch the style proptype to PropType.any to remove the warning. All the rest of the style proptypes in the other components should be checked too. Most of them are already set to .any though.

is there any example about android?

is it support for android,i can't find any example about android platform.