search

react-ui-kit / expo-ui-kit

expo-ui-kit - a components based React-Native UI Kit
http://expo-ui-kit.com
MIT License
96 stars 25 forks source link

Improvement: margin & padding using default values & 2x, 3x #17

Closed hetmann closed 5 years ago

hetmann commented 5 years ago

When using margin and padding props with components like Block & Text it should use the base value from theme.js -> SIZES.base = 8

Current usage, by default is using the prop value

<Block marginTop={SIZES.base}>
   <Text paddingHorizontal={SIZES.base}>margin or padding</Text>
</Block>

Without values

<Block marginTop>
   <Text paddingHorizontal>margin or padding</Text>
</Block>

With 2x, 3x values representing SIZES.base * 2 and SIZES.base * 3 or dynamic extracting integer and multiply by "4" from "4x"

<Block marginTop="3x">
   <Text paddingHorizontal="2x">margin or padding</Text>
</Block>