https://github.com/qonsoll/react-native-design
Powerful 💪 components library for react-native apps.
https://github.com/qonsoll/react-native-design
bootstrap col react-components react-native react-native-component react-native-elements react-native-library row theme
Last synced: 7 months ago
JSON representation
Powerful 💪 components library for react-native apps.
- Host: GitHub
- URL: https://github.com/qonsoll/react-native-design
- Owner: qonsoll
- Created: 2021-02-25T15:07:30.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-12T13:25:19.000Z (over 4 years ago)
- Last Synced: 2025-02-25T02:40:19.213Z (about 1 year ago)
- Topics: bootstrap, col, react-components, react-native, react-native-component, react-native-elements, react-native-library, row, theme
- Language: JavaScript
- Homepage:
- Size: 333 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### About @qonsoll/react-native-design
This is components library with possibility to configure everything you need. ⚡️⚡️⚡️ Using it you can extend or/and override any part of any element inside the lib (borders (radius, colors, width), font families for titles or body text, font sizes, line heights, letter spacings, color scheme 🎨 etc. (probably all properties that you can imagine and available in react-native apps)). Also, you can use bootstrap like grid (Row, Col with embedded flex configurations).
### How to install?
1. Run in terminal:
`npm install @qonsoll/react-native-design`
or
`yarn add @qonsoll/react-native-design`
2. Install additional packages:
`npm install --save @react-native-community/checkbox react-native-date-picker react-native-image-picker react-native-svg react-native-svg-transformer react-native-vector-icons`
or
`yarn add @react-native-community/checkbox react-native-date-picker react-native-image-picker react-native-svg react-native-svg-transformer react-native-vector-icons`
3. Install pods for iOS application: `cd ios && pod install && cd ..`
4. If you want to use default SVG icons, change your metro.config.js file:
```javascript
const {getDefaultConfig} = require('metro-config');
```
```javascript
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
```
```javascript
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
};
})();
```
5. Well done! ✅ Now you can setup ThemeProvider, configure Theme and use components.
### How to use?
1. Import ThemeProvider in your App.js file:
`import {ThemeProvider} from '@qonsoll/react-native-design'`
2. Wrap your app content:
```html
```
3. Success! 👍 Now all lib elements should have access to the default theme.
### Theme (design-tokens)
Here is default theme state:
```javascript
const Theme = {
CORE: {
BORDER_RADIUSES: {},
BORDER_WIDTHS: {},
COLORS: {},
FONT_FAMILIES: {},
FONT_SIZES: {},
FONT_WEIGHTS: {},
LETTER_SPACINGS: {},
LINE_HEIGHTS: {},
SHADOWS: {},
ICON_SIZES: {}
},
EXTENSIONS: {
CORNERS: {}
},
components: {
BUTTONS: {},
SWITCHES: {},
CARDS: {},
ITEMS: {},
BUTTON_ITEMS: {},
ALERTS: {},
AVATARS: {},
BADGES: {},
CHECKBOXES: {},
COLLAPSES: {},
TOGGLES: {},
STATUSES: {}
}
}
```