Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamshadmirza/react-native-design-system
A tiny design system
https://github.com/iamshadmirza/react-native-design-system
Last synced: about 2 months ago
JSON representation
A tiny design system
- Host: GitHub
- URL: https://github.com/iamshadmirza/react-native-design-system
- Owner: iamshadmirza
- License: mit
- Created: 2019-10-18T10:57:04.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-15T18:07:25.000Z (over 1 year ago)
- Last Synced: 2024-05-14T20:17:01.616Z (4 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-design-system
- Size: 13.6 MB
- Stars: 235
- Watchers: 4
- Forks: 32
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Welcome to react-native-design-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](https://github.com/iamshadmirza/react-native-design-system#readme)
### 📄 [Documentation](https://rnds.netlify.com)
# Install
Simply go to the command line and run this command.
```sh
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](https://github.com/oblador/react-native-vector-icons#installation).
# 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.
```js
//your root component
import {ThemeProvider, theme} from 'react-native-design-system';
function App() {
return (
);
}
```
### Step 2. Use component
```js
//inside any file
import {Button} from 'react-native-design-system';
function HomeScreen() {
return Press Me;
}
```
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:
```js
import {ThemeProvider, theme} from 'react-native-design-system';
theme.colors.primary = 'orange';
function App() {
return (
);
}
```
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.
```js
//theme.config.js at root
import {theme} from 'react-native-design-system';
theme.colors.dark = {
bg: {
'100': '#fff',
'200': '#f8f8f8',
'300': '#f4f4f4',
}
heading: '#000',
para: '#999',
subtle: '#333',
disabled: '#78909c',
disabledText: '#78907c',
};
export default theme;
```
Now, I will just import `theme` from here and pass it to my `ThemeProvider`.
```js
import {ThemeProvider} from 'react-native-design-system';
import theme from './theme.config.js';
function App() {
return (
);
}
```
> Please make sure to pass all the keys while reassigning any object inside the theme.
## Components included:
- [x] [Avatar](src/Avatar/Avatar.js)
- [x] [ActionButton](src/ActionButton/ActionButton.js)
- [x] [Badge](src/Badge/Badge.js)
- [x] [Button](src/Button/Button.js)
- [x] [MenuAddButton](src/Button/MenuAddButton.js)
- [x] [Card](src/Card/Card.js)
- [x] [CheckBox](src/CheckBox/CheckBox.js)
- [x] [CircularProgressBar](src/CircularProgressBar/CircularProgressBar.js)
- [x] [Header](src/Header/Header.js)
- [x] [Input](src/Input/Input.js)
- [x] [ListItem](src/ListItem/ListItem.js)
- [x] [SlidingListItem](src/SlidingListItem/SlidingListItem.js)
- [x] [FullScreenLoader](src/FullScreenLoader/FullScreenLoader.js)
- [x] [Overlay](src/Overlay/Overlay.js)
- [x] [Box](src/Box/Box.js)
- [x] [Stack](src/Stack/Stack.js)
- [x] [RadioButton](src/RadioButton/RadioButton.js)
- [x] [SearchBar](src/SearchBar/SearchBar.js)
- [x] [Deck](src/Deck/Deck.js)
- [x] [Text](src/Text/Text.js)
- [x] [Stacklist](src/Layout/StackList.js)
- [x] [Flex](src/Layout/Flex.js)
- [x] [Spacer](src/Layout/Spacer.js)
## Author
👤 **Shad Mirza**
- Twitter: [@iamshadmirza](https://twitter.com/iamshadmirza)
- Github: [@iamshadmirza](https://github.com/iamshadmirza)
- Blogs: [@iamshadmirza](https://iamshadmirza.hashnode.dev)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/iamshadmirza/react-native-design-system/issues) and contribution [guidelines](CONTRIBUTING.md).
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2019 [Shad Mirza](https://github.com/iamshadmirza).
This project is [MIT](https://github.com/iamshadmirza/react-native-design-system/blob/master/LICENSE) licensed.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_