rn-css 1.4.2 → 1.5.1

package/README.md

@@ -2,6 +2,8 @@
 
 This is basically [styled-components](https://github.com/styled-components/styled-components) with a much better support for React-Native, and some awesome additional features. You can check the docs of [styled-components](https://github.com/styled-components/styled-components) for more details about the basic API. I'll focus here on the differences.
 
+**Current version: 1.5** [See the Changelog](./CHANGELOG.md)
+
 ---
 
 ## Purpose
@@ -331,6 +333,14 @@ const View = styled.View`
 
 ---
 
+## Theming:
+
+To match the API of styled-components, we offer the same abilities for theming [See the documentation](https://styled-components.com/docs/advanced).
+
+This relies on the [SharedValue](#shared-value) context. This means that you cannot use the Shared Value system **and** this theming système. Pick the one that best suits your needs.
+
+---
+
 ## Coming later:
 
 linear-gradient, background-repeat, transitions, animations

package/dist/convertStyle.js

@@ -9,7 +9,7 @@ const convertStyle = (rnStyle, units) => {
     ['width', 'height'].forEach(key => {
         if (!units[key] && rnStyle[key]) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const converted = convertUnits_1.convertValue(key, rnStyle[key], units);
+            const converted = (0, convertUnits_1.convertValue)(key, rnStyle[key], units);
             if (!Number.isNaN(converted))
                 units[key] = converted;
         }
@@ -21,34 +21,34 @@ const convertStyle = (rnStyle, units) => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             convertedStyle.transform = rnStyle.transform.map(transformation => {
                 const result = {};
-                Object.keys(transformation).forEach(k => (result[k] = convertUnits_1.convertValue(k, transformation[k], units)));
+                Object.keys(transformation).forEach(k => (result[k] = (0, convertUnits_1.convertValue)(k, transformation[k], units)));
                 return result;
             });
         }
         else if (key === 'shadowOffset' && rnStyle.shadowOffset) {
             convertedStyle.shadowOffset = {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                width: convertUnits_1.convertValue(key, rnStyle.shadowOffset.width || '0', units),
+                width: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.width || '0', units),
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                height: convertUnits_1.convertValue(key, rnStyle.shadowOffset.height || '0', units)
+                height: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.height || '0', units)
             };
         }
         else if (key === 'textShadowOffset' && rnStyle.textShadowOffset) {
             convertedStyle.textShadowOffset = {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                width: convertUnits_1.convertValue(key, rnStyle.textShadowOffset.width || '0', units),
+                width: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.width || '0', units),
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                height: convertUnits_1.convertValue(key, rnStyle.textShadowOffset.height || '0', units)
+                height: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.height || '0', units)
             };
         }
-        // Font family should not be transformed
-        else if (key === 'fontFamily') {
+        // Font family should not be transformed (same as cursor for web in case of base64 value)
+        else if (['cursor', 'fontFamily'].includes(key)) {
             convertedStyle[key] = value;
         }
         else {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            convertedStyle[key] = convertUnits_1.convertValue(key, value, units);
+            convertedStyle[key] = (0, convertUnits_1.convertValue)(key, value, units);
         }
     });
     return convertedStyle;

package/dist/convertUnits.js

@@ -53,11 +53,13 @@ function convertValue(key, value, units) {
     });
     // We handle extra calculations (calc, min, max, parsing...)
     if (convertedValue.startsWith('calc('))
-        return maths_1.calculate(convertedValue.substring(4)); // remove calc. We can keep the parenthesis
+        return (0, maths_1.calculate)(convertedValue.substring(4)); // remove calc. We can keep the parenthesis
     else if (convertedValue.startsWith('max('))
-        return maths_1.max(convertedValue.substring(4, convertedValue.length - 1)); // Remove max()
+        return (0, maths_1.max)(convertedValue.substring(4, convertedValue.length - 1)); // Remove max()
     else if (convertedValue.startsWith('min('))
-        return maths_1.min(convertedValue.substring(4, convertedValue.length - 1)); // remove min()
+        return (0, maths_1.min)(convertedValue.substring(4, convertedValue.length - 1)); // remove min()
+    else if (key === 'fontWeight')
+        return convertedValue; // fontWeight must be a string even when it is an integer value.
     else if (parseFloat(convertedValue) + '' === convertedValue)
         return parseFloat(convertedValue);
     else

package/dist/cssToRN/index.js

@@ -18,7 +18,7 @@ function cssToStyle(css) {
     const result = {};
     // Find media queries
     const cssWithoutMediaQueries = css.replace(/@media(.*?){[^{}]*}/gmis, res => {
-        const { css, isValid } = mediaQueries_1.createMedia(res);
+        const { css, isValid } = (0, mediaQueries_1.createMedia)(res);
         const style = cssChunkToStyle(css);
         const mediaQuery = (context) => isValid(context) && style;
         if (!result.media)
@@ -56,7 +56,7 @@ function cssToRNStyle(css, units = {}) {
         ...units
     };
     const rnStyle = cssChunkToStyle(css);
-    return convertStyle_1.default(rnStyle, finalUnits);
+    return (0, convertStyle_1.default)(rnStyle, finalUnits);
 }
 exports.cssToRNStyle = cssToRNStyle;
 function cssChunkToStyle(css) {
@@ -74,43 +74,43 @@ function cssChunkToStyle(css) {
             case 'borderLeft':
             case 'borderRight':
             case 'borderBottom':
-                Object.assign(result, convert_1.border(key, value));
+                Object.assign(result, (0, convert_1.border)(key, value));
                 break;
             case 'borderWidth':
-                Object.assign(result, convert_1.sideValue('border', value, 'Width'));
+                Object.assign(result, (0, convert_1.sideValue)('border', value, 'Width'));
                 break;
             case 'background':
                 Object.assign(result, { backgroundColor: value });
                 break;
             case 'padding':
             case 'margin':
-                Object.assign(result, convert_1.sideValue(key, value));
+                Object.assign(result, (0, convert_1.sideValue)(key, value));
                 break;
             case 'borderRadius':
-                Object.assign(result, convert_1.cornerValue('border', value, 'Radius'));
+                Object.assign(result, (0, convert_1.cornerValue)('border', value, 'Radius'));
                 break;
             case 'font':
-                Object.assign(result, convert_1.font(value));
+                Object.assign(result, (0, convert_1.font)(value));
                 break;
             case 'textDecoration':
-                Object.assign(result, convert_1.textDecoration(value));
+                Object.assign(result, (0, convert_1.textDecoration)(value));
                 break;
             case 'placeContent':
-                Object.assign(result, convert_1.placeContent(value));
+                Object.assign(result, (0, convert_1.placeContent)(value));
                 break;
             case 'flex':
-                Object.assign(result, convert_1.flex(value));
+                Object.assign(result, (0, convert_1.flex)(value));
                 break;
             case 'flexFlow':
-                Object.assign(result, convert_1.flexFlow(value));
+                Object.assign(result, (0, convert_1.flexFlow)(value));
                 break;
             case 'transform':
-                Object.assign(result, convert_1.transform(value));
+                Object.assign(result, (0, convert_1.transform)(value));
                 break;
             case 'boxShadow':
             case 'textShadow':
                 // We need to replace boxShadow by shadow
-                Object.assign(result, convert_1.shadow(key === 'boxShadow' ? 'shadow' : key, value));
+                Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
                 break;
             // Other keys don't require any special treatment
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/dist/cssToRN/mediaQueries.js

@@ -54,7 +54,7 @@ function convertAnyValue(key, value, units) {
             dppx: 'px',
             x: 'px'
         };
-        const [num, unit] = convertUnits_1.parseValue(value);
+        const [num, unit] = (0, convertUnits_1.parseValue)(value);
         return num + densityUnitsEquivalence[unit];
     }
     else if (key === 'deviceAspectRatio' || key === 'aspectRatio') {
@@ -62,7 +62,7 @@ function convertAnyValue(key, value, units) {
         const [w, h] = value.split('/').map(v => parseInt(v, 10));
         return w / h;
     }
-    return convertUnits_1.convertValue(key, value, units);
+    return (0, convertUnits_1.convertValue)(key, value, units);
 }
 /** Check if a constraint is respected by the provided context */
 function evaluateConstraint(constraint, context) {

package/dist/features.js

@@ -14,7 +14,7 @@ exports.FontSizeContext = react_1.default.createContext(16);
 exports.zIndexContext = react_1.default.createContext((_zIndex) => { });
 /** HOC that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
 const useScreenSize = () => {
-    const { width, height } = react_native_1.useWindowDimensions();
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
     return { vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100 };
 };
 exports.useScreenSize = useScreenSize;
@@ -37,7 +37,7 @@ exports.useHover = useHover;
 /** HOC that will apply the style provided in the media queries */
 const useMediaQuery = (media, units) => {
     if (media) {
-        const context = mediaQueries_1.createContext(units);
+        const context = (0, mediaQueries_1.createContext)(units);
         const mediaStyles = media.map(m => m(context)).filter(m => m);
         if (!mediaStyles.length)
             return;
@@ -59,9 +59,8 @@ const useLayout = (onLayout) => {
         if (unmounted.current)
             return;
         const { width, height } = event.nativeEvent.layout;
-        if (width !== layout.width || height !== layout.height)
-            setLayout({ width, height });
-    }, [onLayout, layout.width, layout.height]);
+        setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height });
+    }, [onLayout]);
     return { onLayout: updateLayout, ...layout };
 };
 exports.useLayout = useLayout;
@@ -70,7 +69,7 @@ const useFontSize = (setFontSize, rem = 16) => {
     const em = react_1.default.useContext(exports.FontSizeContext);
     if (!setFontSize)
         return { em };
-    const [fontSize, fontUnit] = convertUnits_1.parseValue(setFontSize);
+    const [fontSize, fontUnit] = (0, convertUnits_1.parseValue)(setFontSize);
     const isRelative = ['rem', 'em', '%'].includes(fontUnit || '');
     if (isRelative) {
         const newSize = fontUnit === 'em' ? em * fontSize

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as RN from 'react-native';
 export { cssToRNStyle } from './cssToRN';
 export { FontSizeContext } from './features';
 export { SharedValue } from './styleComponent';
+export * from './useTheme';
 declare const styled: {
     <T>(Component: React.ComponentType<T>): {
         <S>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S & T & {
@@ -200,39 +201,11 @@ declare const styled: {
             ref?: React.Ref<any> | undefined;
         }>;
     };
-    ListView: {
-        <S_14>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_14 & RN.ListViewProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ListViewProps & S_14 & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-        attrs<S_15>(opts: Partial<S_15 & RN.ListViewProps> | ((props: S_15 & RN.ListViewProps) => Partial<S_15 & RN.ListViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_15 & RN.ListViewProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ListViewProps | S_15) & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-    };
     Modal: {
-        <S_16>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_16 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps & {
+        <S_14>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_14 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps & S_16 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps & S_14 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -242,10 +215,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_17>(opts: Partial<S_17 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps> | ((props: S_17 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps) => Partial<S_17 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_17 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps & {
+        attrs<S_15>(opts: Partial<S_15 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps> | ((props: S_15 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps) => Partial<S_15 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_15 & RN.ModalBaseProps & RN.ModalPropsIOS & RN.ModalPropsAndroid & RN.ViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ModalProps | S_17) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ModalProps | S_15) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -257,10 +230,10 @@ declare const styled: {
         }>;
     };
     NavigatorIOS: {
-        <S_18>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_18 & RN.NavigatorIOSProps & {
+        <S_16>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_16 & RN.NavigatorIOSProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.NavigatorIOSProps & S_18 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.NavigatorIOSProps & S_16 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -270,10 +243,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_19>(opts: Partial<S_19 & RN.NavigatorIOSProps> | ((props: S_19 & RN.NavigatorIOSProps) => Partial<S_19 & RN.NavigatorIOSProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_19 & RN.NavigatorIOSProps & {
+        attrs<S_17>(opts: Partial<S_17 & RN.NavigatorIOSProps> | ((props: S_17 & RN.NavigatorIOSProps) => Partial<S_17 & RN.NavigatorIOSProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_17 & RN.NavigatorIOSProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.NavigatorIOSProps | S_19) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.NavigatorIOSProps | S_17) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -285,10 +258,10 @@ declare const styled: {
         }>;
     };
     ScrollView: {
-        <S_20>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_20 & RN.ScrollViewProps & {
+        <S_18>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_18 & RN.ScrollViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ScrollViewProps & S_20 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ScrollViewProps & S_18 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -298,10 +271,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_21>(opts: Partial<S_21 & RN.ScrollViewProps> | ((props: S_21 & RN.ScrollViewProps) => Partial<S_21 & RN.ScrollViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_21 & RN.ScrollViewProps & {
+        attrs<S_19>(opts: Partial<S_19 & RN.ScrollViewProps> | ((props: S_19 & RN.ScrollViewProps) => Partial<S_19 & RN.ScrollViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_19 & RN.ScrollViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ScrollViewProps | S_21) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ScrollViewProps | S_19) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -313,10 +286,10 @@ declare const styled: {
         }>;
     };
     SnapshotViewIOS: {
-        <S_22>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_22 & RN.SnapshotViewIOSProps & {
+        <S_20>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_20 & RN.SnapshotViewIOSProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.SnapshotViewIOSProps & S_22 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.SnapshotViewIOSProps & S_20 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -326,10 +299,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_23>(opts: Partial<S_23 & RN.SnapshotViewIOSProps> | ((props: S_23 & RN.SnapshotViewIOSProps) => Partial<S_23 & RN.SnapshotViewIOSProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_23 & RN.SnapshotViewIOSProps & {
+        attrs<S_21>(opts: Partial<S_21 & RN.SnapshotViewIOSProps> | ((props: S_21 & RN.SnapshotViewIOSProps) => Partial<S_21 & RN.SnapshotViewIOSProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_21 & RN.SnapshotViewIOSProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.SnapshotViewIOSProps | S_23) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.SnapshotViewIOSProps | S_21) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -341,10 +314,10 @@ declare const styled: {
         }>;
     };
     Switch: {
-        <S_24>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_24 & RN.SwitchProps & {
+        <S_22>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_22 & RN.SwitchProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.SwitchProps & S_24 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.SwitchProps & S_22 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -354,10 +327,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_25>(opts: Partial<S_25 & RN.SwitchProps> | ((props: S_25 & RN.SwitchProps) => Partial<S_25 & RN.SwitchProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_25 & RN.SwitchProps & {
+        attrs<S_23>(opts: Partial<S_23 & RN.SwitchProps> | ((props: S_23 & RN.SwitchProps) => Partial<S_23 & RN.SwitchProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_23 & RN.SwitchProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.SwitchProps | S_25) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.SwitchProps | S_23) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -369,10 +342,10 @@ declare const styled: {
         }>;
     };
     RecyclerViewBackedScrollView: {
-        <S_26>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_26 & RN.RecyclerViewBackedScrollViewProps & {
+        <S_24>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_24 & RN.RecyclerViewBackedScrollViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.RecyclerViewBackedScrollViewProps & S_26 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.RecyclerViewBackedScrollViewProps & S_24 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -382,10 +355,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_27>(opts: Partial<S_27 & RN.RecyclerViewBackedScrollViewProps> | ((props: S_27 & RN.RecyclerViewBackedScrollViewProps) => Partial<S_27 & RN.RecyclerViewBackedScrollViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_27 & RN.RecyclerViewBackedScrollViewProps & {
+        attrs<S_25>(opts: Partial<S_25 & RN.RecyclerViewBackedScrollViewProps> | ((props: S_25 & RN.RecyclerViewBackedScrollViewProps) => Partial<S_25 & RN.RecyclerViewBackedScrollViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_25 & RN.RecyclerViewBackedScrollViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.RecyclerViewBackedScrollViewProps | S_27) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.RecyclerViewBackedScrollViewProps | S_25) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -397,10 +370,10 @@ declare const styled: {
         }>;
     };
     RefreshControl: {
-        <S_28>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_28 & RN.RefreshControlProps & {
+        <S_26>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_26 & RN.RefreshControlProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.RefreshControlProps & S_28 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.RefreshControlProps & S_26 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -410,10 +383,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_29>(opts: Partial<S_29 & RN.RefreshControlProps> | ((props: S_29 & RN.RefreshControlProps) => Partial<S_29 & RN.RefreshControlProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_29 & RN.RefreshControlProps & {
+        attrs<S_27>(opts: Partial<S_27 & RN.RefreshControlProps> | ((props: S_27 & RN.RefreshControlProps) => Partial<S_27 & RN.RefreshControlProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_27 & RN.RefreshControlProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.RefreshControlProps | S_29) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.RefreshControlProps | S_27) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -425,10 +398,10 @@ declare const styled: {
         }>;
     };
     SafeAreaView: {
-        <S_30>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_30 & RN.ViewProps & {
+        <S_28>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_28 & RN.ViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ViewProps & S_30 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ViewProps & S_28 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -438,10 +411,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_31>(opts: Partial<S_31 & RN.ViewProps> | ((props: S_31 & RN.ViewProps) => Partial<S_31 & RN.ViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_31 & RN.ViewProps & {
+        attrs<S_29>(opts: Partial<S_29 & RN.ViewProps> | ((props: S_29 & RN.ViewProps) => Partial<S_29 & RN.ViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_29 & RN.ViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ViewProps | S_31) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ViewProps | S_29) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -453,23 +426,10 @@ declare const styled: {
         }>;
     };
     StatusBar: {
-        <S_32>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_32 & RN.StatusBarProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.StatusBarProps & S_32 & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-        attrs<S_33>(opts: Partial<S_33 & RN.StatusBarProps> | ((props: S_33 & RN.StatusBarProps) => Partial<S_33 & RN.StatusBarProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_33 & RN.StatusBarProps & {
+        <S_30>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_30 & RN.StatusBarProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.StatusBarProps | S_33) & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.StatusBarProps & S_30 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -479,53 +439,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-    };
-    SwipeableListView: {
-        <S_34>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_34 & RN.SwipeableListViewProps & {
+        attrs<S_31>(opts: Partial<S_31 & RN.StatusBarProps> | ((props: S_31 & RN.StatusBarProps) => Partial<S_31 & RN.StatusBarProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_31 & RN.StatusBarProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.SwipeableListViewProps & S_34 & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-        attrs<S_35>(opts: Partial<S_35 & RN.SwipeableListViewProps> | ((props: S_35 & RN.SwipeableListViewProps) => Partial<S_35 & RN.SwipeableListViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_35 & RN.SwipeableListViewProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.SwipeableListViewProps | S_35) & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-    };
-    TabBarIOS: {
-        <S_36>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_36 & RN.TabBarIOSProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TabBarIOSProps & S_36 & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-        attrs<S_37>(opts: Partial<S_37 & RN.TabBarIOSProps> | ((props: S_37 & RN.TabBarIOSProps) => Partial<S_37 & RN.TabBarIOSProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_37 & RN.TabBarIOSProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TabBarIOSProps | S_37) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.StatusBarProps | S_31) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -537,10 +454,10 @@ declare const styled: {
         }>;
     };
     Text: {
-        <S_38>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_38 & RN.TextProps & {
+        <S_32>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_32 & RN.TextProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TextProps & S_38 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TextProps & S_32 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -550,10 +467,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_39>(opts: Partial<S_39 & RN.TextProps> | ((props: S_39 & RN.TextProps) => Partial<S_39 & RN.TextProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_39 & RN.TextProps & {
+        attrs<S_33>(opts: Partial<S_33 & RN.TextProps> | ((props: S_33 & RN.TextProps) => Partial<S_33 & RN.TextProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_33 & RN.TextProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TextProps | S_39) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TextProps | S_33) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -565,10 +482,10 @@ declare const styled: {
         }>;
     };
     TextInput: {
-        <S_40>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_40 & RN.TextInputProps & {
+        <S_34>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_34 & RN.TextInputProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TextInputProps & S_40 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TextInputProps & S_34 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -578,38 +495,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_41>(opts: Partial<S_41 & RN.TextInputProps> | ((props: S_41 & RN.TextInputProps) => Partial<S_41 & RN.TextInputProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_41 & RN.TextInputProps & {
+        attrs<S_35>(opts: Partial<S_35 & RN.TextInputProps> | ((props: S_35 & RN.TextInputProps) => Partial<S_35 & RN.TextInputProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_35 & RN.TextInputProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TextInputProps | S_41) & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-    };
-    ToolbarAndroid: {
-        <S_42>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_42 & RN.ToolbarAndroidProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ToolbarAndroidProps & S_42 & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-        attrs<S_43>(opts: Partial<S_43 & RN.ToolbarAndroidProps> | ((props: S_43 & RN.ToolbarAndroidProps) => Partial<S_43 & RN.ToolbarAndroidProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_43 & RN.ToolbarAndroidProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ToolbarAndroidProps | S_43) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TextInputProps | S_35) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -621,10 +510,10 @@ declare const styled: {
         }>;
     };
     TouchableHighlight: {
-        <S_44>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_44 & RN.TouchableHighlightProps & {
+        <S_36>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_36 & RN.TouchableHighlightProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableHighlightProps & S_44 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableHighlightProps & S_36 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -634,10 +523,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_45>(opts: Partial<S_45 & RN.TouchableHighlightProps> | ((props: S_45 & RN.TouchableHighlightProps) => Partial<S_45 & RN.TouchableHighlightProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_45 & RN.TouchableHighlightProps & {
+        attrs<S_37>(opts: Partial<S_37 & RN.TouchableHighlightProps> | ((props: S_37 & RN.TouchableHighlightProps) => Partial<S_37 & RN.TouchableHighlightProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_37 & RN.TouchableHighlightProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableHighlightProps | S_45) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableHighlightProps | S_37) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -649,10 +538,10 @@ declare const styled: {
         }>;
     };
     TouchableNativeFeedback: {
-        <S_46>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_46 & RN.TouchableNativeFeedbackProps & {
+        <S_38>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_38 & RN.TouchableNativeFeedbackProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableNativeFeedbackProps & S_46 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableNativeFeedbackProps & S_38 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -662,10 +551,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_47>(opts: Partial<S_47 & RN.TouchableNativeFeedbackProps> | ((props: S_47 & RN.TouchableNativeFeedbackProps) => Partial<S_47 & RN.TouchableNativeFeedbackProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_47 & RN.TouchableNativeFeedbackProps & {
+        attrs<S_39>(opts: Partial<S_39 & RN.TouchableNativeFeedbackProps> | ((props: S_39 & RN.TouchableNativeFeedbackProps) => Partial<S_39 & RN.TouchableNativeFeedbackProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_39 & RN.TouchableNativeFeedbackProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableNativeFeedbackProps | S_47) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableNativeFeedbackProps | S_39) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -677,10 +566,10 @@ declare const styled: {
         }>;
     };
     TouchableOpacity: {
-        <S_48>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_48 & RN.TouchableOpacityProps & {
+        <S_40>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_40 & RN.TouchableOpacityProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableOpacityProps & S_48 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableOpacityProps & S_40 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -690,10 +579,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_49>(opts: Partial<S_49 & RN.TouchableOpacityProps> | ((props: S_49 & RN.TouchableOpacityProps) => Partial<S_49 & RN.TouchableOpacityProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_49 & RN.TouchableOpacityProps & {
+        attrs<S_41>(opts: Partial<S_41 & RN.TouchableOpacityProps> | ((props: S_41 & RN.TouchableOpacityProps) => Partial<S_41 & RN.TouchableOpacityProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_41 & RN.TouchableOpacityProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableOpacityProps | S_49) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableOpacityProps | S_41) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -705,10 +594,10 @@ declare const styled: {
         }>;
     };
     TouchableWithoutFeedback: {
-        <S_50>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_50 & RN.TouchableWithoutFeedbackProps & {
+        <S_42>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_42 & RN.TouchableWithoutFeedbackProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableWithoutFeedbackProps & S_50 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.TouchableWithoutFeedbackProps & S_42 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -718,10 +607,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_51>(opts: Partial<S_51 & RN.TouchableWithoutFeedbackProps> | ((props: S_51 & RN.TouchableWithoutFeedbackProps) => Partial<S_51 & RN.TouchableWithoutFeedbackProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_51 & RN.TouchableWithoutFeedbackProps & {
+        attrs<S_43>(opts: Partial<S_43 & RN.TouchableWithoutFeedbackProps> | ((props: S_43 & RN.TouchableWithoutFeedbackProps) => Partial<S_43 & RN.TouchableWithoutFeedbackProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_43 & RN.TouchableWithoutFeedbackProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableWithoutFeedbackProps | S_51) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.TouchableWithoutFeedbackProps | S_43) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -733,38 +622,10 @@ declare const styled: {
         }>;
     };
     View: {
-        <S_30>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_30 & RN.ViewProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ViewProps & S_30 & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-        attrs<S_31>(opts: Partial<S_31 & RN.ViewProps> | ((props: S_31 & RN.ViewProps) => Partial<S_31 & RN.ViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_31 & RN.ViewProps & {
-            rnCSS?: string | undefined;
-            shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ViewProps | S_31) & {
-            rnCSS?: `${string};` | undefined;
-            onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-            onLayout?: ((event: RN.LayoutChangeEvent) => void) | undefined;
-            children?: React.ReactNode;
-            style?: any;
-        } & {
-            ref?: React.Ref<any> | undefined;
-        }>;
-    };
-    ViewPagerAndroid: {
-        <S_52>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_52 & RN.ViewPagerAndroidProps & {
+        <S_28>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_28 & RN.ViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ViewPagerAndroidProps & S_52 & {
+        }) => string | number | boolean | null | undefined))[]): React.ForwardRefExoticComponent<RN.ViewProps & S_28 & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -774,10 +635,10 @@ declare const styled: {
         } & {
             ref?: React.Ref<any> | undefined;
         }>;
-        attrs<S_53>(opts: Partial<S_53 & RN.ViewPagerAndroidProps> | ((props: S_53 & RN.ViewPagerAndroidProps) => Partial<S_53 & RN.ViewPagerAndroidProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_53 & RN.ViewPagerAndroidProps & {
+        attrs<S_29>(opts: Partial<S_29 & RN.ViewProps> | ((props: S_29 & RN.ViewProps) => Partial<S_29 & RN.ViewProps>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_29 & RN.ViewProps & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ViewPagerAndroidProps | S_53) & {
+        }) => string | number | boolean | null | undefined))[]) => React.ForwardRefExoticComponent<(RN.ViewProps | S_29) & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -789,10 +650,10 @@ declare const styled: {
         }>;
     };
     FlatList: {
-        <S_54>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_54 & {
+        <S_44>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_44 & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): <Type>(props: S_54 & RN.FlatListProps<Type> & {
+        }) => string | number | boolean | null | undefined))[]): <Type>(props: S_44 & RN.FlatListProps<Type> & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -800,10 +661,10 @@ declare const styled: {
             children?: React.ReactNode;
             style?: any;
         }) => JSX.Element;
-        attrs<S_55>(opts: Partial<S_55 & RN.FlatListProps<any>> | ((props: S_55 & RN.FlatListProps<any>) => Partial<S_55 & RN.FlatListProps<any>>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_55 & RN.FlatListProps<any> & {
+        attrs<S_45>(opts: Partial<S_45 & RN.FlatListProps<any>> | ((props: S_45 & RN.FlatListProps<any>) => Partial<S_45 & RN.FlatListProps<any>>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_45 & RN.FlatListProps<any> & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => <Props>(componentProps: S_55 & RN.FlatListProps<Props> & {
+        }) => string | number | boolean | null | undefined))[]) => <Props>(componentProps: S_45 & RN.FlatListProps<Props> & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -813,10 +674,10 @@ declare const styled: {
         }) => JSX.Element;
     };
     SectionList: {
-        <S_56>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_56 & {
+        <S_46>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_46 & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): <Type_1>(props: S_56 & RN.SectionListProps<Type_1, RN.DefaultSectionT> & {
+        }) => string | number | boolean | null | undefined))[]): <Type_1>(props: S_46 & RN.SectionListProps<Type_1, RN.DefaultSectionT> & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -824,10 +685,10 @@ declare const styled: {
             children?: React.ReactNode;
             style?: any;
         }) => JSX.Element;
-        attrs<S_57>(opts: Partial<S_57 & RN.SectionListProps<any, RN.DefaultSectionT>> | ((props: S_57 & RN.SectionListProps<any, RN.DefaultSectionT>) => Partial<S_57 & RN.SectionListProps<any, RN.DefaultSectionT>>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_57 & RN.SectionListProps<any, RN.DefaultSectionT> & {
+        attrs<S_47>(opts: Partial<S_47 & RN.SectionListProps<any, RN.DefaultSectionT>> | ((props: S_47 & RN.SectionListProps<any, RN.DefaultSectionT>) => Partial<S_47 & RN.SectionListProps<any, RN.DefaultSectionT>>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_47 & RN.SectionListProps<any, RN.DefaultSectionT> & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => <Props_1>(componentProps: S_57 & RN.SectionListProps<Props_1, RN.DefaultSectionT> & {
+        }) => string | number | boolean | null | undefined))[]) => <Props_1>(componentProps: S_47 & RN.SectionListProps<Props_1, RN.DefaultSectionT> & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -837,10 +698,10 @@ declare const styled: {
         }) => JSX.Element;
     };
     VirtualizedList: {
-        <S_58>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_58 & {
+        <S_48>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_48 & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]): <Type_2>(props: S_58 & RN.VirtualizedListProps<Type_2> & {
+        }) => string | number | boolean | null | undefined))[]): <Type_2>(props: S_48 & RN.VirtualizedListProps<Type_2> & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
@@ -848,10 +709,10 @@ declare const styled: {
             children?: React.ReactNode;
             style?: any;
         }) => JSX.Element;
-        attrs<S_59>(opts: Partial<S_59 & RN.VirtualizedListProps<any>> | ((props: S_59 & RN.VirtualizedListProps<any>) => Partial<S_59 & RN.VirtualizedListProps<any>>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_59 & RN.VirtualizedListProps<any> & {
+        attrs<S_49>(opts: Partial<S_49 & RN.VirtualizedListProps<any>> | ((props: S_49 & RN.VirtualizedListProps<any>) => Partial<S_49 & RN.VirtualizedListProps<any>>)): (chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S_49 & RN.VirtualizedListProps<any> & {
             rnCSS?: string | undefined;
             shared: unknown;
-        }) => string | number | boolean | null | undefined))[]) => <Props_2>(componentProps: S_59 & RN.VirtualizedListProps<Props_2> & {
+        }) => string | number | boolean | null | undefined))[]) => <Props_2>(componentProps: S_49 & RN.VirtualizedListProps<Props_2> & {
             rnCSS?: `${string};` | undefined;
             onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;

package/dist/index.js

@@ -18,6 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedValue = exports.FontSizeContext = exports.cssToRNStyle = void 0;
 const RN = __importStar(require("react-native"));
@@ -28,14 +31,14 @@ var features_1 = require("./features");
 Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return features_1.FontSizeContext; } });
 var styleComponent_2 = require("./styleComponent");
 Object.defineProperty(exports, "SharedValue", { enumerable: true, get: function () { return styleComponent_2.SharedValue; } });
-const styled = (Component) => styleComponent_1.default(Component);
+__exportStar(require("./useTheme"), exports);
+const styled = (Component) => (0, styleComponent_1.default)(Component);
 styled.ActivityIndicator = styled(RN.ActivityIndicator);
 styled.Button = styled(RN.Button);
 styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid);
 styled.Image = styled(RN.Image);
 styled.ImageBackground = styled(RN.ImageBackground);
 styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView);
-styled.ListView = styled(RN.ListView);
 styled.Modal = styled(RN.Modal);
 styled.NavigatorIOS = styled(RN.NavigatorIOS);
 styled.ScrollView = styled(RN.ScrollView);
@@ -45,17 +48,13 @@ styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView);
 styled.RefreshControl = styled(RN.RefreshControl);
 styled.SafeAreaView = styled(RN.SafeAreaView);
 styled.StatusBar = styled(RN.StatusBar);
-styled.SwipeableListView = styled(RN.SwipeableListView);
-styled.TabBarIOS = styled(RN.TabBarIOS);
 styled.Text = styled(RN.Text);
 styled.TextInput = styled(RN.TextInput);
-styled.ToolbarAndroid = styled(RN.ToolbarAndroid);
 styled.TouchableHighlight = styled(RN.TouchableHighlight);
 styled.TouchableNativeFeedback = styled(RN.TouchableNativeFeedback);
 styled.TouchableOpacity = styled(RN.TouchableOpacity);
 styled.TouchableWithoutFeedback = styled(RN.TouchableWithoutFeedback);
 styled.View = styled(RN.View);
-styled.ViewPagerAndroid = styled(RN.ViewPagerAndroid);
 styled.FlatList = styleComponent_1.styledFlatList;
 styled.SectionList = styleComponent_1.styledSectionList;
 styled.VirtualizedList = styleComponent_1.styledVirtualizedList;

package/dist/styleComponent.js

@@ -29,20 +29,20 @@ const styled = (Component) => {
             const shared = react_1.default.useContext(exports.SharedValue);
             // Store the style for mutualization
             const cssString = react_1.default.useRef(buildCSSString(chunks, functs, props, shared));
-            const [rnStyle, setRNStyle] = react_1.default.useState(cssToRN_1.default(cssString.current));
+            const [rnStyle, setRNStyle] = react_1.default.useState((0, cssToRN_1.default)(cssString.current));
             react_1.default.useEffect(() => {
                 // Build the css string with the context
                 const css = buildCSSString(chunks, functs, props, shared);
                 cssString.current = css;
                 // Try to load an existing style from the style map or save it for next time
-                const hash = generateHash_1.default(css);
+                const hash = (0, generateHash_1.default)(css);
                 const style = styleMap[hash];
                 if (style) {
                     setRNStyle(style.style);
                     style.usages++;
                 }
                 else {
-                    const rns = cssToRN_1.default(css);
+                    const rns = (0, cssToRN_1.default)(css);
                     setRNStyle(rns);
                     styleMap[hash] = { style: rns, usages: 1 };
                 }
@@ -70,29 +70,29 @@ const styled = (Component) => {
             delete finalStyle.hover;
             // Read all the data we might need
             // Handle hover
-            const { onMouseEnter, onMouseLeave, style: hoverStyle } = features_1.useHover(rnStyle, props.onMouseEnter, props.onMouseLeave);
+            const { onMouseEnter, onMouseLeave, style: hoverStyle } = (0, features_1.useHover)(rnStyle, props.onMouseEnter, props.onMouseLeave);
             if (hoverStyle)
                 Object.assign(finalStyle, hoverStyle);
             // Calculate current em unit for media-queries
-            const { em: tempEm } = features_1.useFontSize(finalStyle.fontSize, units.current.rem);
+            const { em: tempEm } = (0, features_1.useFontSize)(finalStyle.fontSize, units.current.rem);
             if (units.current.em !== tempEm)
                 units.current = { ...units.current, em: tempEm };
             // Handle layout data needed for % units
-            const { width, height, onLayout } = features_1.useLayout(props.onLayout);
+            const { width, height, onLayout } = (0, features_1.useLayout)(props.onLayout);
             if (needsLayout && (units.current.width !== width || units.current.height !== height)) {
                 units.current = { ...units.current, width, height };
             }
             // Handle screen size needed for vw and wh units
-            const screenUnits = features_1.useScreenSize();
+            const screenUnits = (0, features_1.useScreenSize)();
             if ( /* needsScreenSize && */Object.keys(screenUnits).find(key => units.current[key] !== screenUnits[key])) {
                 units.current = { ...units.current, ...screenUnits };
             }
             // apply media queries
-            const mediaQuery = features_1.useMediaQuery(rnStyle.media, units.current);
+            const mediaQuery = (0, features_1.useMediaQuery)(rnStyle.media, units.current);
             if (mediaQuery)
                 Object.assign(finalStyle, mediaQuery);
             // Handle em units
-            const { em } = features_1.useFontSize(finalStyle.fontSize, units.current.rem);
+            const { em } = (0, features_1.useFontSize)(finalStyle.fontSize, units.current.rem);
             if (units.current.em !== em)
                 units.current = { ...units.current, em };
             if (finalStyle.fontSize)
@@ -102,8 +102,8 @@ const styled = (Component) => {
             if (Object.keys(finalStyle).length !== Object.keys(calculatedStyle.current).length || Object.keys(finalStyle).find(key => calculatedStyle.current[key] !== finalStyle[key])) {
                 calculatedStyle.current = finalStyle;
             }
-            const styleConvertedFromCSS = react_1.default.useMemo(() => convertStyle_1.default(calculatedStyle.current, units.current), [calculatedStyle.current, units.current]);
-            const zIndex = features_1.useZIndex(react_native_1.StyleSheet.flatten([props.style, styleConvertedFromCSS]).zIndex);
+            const styleConvertedFromCSS = react_1.default.useMemo(() => (0, convertStyle_1.default)(calculatedStyle.current, units.current), [calculatedStyle.current, units.current]);
+            const zIndex = (0, features_1.useZIndex)(react_native_1.StyleSheet.flatten([props.style, styleConvertedFromCSS]).zIndex);
             const style = react_1.default.useMemo(() => {
                 const style = [];
                 style.push(styleConvertedFromCSS);

package/dist/useTheme.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ThemeProvider: ({ theme, children }: {
+    theme: unknown;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useTheme: () => unknown;
+export declare const withTheme: <T>(Component: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<React.Component<{}, {}, any>>>;

package/dist/useTheme.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTheme = exports.useTheme = exports.ThemeProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const styleComponent_1 = require("./styleComponent");
+const ThemeProvider = ({ theme, children }) => {
+    return react_1.default.createElement(styleComponent_1.SharedValue.Provider, { value: theme }, children);
+};
+exports.ThemeProvider = ThemeProvider;
+const useTheme = () => react_1.default.useContext(styleComponent_1.SharedValue);
+exports.useTheme = useTheme;
+const withTheme = (Component) => {
+    const theme = (0, exports.useTheme)();
+    const ThemedComponent = react_1.default.forwardRef((props, ref) => react_1.default.createElement(Component, { ref: ref, theme: theme, ...props }));
+    ThemedComponent.displayName = 'ThemedComponent';
+    return ThemedComponent;
+};
+exports.withTheme = withTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -17,44 +17,44 @@
     "react-native": ">=0.62.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/runtime": "^7.12.13",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.1",
-    "@types/react-native": "^0.63.48",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "dotenv": "^8.2.0",
-    "eslint": "^7.19.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "@babel/core": "^7.16.5",
+    "@babel/runtime": "^7.16.5",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.37",
+    "@types/react-native": "^0.66.9",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "babel-jest": "^27.4.5",
+    "babel-loader": "^8.2.3",
+    "dotenv": "^10.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-standard": "^5.0.0",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^5.0.0",
-    "husky": "^5.0.9",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
-    "metro-react-native-babel-preset": "^0.65.0",
+    "html-loader": "^3.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
+    "jest": "^27.4.5",
+    "lint-staged": "^12.1.2",
+    "metro-react-native-babel-preset": "^0.66.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.64.2",
+    "react-native": "^0.66.4",
     "react-native-typescript-transformer": "^1.2.13",
-    "react-native-web": "^0.17.1",
+    "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
-    "release-it": "^14.3.0",
-    "ts-jest": "^27.0.5",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.3.5",
-    "webpack": "^5.21.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2"
+    "release-it": "^14.11.8",
+    "ts-jest": "^27.1.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
   },
   "jest": {
     "preset": "react-native"

package/src/convertStyle.tsx

@@ -42,9 +42,9 @@ const convertStyle = (rnStyle: PartialStyle, units: Units) => {
         height: convertValue(key, rnStyle.textShadowOffset!.height || '0', units) as number
       }
     }
-    // Font family should not be transformed
-    else if (key === 'fontFamily') {
-      convertedStyle[key] = value
+    // Font family should not be transformed (same as cursor for web in case of base64 value)
+    else if (['cursor', 'fontFamily'].includes(key)) {
+      convertedStyle[key as 'fontFamily'] = value
     }
     else {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/src/convertUnits.ts

@@ -47,6 +47,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   if (convertedValue.startsWith('calc(')) return calculate(convertedValue.substring(4))// remove calc. We can keep the parenthesis
   else if (convertedValue.startsWith('max(')) return max(convertedValue.substring(4, convertedValue.length - 1))// Remove max()
   else if (convertedValue.startsWith('min(')) return min(convertedValue.substring(4, convertedValue.length - 1))// remove min()
+  else if (key === 'fontWeight') return convertedValue // fontWeight must be a string even when it is an integer value.
   else if (parseFloat(convertedValue) + '' === convertedValue) return parseFloat(convertedValue)
   else return convertedValue
 }

package/src/features.tsx

@@ -51,8 +51,8 @@ export const useLayout = (onLayout?: (event: LayoutChangeEvent) => void) => {
     if (onLayout) onLayout(event)
     if (unmounted.current) return
     const { width, height } = event.nativeEvent.layout
-    if (width !== layout.width || height !== layout.height) setLayout({ width, height })
-  }, [onLayout, layout.width, layout.height])
+    setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height })
+  }, [onLayout])
   return { onLayout: updateLayout, ...layout }
 }
 

package/src/index.tsx

@@ -4,6 +4,7 @@ import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedLi
 export { cssToRNStyle } from './cssToRN'
 export { FontSizeContext } from './features'
 export { SharedValue } from './styleComponent'
+export * from './useTheme'
 
 const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)
 
@@ -13,7 +14,6 @@ styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid)
 styled.Image = styled(RN.Image)
 styled.ImageBackground = styled(RN.ImageBackground)
 styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView)
-styled.ListView = styled(RN.ListView)
 styled.Modal = styled(RN.Modal)
 styled.NavigatorIOS = styled(RN.NavigatorIOS)
 styled.ScrollView = styled(RN.ScrollView)
@@ -23,17 +23,13 @@ styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView)
 styled.RefreshControl = styled(RN.RefreshControl)
 styled.SafeAreaView = styled(RN.SafeAreaView)
 styled.StatusBar = styled(RN.StatusBar)
-styled.SwipeableListView = styled(RN.SwipeableListView)
-styled.TabBarIOS = styled(RN.TabBarIOS)
 styled.Text = styled(RN.Text)
 styled.TextInput = styled(RN.TextInput)
-styled.ToolbarAndroid = styled(RN.ToolbarAndroid)
 styled.TouchableHighlight = styled(RN.TouchableHighlight)
 styled.TouchableNativeFeedback = styled(RN.TouchableNativeFeedback)
 styled.TouchableOpacity = styled(RN.TouchableOpacity)
 styled.TouchableWithoutFeedback = styled(RN.TouchableWithoutFeedback)
 styled.View = styled(RN.View)
-styled.ViewPagerAndroid = styled(RN.ViewPagerAndroid)
 styled.FlatList = styledFlatList
 styled.SectionList = styledSectionList
 styled.VirtualizedList = styledVirtualizedList

package/src/useTheme.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { SharedValue } from './styleComponent'
+
+export const ThemeProvider = ({ theme, children }: { theme: unknown; children: React.ReactNode }) => {
+  return <SharedValue.Provider value={theme}>
+    {children}
+  </SharedValue.Provider>
+}
+
+export const useTheme = () => React.useContext(SharedValue)
+
+export const withTheme = <T, >(Component: React.ComponentType<T>) => {
+  const theme = useTheme()
+  const ThemedComponent = React.forwardRef<React.Component, T>((props: T, ref) => <Component ref={ref} theme={theme} {...props} />)
+  ThemedComponent.displayName = 'ThemedComponent'
+  return ThemedComponent
+}