- install module
npm install mobilefolk-themes-rnor
yarn add mobilefolk-themes-rn- install @babel/plugin-proposal-decorators
npm install @babel/plugin-proposal-decorators --save-dev- create babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
]
]
};- example create buildTheme
import { build } from 'mobilefolk-themes-rn';
import { StyleSheet } from 'react-native';
export const colors = {
transparent: 'transparent',
white: '#ffffff',
black: '#000000',
red: '#ee2211'
};
export const fontFamilys = {
};
export const buildThemes = () => build({ colors, fontFamilys }, StyleSheet);call buildThemes() from root
import {@withTheme} from 'mobilefolk-themes-rn'
@withTheme
export default class App extends Component<Props> {
render() {
return (
<View
cls="flx-i aic jcc"
>
</View>
);
}
}- prop cls
| STYLE NAME | STYLE OLD | STYLE NEW |
|---|---|---|
| flex | flex: i (eg: flex: 1) | flx-i (eg: flx-1) |
| flexDirection | flexDirection: row | flx-row |
| alignItems | alignItems:'flex-start', 'flex-end' | aifs, aife |
| justifyContent | justifyContent:'center','space-between' | jcc,jcsb |
| fontWeight | fontWeight: 'normal' | normal |
| fontWeight | fontWeight: 'bold' | b |
| fontWeight | fontWeight: '100' | fw1, fw2, ... |
| resizeMode | resizeMode: 'cover' | rm-cover, rm-contain |
| top | top: 20 | top-20 |
| borderWidth | borderWidth:1 | bdWidth-1 |
| borderBottomWidth | borderBottomWidth: 1 | bdbWidth-1 |
| borderRadius | borderRadius:1 | bdRadius-1 |
| fontSide | fontSide:1 | f-1 |
| padding | padding:1 | p-1 |
| margin | margin:1 | m-1 |
....please research in index.js
|
styleStatic
styleStatic = [
{
absolute: { position: 'absolute' },
fullParent: { top: 0, left: 0, right: 0, bottom: 0 },
absoluteFill: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
{
bhl: { borderWidth: _reactNative.StyleSheet.hairlineWidth },
bthl: { borderTopWidth: _reactNative.StyleSheet.hairlineWidth },
brhl: { borderRightWidth: _reactNative.StyleSheet.hairlineWidth },
bbhl: { borderBottomWidth: _reactNative.StyleSheet.hairlineWidth },
blhl: { borderLeftWidth: _reactNative.StyleSheet.hairlineWidth },
'br--bottom': { borderTopLeftRadius: 0, borderTopRightRadius: 0 },
'br--top': { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
'br--left': { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
'br--right': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
'bt--gray': { borderTopColor: '#d8d8d8' }
},
{
ovh: { overflow: 'hidden', elevation: 1 },
'flx-i': { flex: 1 },
'flx-grow': { flexGrow: 1 },
'flx-row': { flexDirection: 'row' },
'flx-row-reverse': { flexDirection: 'row-reverse' },
'flx-col-reverse': { flexDirection: 'column-reverse' },
'flx-wrap': { flexWrap: 'wrap' },
aifs: { alignItems: 'flex-start' },
aic: { alignItems: 'center' },
aife: { alignItems: 'flex-end' },
asfs: { alignSelf: 'flex-start' },
asc: { alignSelf: 'center' },
asfe: { alignSelf: 'flex-end' },
ass: { alignSelf: 'stretch' },
jcfs: { justifyContent: 'flex-start' },
jcfe: { justifyContent: 'flex-end' },
jcc: { justifyContent: 'center' },
jcsb: { justifyContent: 'space-between' },
jcsa: { justifyContent: 'space-around' }
},
{
normal: { fontWeight: 'normal' },
b: { fontWeight: 'bold' },
fw1: { fontWeight: '100' },
fw2: { fontWeight: '200' },
fw3: { fontWeight: '300' },
fw4: { fontWeight: '400' },
fw5: { fontWeight: '500' },
fw6: { fontWeight: '600' },
fw7: { fontWeight: '700' },
fw8: { fontWeight: '800' },
fw9: { fontWeight: '900' }
},
{
'rm-contain': { resizeMode: 'contain' },
'rm-cover': { resizeMode: 'cover' },
'rm-stretch': { resizeMode: 'stretch' }
},
{
'o-100': { opacity: 1 },
'o-90': { opacity: 0.9 },
'o-80': { opacity: 0.8 },
'o-70': { opacity: 0.7 },
'o-60': { opacity: 0.6 },
'o-50': { opacity: 0.5 },
'o-40': { opacity: 0.4 },
'o-30': { opacity: 0.3 },
'o-20': { opacity: 0.2 },
'o-10': { opacity: 0.1 },
'o-05': { opacity: 0.05 },
'o-025': { opacity: 0.025 },
'o-0': { opacity: 0 }
},
{
fullView: { width: '100%', height: '100%' },
fullWidth: { width: '100%' },
fullheight: { height: '100%' }
},
{
i: { fontStyle: 'italic' },
tl: { textAlign: 'left' },
tc: { textAlign: 'center' },
tr: { textAlign: 'right' },
tj: { textAlign: 'justify' },
tavt: { textAlignVertical: 'top' },
underline: { textDecorationLine: 'underline' }
}
]dyamicStyle
dyamicStyle = {
top: function(t) {
return { top: Number(t) };
},
'top-': function(t) {
return { top: Number(t) };
},
left: function(t) {
return { left: Number(t) };
},
right: function(t) {
return { right: Number(t) };
},
bottom: function(t) {
return { bottom: Number(t) };
},
'bottom-': function(t) {
return { bottom: Number(t) };
},
bdWidth: function(t) {
return { borderWidth: Number(t) };
},
bdbWidth: function(t) {
return { borderBottomWidth: Number(t) };
},
bdtWidth: function(t) {
return { borderTopWidth: Number(t) };
},
bdfWidth: function(t) {
return { borderLeftWidth: Number(t) };
},
bdrWidth: function(t) {
return { borderRightWidth: Number(t) };
},
bdRadius: function(t) {
return { borderRadius: Number(t) };
},
bdtlRadius: function(t) {
return { borderTopLeftRadius: Number(t) };
},
bdtrRadius: function(t) {
return { borderTopRightRadius: Number(t) };
},
bdblRadius: function(t) {
return { borderBottomLeftRadius: Number(t) };
},
bdbrRadius: function(t) {
return { borderBottomRightRadius: Number(t) };
},
flex: function(t) {
return { flex: Number(t) };
},
f: function(t) {
return { fontSize: Number(t) };
},
fs: function(t) {
return { fontSize: Number(t) * _reactNative.PixelRatio.getFontScale() };
},
height: function(t) {
return t && t.indexOf('%') > -1 ? { height: t } : { height: Number(t) };
},
maxHeight: function(t) {
return t && t.indexOf('%') > -1
? { maxHeight: t }
: { maxHeight: Number(t) };
},
minHeight: function(t) {
return t && t.indexOf('%') > -1
? { minHeight: t }
: { minHeight: Number(t) };
},
circle: function(t) {
var e = Number(t);
return { height: e, width: e, borderRadius: e / 2 };
},
square: function(t) {
var e = Number(t);
return { height: e, width: e };
},
zIndex: function(t) {
return { zIndex: Number(t) };
},
elevation: function(t) {
return { elevation: Number(t) };
},
p: function(t) {
return { padding: Number(t) };
},
m: function(t) {
return { margin: Number(t) };
},
mv: function(t) {
return { marginVertical: Number(t) };
},
mh: function(t) {
return { marginHorizontal: Number(t) };
},
mt: function(t) {
return { marginTop: Number(t) };
},
ml: function(t) {
return { marginLeft: Number(t) };
},
mr: function(t) {
return { marginRight: Number(t) };
},
mb: function(t) {
return { marginBottom: Number(t) };
},
pv: function(t) {
return { paddingVertical: Number(t) };
},
ph: function(t) {
return { paddingHorizontal: Number(t) };
},
pt: function(t) {
return { paddingTop: Number(t) };
},
pl: function(t) {
return { paddingLeft: Number(t) };
},
pr: function(t) {
return { paddingRight: Number(t) };
},
pb: function(t) {
return { paddingBottom: Number(t) };
},
width: function(t) {
return t && t.indexOf('%') > -1 ? { width: t } : { width: Number(t) };
},
maxWidth: function(t) {
return t && t.indexOf('%') > -1
? { maxWidth: t }
: { maxWidth: Number(t) };
},
minWidth: function(t) {
return t && t.indexOf('%') > -1
? { minWidth: t }
: { minWidth: Number(t) };
}
}