Skip to content
JavaScript HTML
Branch: master
Clone or download
Latest commit df573fc Feb 18, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook bundle analyzer removed Jan 19, 2020
docs storybook version updated Feb 7, 2020
guides color palette fixed Jan 18, 2020
src type fixed Feb 18, 2020
.eslintrc.js development setup Jan 12, 2020
.gitignore development setup Jan 12, 2020
.npmignore ignore example files Jan 17, 2020
.prettierrc.js development setup Jan 12, 2020
CONTRIBUTING.md Contribution guidelines updated Jan 13, 2020
LICENSE Initial commit Oct 18, 2019
README.md logo is bigger now Jan 17, 2020
package.json version up Feb 15, 2020
yarn.lock storybook updated Feb 7, 2020

README.md

Welcome to react-native-design-system 👋

Documentation Maintenance License: MIT Twitter: iamshadmirza

react-native-react-system

React Native Design System is a set of design rules and component library that lets you prototype faster with easy to use cross-platform components. Let's get started!

🏠 Homepage

📄 Documentation

Install

Simply go to the command line and run this command.

yarn add react-native-design-system

This library needs react-native-vector-icons so go on and install that too to get all the cool icons. Check out Install guide.

Usage

React Native Design System uses a centralized theme to provide consistency across all the components.

Step 1. Import ThemeProvider and theme then wrap your root component.

This step is important. We are passing theme as context value that each component will access.

//your root component
import { ThemeProvider, theme } from 'react-native-design-system';

function App(){
  return (
    <ThemeProvider value={theme}>
      <Root />
    </ThemeProvider>
  );
}

Step 2. Use component.

//inside any file
import { Button } from 'react-native-design-system';

function HomeScreen(){
  return (
    <Button>
      Press Me
    </Button>
  );
}

That's pretty much it. theme file contains configuration for all the components. Don't worry, you can easily customize it. Let me show how:

Customize

You just need to import theme, reassign the value you want to change and pass it to ThemeProvider. Example:
Default primary color is blue but you like orange so you can simply do:

import { ThemeProvider, theme } from 'react-native-design-system';

theme.brandColor.primary = "orange";

function App(){
  return (
    <ThemeProvider value={theme}>
      <Root />
    </ThemeProvider>
  );
}

And we are done!

You can see all the configurations available on the theme page.

If you have a lot of customizations

This is just a personal approach, you can do as you prefer. What I usually do is create a theme.config.js file and add all my customizations there.

//theme.config.js at root
import { theme } from 'react-native-design-system';

theme.textColor = {
    'default': '#000',
    'heading': '#999',
    'subtle': '#333',
    'grey': '#757575',
    'disabled': '#78909c',
    'white': '#f8f8f8',
};

export default theme;

Now, I will just import theme from here and pass it to my ThemeProvider.

import { ThemeProvider } from 'react-native-design-system';
import theme from './theme.config.js';

function App(){
  return (
    <ThemeProvider value={theme}>
      <Root />
    </ThemeProvider>
  );
}

Please make sure to pass all the keys while reassigning any object inside the theme.

Components included:

Author

👤 Shad Mirza

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page and contribution guidelines.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 Shad Mirza.
This project is MIT licensed.


This README was generated with ❤️ by readme-md-generator

You can’t perform that action at this time.