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!
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.
React Native Design System uses a centralized theme to provide consistency across all the components.
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 theme={theme} colorMode="light">
<Root />
</ThemeProvider>
);
}
//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:
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.colors.primary = 'orange';
function App() {
return (
<ThemeProvider theme={theme} colorMode="light">
<Root />
</ThemeProvider>
);
}
And we are done!
You can see all the configurations available on the theme page.
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.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
.
import {ThemeProvider} from 'react-native-design-system';
import theme from './theme.config.js';
function App() {
return (
<ThemeProvider theme={theme}>
<Root />
</ThemeProvider>
);
}
Please make sure to pass all the keys while reassigning any object inside the theme.
π€ Shad Mirza
Contributions, issues and feature requests are welcome!
Feel free to check issues page and contribution guidelines.
Give a βοΈ if this project helped you!
Copyright Β© 2019 Shad Mirza.
This project is MIT licensed.
This README was generated with β€οΈ by readme-md-generator