@qonsoll/react-native-design
v1.3.57
Published
Powerful components library for react-native apps
Downloads
37
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?
Run in terminal:
npm install @qonsoll/react-native-design
oryarn add @qonsoll/react-native-design
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
oryarn add @react-native-community/checkbox react-native-date-picker react-native-image-picker react-native-svg react-native-svg-transformer react-native-vector-icons
Install pods for iOS application:
cd ios && pod install && cd ..
If you want to use default SVG icons, change your metro.config.js file:
const {getDefaultConfig} = require('metro-config');
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
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'],
},
};
})();
- Well done! ✅ Now you can setup ThemeProvider, configure Theme and use components.
How to use?
Import ThemeProvider in your App.js file:
import {ThemeProvider} from '@qonsoll/react-native-design'
Wrap your app content:
<ThemeProvider theme={{}}>
<App />
</ThemeProvider>
- Success! 👍 Now all lib elements should have access to the default theme.
Theme (design-tokens)
Here is default theme state:
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: {}
}
}