@reusejs/react-native v0.0.2
Install
Simply go to the command line and run this command.
yarn add @reusejs/react-native
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
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
/**
* @format
*/
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {ThemeProvider, theme} from '@reusejs/react-native';
function ThemeApp() {
return (
<ThemeProvider value={theme}>
<App />
</ThemeProvider>
);
}
AppRegistry.registerComponent(appName, () => ThemeApp);
Step 2. Use component.
//inside any file
import {Button} from '@reusejs/react-native';
function HomeScreen() {
return (
<Button
onPress={() => {
console.log('Lol');
}}>
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 '@reusejs/react-native';
theme.brandColor.primary = 'orange';
function App() {
return (
<ThemeProvider value={theme}>
<App />
</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 '@reusejs/react-native';
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 '@reusejs/react-native';
import theme from './theme.config.js';
function App() {
return (
<ThemeProvider value={theme}>
<App />
</ThemeProvider>
);
}
Please make sure to pass all the keys while reassigning any object inside the theme.
Components included:
- Avatar
- ActionButton
- Badge
- Button
- SlidingButton
- MenuAddButton
- Card
- CheckBox
- CircularProgressBar
- Header
- Image
- Input
- ListItem
- SlidingListItem
- FullScreenLoader
- Overlay
- Box
- Stack
- Inline
- Pricing
- RadioButton
- SearchBar
- Social Icons / Social Icon Buttons
- Deck
- Text
- Tooltip
🤝 Contributing
Contributions, issues and feature requests are welcome!Feel free to check issues page and contribution guidelines.