rn-css 1.3.0 → 1.4.2

package/README.md

@@ -163,6 +163,23 @@ const Extended = styled(MyComponent)`
 
 ---
 
+## Access current font size value
+
+If, somewhere within your app, you need to access the current font size value in px to be able to manually convert em into px, you can use the `FontSizeContext`. This can be helpful if you want to change some behaviour within your app depending on the font size.
+
+
+```javascript
+import { FontSizeContext } from 'rn-css'
+
+...
+const [width, setWidth] = React.useState(0)
+const em = React.useContext(FontSizeContext)
+if(width < 70 * em) { /* Do something when width is lesser than 70em */ }
+return <View onLayout={event => setWidth(event.nativeEvent.layout.width)}>...</View>
+```
+
+---
+
 ## Convert a CSS string to React-Native Style
 
 If, for some reason, you just want to convert a css string to a ReactNative Style object, you can use this feature:
@@ -175,24 +192,21 @@ const style = cssToRNStyle('width: 2em; border-width: 12px; background: blue;')
 const { width = 32, borderLeftWidth = 12, backgroundColor = 'blue' } = style
 ```
 
----
-
-## Access current font size value
-
-If, somewhere within your app, you need to access the current font size value in px to be able to manually convert em into px, you can use the `FontSizeContext`. This can be helpful if you want to change some behaviour within your app depending on the font size.
-
+The second parameter lets you provide:
+  * **em** : *(Default: 16)* the current value of em unit for font size. You can retrieve the current context value with the `FontSizeContext`.
+  * **width** *(Default: 100)* the reference width that will be used to calculate percentages for the following properties: `marginLeft`, `marginRight`, `translateX` and `borderRadius`
+  * **height** *(Default: 100)* the reference width that will be used to calculate percentages for the following properties: `marginTop`, `marginBottom`, `translateY` and `borderRadius`
 
 ```javascript
-import { FontSizeContext } from 'rn-css'
+import { cssToRNStyle, FontSizeContext } from 'rn-css'
 
 ...
-const [width, setWidth] = React.useState(0)
-const em = React.useContext(FontSizeContext)
-if(width < 70 * em) { /* Do something when width is lesser than 70em */ }
-return <View onLayout={event => setWidth(event.nativeEvent.layout.width)}>...</View>
+const style = cssToRNStyle('width: 2em; margin: 10%;', { em: React.useContext(FontSizeContext), width: 100, height: 100 })
+const { width: 32, marginTop: 10, marginLeft: 10, marginRight: 10, marginBottom: 10 } = style
 ```
 
 ---
+
 ## Extended CSS support
 
 We support some cool CSS feature that React-Native doesn't normally handle

package/dist/cssToRN/index.js

@@ -44,8 +44,8 @@ function cssToRNStyle(css, units = {}) {
         vh: height / 100,
         vmin: Math.min(width, height) / 100,
         vmax: Math.max(width, height) / 100,
-        width: 1,
-        height: 1,
+        width: 100,
+        height: 100,
         rem: 16,
         px: 1,
         pt: 72 / 96,
@@ -61,8 +61,9 @@ function cssToRNStyle(css, units = {}) {
 exports.cssToRNStyle = cssToRNStyle;
 function cssChunkToStyle(css) {
     const result = {};
-    css.split(/\s*;\s*/mg).forEach((entry) => {
-        const [rawKey, rawValue] = entry.split(':');
+    css.split(/\s*;\s*(?!base64)/mg).forEach((entry) => {
+        const [rawKey, ...rest] = entry.split(':');
+        const rawValue = rest.join(':');
         if (!rawValue)
             return;
         const key = kebab2camel(rawKey.trim());

package/dist/features.d.ts

@@ -18,7 +18,7 @@ export declare const useHover: (rnStyle: Style, onMouseEnter?: ((event: MouseEve
 };
 /** HOC that will apply the style provided in the media queries */
 export declare const useMediaQuery: (media: undefined | MediaQuery[], units: Units) => Style | undefined;
-/** HOC that will apply the font size to the styles defined with em units */
+/** HOC that will measure the layout to handle styles that use % units */
 export declare const useLayout: (onLayout?: ((event: LayoutChangeEvent) => void) | undefined) => {
     width: number;
     height: number;

package/dist/features.js

@@ -47,12 +47,17 @@ const useMediaQuery = (media, units) => {
     }
 };
 exports.useMediaQuery = useMediaQuery;
-/** HOC that will apply the font size to the styles defined with em units */
+/** HOC that will measure the layout to handle styles that use % units */
 const useLayout = (onLayout) => {
     const [layout, setLayout] = react_1.default.useState({ width: 0, height: 0 });
+    // Prevent calling setState if the component is unmounted
+    const unmounted = react_1.default.useRef(false);
+    react_1.default.useEffect(() => () => { unmounted.current = true; }, []);
     const updateLayout = react_1.default.useCallback((event) => {
         if (onLayout)
             onLayout(event);
+        if (unmounted.current)
+            return;
         const { width, height } = event.nativeEvent.layout;
         if (width !== layout.width || height !== layout.height)
             setLayout({ width, height });