Utility library for rapid React Native styling.
Library using @rnw-community/object-field-tree package for generating complex object field structure.
Special object Flex for rapid React native FlexBox styles generation with IDE autocomplete(IntelliSense).
Styles usage example with spreading styles:
import { StyleSheet } from 'react-native';
import { Flex, Font } from '@rnw-community/fast-style';
export const componentStyles = StyleSheet.create({
root: {
...Flex.row.flexEnd.stretch,
padding: 16,
},
});import { View, Text } from 'react-native';
import { Flex } from '@rnw-community/fast-style';
export const Component = () => <View style={Flex.column.center.flexStart} />;Special method getFont() for generating Font object for rapid React native Font styles generation with IDE autocomplete(IntelliSense).
Every project is using their own fonts, colors and sizes according to the style-guide, for generating Font object:
const Font = getFont(FontFamilies, Sizes, Colors);Example usage:
import { getFont } from '@rnw-community/fast-style';
export enum FontColorEnum {
red = '#D8D8D8',
green = '#1462FC',
black = '#353535',
blue = '#1252D7',
}
export enum FontFamilyEnum {
ptSansBold = 'PTSans-Bold',
ptSansRegular = 'PTSans-Regular',
}
export enum FontSizeEnum {
xxl = '28',
xl = '24',
l = '22',
m = '20',
s = '18',
xs = '16',
}
export const Font = getFont(FontFamilyEnum, FontSizeEnum, FontColorEnum);import { StyleSheet } from 'react-native';
import { Font } from './font';
export const componentStyles = StyleSheet.create({
text: {
...Font.ptSansBold.xs.blue,
testDecoration: 'underline',
},
});import { Text } from 'react-native';
import { Font } from './font';
export const Component = () => <Text style={Font.ptSansBold.xs.blue}>There!</Text>;This library is licensed under The MIT License.