System-One - Design System for RNW

Customized theme-based style props for building design systems with React-Native-Web.

Features

• styled-components
• styled-systems
• storybook for component style guide

Installation

yarn add @system-one/rnw

or

npm install @system-one/rnw

Since this component is based off the concept of theme-based styling, you will need to install and wrap your root component with styled-components' ThemeProvider:

import { ThemeProvider } from 'styled-components';
import { theme } from '@system-one/rnw';

const App = props => (
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Available Scripts

In the project directory, you can run:

yarn sb

Runs Storybook server

Open http://localhost:4000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn sb:build

Builds HTML version of component library documentation to production. Updates will be reflected in here.