rn-css 1.8.2 → 1.8.3

package/dist/convertStyle.d.ts

@@ -1,4 +1,5 @@
+import { /* StyleSheet, */ Animated, TextStyle } from 'react-native';
 import type { AnyStyle, PartialStyle, Units } from './types';
 /** Mix the calculated RN style within the object style */
-declare const convertStyle: <T extends AnyStyle = AnyStyle>(rnStyle: PartialStyle, units: Units) => T;
+declare const convertStyle: <T extends AnyStyle | Animated.WithAnimatedObject<import("react-native").ViewStyle> | Animated.WithAnimatedObject<TextStyle> | Animated.WithAnimatedObject<import("react-native").ImageStyle> = AnyStyle>(rnStyle: PartialStyle, units: Units) => T;
 export default convertStyle;

package/dist/styleComponent.d.ts

@@ -21,7 +21,7 @@ declare type OptionalProps<T extends AnyStyle | Animated.WithAnimatedValue<AnySt
     children?: React.ReactNode;
     style?: StyleProp<T>;
 };
-declare const styled: <Props, StyleType extends AnyStyle = AnyStyle>(Component: React.ComponentType<Props>) => {
+declare const styled: <Props, StyleType extends AnyStyle | Animated.WithAnimatedObject<import("react-native").ViewStyle> | Animated.WithAnimatedObject<import("react-native").TextStyle> | Animated.WithAnimatedObject<import("react-native").ImageStyle> = AnyStyle>(Component: React.ComponentType<Props>) => {
     <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & OptionalProps<StyleType> & {
         ref?: React.Ref<any> | undefined;
     }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/convertStyle.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/display-name */
-import { /* StyleSheet, */ TextStyle } from 'react-native'
+import { /* StyleSheet, */ Animated, TextStyle } from 'react-native'
 import { convertValue } from './convertUnits'
 import type { AnyStyle, CompleteStyle, PartialStyle, Units } from './types'
 
 /** Mix the calculated RN style within the object style */
-const convertStyle = <T extends AnyStyle = AnyStyle>(rnStyle: PartialStyle, units: Units) => {
+const convertStyle = <T extends AnyStyle | Animated.WithAnimatedValue<AnyStyle> = AnyStyle>(rnStyle: PartialStyle, units: Units) => {
   /** This is the result of the convertions from css style into RN style */
   const convertedStyle: CompleteStyle = {};
   // If width and height are specified, we can use those values for the first render

package/src/styleComponent.tsx

@@ -59,7 +59,7 @@ function removeStyle (hash: string) {
   styleMap[hash].usage--
   if (styleMap[hash].usage <= 0) delete styleMap[hash]
 }
-const styled = <Props, StyleType extends AnyStyle = AnyStyle>(Component: React.ComponentType<Props>) => {
+const styled = <Props, StyleType extends AnyStyle | Animated.WithAnimatedValue<AnyStyle> = AnyStyle>(Component: React.ComponentType<Props>) => {
   const styledComponent = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]) => {
     const ForwardRefComponent = React.forwardRef<React.ComponentType<S & Props & OptionalProps<StyleType>>, S & Props & OptionalProps<StyleType>>((props: S & Props & OptionalProps<StyleType>, ref) => {
       const rem = React.useContext(RemContext)
@@ -120,13 +120,13 @@ const styled = <Props, StyleType extends AnyStyle = AnyStyle>(Component: React.C
       const units = React.useMemo<Units>(() => ({ ...baseUnits, em }), [baseUnits, em])
 
       const { style: styleConvertedFromCSS, hash } = React.useMemo(() => {
-        const style = convertStyle<StyleType>(finalStyle, units)
+        const style = convertStyle<CompleteStyle>(finalStyle, units)
         delete (style as Style).textOverflow
         const hash = generateHash(JSON.stringify(style))
-        return { style: getStyle<StyleType>(hash, style), hash }
+        return { style: getStyle<CompleteStyle>(hash, style), hash }
       }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps: OptionalProps<StyleType> = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout }
+        const newProps: OptionalProps<StyleType> = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout }
         if (finalStyle.textOverflow === 'ellipsis') {
           Object.assign(newProps, { numberOfLines: 1 })
         }