@tecnavia/react-native-css (1.3.2)
Published 2024-12-20 14:26:50 +00:00 by naquilini
Installation
@tecnavia:registry=npm install @tecnavia/react-native-css@1.3.2"@tecnavia/react-native-css": "1.3.2"About this package
@tecnavia/react-native-css
allow to update style of views dinamically by a server side configurations if you change something, like supported classes update the wiki
Table of Contents
Installation
npm install git+https://ussvc01.newsmemory.com:3000/tecnavia/react-native-css.git#TAG --save
Usage
see example folder to understand all use cases
Provider
put provider on root
import Css from "@tecnavia/react-native-css";
<Css.Provider
value={{
rnStyles: {},
activeTheme: undefined,
isDark: false,
isPortrait: false,
isTablet: false
}}>
{children}
</Css.Provider>
Consumer
use consumer over each child that you want customize
import Css from "@tecnavia/react-native-css";
<Css.Consumer /* @see decorators */>
{children}
</Css.Consumer>
Hook
import { useCss } from "@tecnavia/react-native-css";
function Component(){
const { state, decoratedState } = useCss({ /* @see decorators */ });
...
}
Subscription
import Css from "@tecnavia/react-native-css";
function Component(){
useEffect(() => {
const subscription = Css.subscribe(({ state, decoratedState }) => {
}, { /* @see decorators */ });
return () => {
subscription();
}
}, []);
...
}
Direct access
import Css from "@tecnavia/react-native-css";
const { state, decoratedState } = Css.get({ /* @see decorators */ });
...
Css.set(newState);
Methods
Context
| Name | Description | Return | ||
|---|---|---|---|---|
| get | return current Context state | Data | Decorators | |
| set | update context | State | ||
| subscribe | callback, called when a context update occurs | function to remove a callback | callback with Data params | Decorators |
| removeAllSubscribers | delete all registered subscribers |
Others
import { CssHelper } from "@tecnavia/react-native-css";
| Name | Description | |
|---|---|---|
| flatten | merge all styles inside array with other styles that comes from classes and decorators | |
| getStyle | return array of styles obtained from classes and decorators | |
| getStyleObj | call previous getStyle and then flattens to single object | |
| getInUseThemeId | activeTheme key, if it is "automatic" the result will be a resolved theme, light or dark | |
| getInUseTheme | activeTheme object, if it is "automatic" the result will be a resolved theme, light or dark | |
| getActiveThemeId | return current theme id, also "automatic" | |
| isActiveThemeDark | return true if current theme is dark | |
| getActiveBaseColors | return the base colors for the current theme, if present | |
| mergeRnStyles | merge multiple rn styles structures, first params must be a default structure | |
| arrayToObject | merge array of styles into a single object | |
| getThemes | return themes object |
Decorators
| Name | Description | Type |
|---|---|---|
| classes | array of classes to apply | string[] |
| toggle | attaches -active and -inactive to each class of above array | boolean |
| active | works witch toggle, is used to select the correct class based on activation state | boolean |
| cssKey | add -cssKey to each of above classes, also active and inactive | string |
State
you could set the state by updating Provider value or by static method set;
| Name | Description | Type |
|---|---|---|
| rnStyles | styles object | JSON structure |
| activeTheme | active theme otherwise the theme used is the one marked as default | string |
| isDark | should be the system dark mode state, if theme is authomatic the library uses this flag to choose correct baseStyles | boolean |
| isPortrait | used to select styles based on device orientation | boolean |
| isTablet | used to select styles based on device size | boolean |
| classes | array of classes to apply | string[] |
| toggle | attaches -active and -inactive to each class of above array | boolean |
| active | works witch toggle, is used to select the correct class based on activation state | boolean |
| cssKey | add -cssKey to each of above classes, also active and inactive | string |
Data
date returned by Consumer, get, subscription callback and hook
| Name | Description | Type |
|---|---|---|
| state | current context state | State |
| decoratedState | style obtained by parsing rnStyles from state and a by appling decorators |
Structure
the following json describe the root of structure
{
"base": {
"styles": {},
"colors": {}
},
"baseLight": {
"styles": {},
"colors": {}
},
"baseDark": {
"styles": {},
"colors": {}
},
"themes": {
"theme1": {},
//...
"themeN": {},
"automathic": {
"name": "System theme"
}
}
}
Styles structure
the following json describe styles structure, each class could contains all styles to apply to view in each conditions remember that you could apply styles attributes supported by nested components, read the lists from:
{
"class1": {
//...style...
},
//...
"classN": {
//...style...
}
}
than could contains some objects with styles applied with specific conditions size, orientation, plaform, os; each of previous conditions could be combined togheter by nesting on inside another multiple times (see Device modifiers).
Colors structure
the following json shows the supported strucutre of the colors object.
It supports 4 base keys, plus custom ones. The latter keys should start with the prefix customColor and have a number afterwards.
{
"foreground": "...",
"background": "...",
"alternateBackground": "...",
"search": "...",
"customColor[0-9]+": "..."
}
Device modifiers are also supported (see Device modifiers).
Device modifiers
- Platform
- phone: applied only on react-native
- tablet: applied only on react-native
- mw[0-9]{2,0}: mw means max-width, so the styles are applied to each web devices that has size less than specified number
- Orientation
- portrait
- landscape
- os
- ios
- android
- windows
- platform
- native: applied if we are working with react-native
- web: applied if we are working with react or react-native-web
"styles": {
"class1": {
//...style...
"portrait": {
//...style...,
"android": {
//...style...
//etc...
}
//etc..
},
"android": {
//...style...
//etc..
}
},
//...
"classN": {
}
},
"colors": {
"portrait": {
//...colors...,
"android": {
//...colors...
//etc...
}
//etc..
}
}
the following json instead describe theme structure
{
"name": "Theme name",
"default": 0,
"dark": 0,
"automatic": 0,
"styles": {},
"colors": {}
}
| Name | Default | Required | Description |
|---|---|---|---|
| name | true | description name | |
| default | 0 | false | only one theme in the list must be set like default theme, if multiple theme are defaults the library uses the first in the list |
| dark | 0 | false | if 1 the theme will be merged with baseDark otherwise with baseLight |
| automatic | 0 | false | only two theme should be authomatic, one light and one dark, because are applied based on current system mode |
| styles | false | if empty styles are applied just from based styles | |
| colors | false | if empty base colors are applied just from based styles |
Throubleshooting
- Don't use Css.Consumer component inside a touchable i.e. TouchableOpacity etc... because otherwise the element is not clickable, this is caused by a 0,0 size assigned to touchable element. To solve the issue you could use the hook or simply the exposed method getStyleObj
Dependencies
Dependencies
| ID | Version |
|---|---|
| react-reactive-context | ^1.1.8 |
Development Dependencies
| ID | Version |
|---|---|
| @evilmartians/lefthook | ^1.2.2 |
| @react-native-community/eslint-config | ^3.0.2 |
| @types/jest | ^28.1.2 |
| @types/react | ~17.0.21 |
| @types/react-native | 0.70.0 |
| del-cli | ^5.0.0 |
| eslint | ^8.4.1 |
| eslint-config-prettier | ^8.5.0 |
| eslint-plugin-prettier | ^4.0.0 |
| pod-install | ^0.1.0 |
| prettier | ^2.0.5 |
| react | 18.2.0 |
| react-native | 0.72.3 |
| react-native-builder-bob | ^0.20.0 |
| typescript | ^4.5.2 |
Peer Dependencies
| ID | Version |
|---|---|
| react | * |
| react-native | * |
Keywords
react-native
ios
android