Linkfit Components
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
Simply go to the command line and run this command.
yarn add @linkfit/linkfit-components
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 '@linkfit/linkfit-components';
function App(){
return (
<ThemeProvider value={theme}>
<Root />
</ThemeProvider>
);
}
//inside any file
import { Button } from '@linkfit/linkfit-components';
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 '@linkfit/linkfit-components';
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.
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 '@linkfit/linkfit-components';
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 '@linkfit/linkfit-components';
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.
- [x] Avatar
- [x] ActionButton
- [x] Badge
- [x] Button
- [x] SlidingButton
- [x] MenuAddButton
- [x] Card
- [x] CheckBox
- [x] CircularProgressBar
- [x] Header
- [x] Image
- [x] Input
- [x] ListItem
- [x] SlidingListItem
- [x] FullScreenLoader
- [x] Overlay
- [x] Box
- [x] Stack
- [x] Inline
- [ ] Pricing
- [x] RadioButton
- [x] SearchBar
- [ ] Social Icons / Social Icon Buttons
- [x] Deck
- [x] Text
- [ ] Tooltip
👤 Linkfit
- Github: @linkfitcare
- Github: @jjmacagnan
- Github: @dhiogocorrea
👤 Shad Mirza
- Twitter: @iamshadmirza
- Github: @iamshadmirza
- Blogs: @iamshadmirza
- Github: @/iamshadmirza
Copyright © 2021 Linkfit.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator