fix: flickering animations

nativewind · Aug 6, 2023 · 7822159 · 7822159
1 parent 2a655f0
commit 7822159
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/examples/test/app/(tabs)/index.tsx b/examples/test/app/(tabs)/index.tsx
@@ -1,4 +1,4 @@
-import { FlatList, Text } from "react-native";
+import { FlatList, Text, View } from "react-native";
 import { verifyInstallation } from "nativewind";
 const DATA = [
   {
@@ -20,7 +20,7 @@ export default function TabOneScreen() {
   return (
     <FlatList
       data={DATA}
-      className="bg-blue-500 transition-colors"
+      className="bg-yellow-500 transition-colors duration-[3000ms]"
       renderItem={({ item }) => <Text>{item.title}</Text>}
       keyExtractor={(item) => item.id}
     />

diff --git a/packages/react-native-css-interop/src/css-to-rn/index.ts b/packages/react-native-css-interop/src/css-to-rn/index.ts
@@ -169,8 +169,6 @@ function extractRuleOptions(
 ) {
   const [option, ...rest] = tokens;
 
-  console.error(option);
-
   switch (option) {
     case "darkMode": {
       if (rest[0] === "media") {

diff --git a/packages/react-native-css-interop/src/runtime/css-interop.native.ts b/packages/react-native-css-interop/src/runtime/css-interop.native.ts
@@ -59,7 +59,7 @@ export const CSSInteropWrapper = forwardRef(function CSSInteropWrapper(
     useEffect(() => StyleSheet[DevHotReloadSubscription](rerender), []);
   }
 
-  const { styledProps, meta } = useStyledProps($props, options, rerender);
+  const { styledProps, meta } = useStyledProps($props, jsx, options, rerender);
 
   const props = {
     ...$props,

diff --git a/packages/react-native-css-interop/src/runtime/native/animations.tsx b/packages/react-native-css-interop/src/runtime/native/animations.tsx
@@ -39,7 +39,11 @@ const animatedCache = new WeakMap<ComponentType<any>, ComponentType<any>>([
 ]);
 
 /**
- * TODO: We could probably half the amount of code if this was rewritten to use useAnimatedProps
+ * The big list of TODOs:
+ *
+ *  - Switch to using useAnimatedProps instead of useAnimatedStyle
+ *  - Animation should follow prop mapping
+ *
  */
 
 /*
@@ -66,7 +70,7 @@ export const AnimationInterop = forwardRef(function Animated(
     );
   }
 
-  return <Component ref={ref} {...props} />;
+  return meta.jsx(Component, { ...props, ref }, meta.animationInteropKey);
 });
 
 /**

diff --git a/packages/react-native-css-interop/src/runtime/native/use-computed-props.ts b/packages/react-native-css-interop/src/runtime/native/use-computed-props.ts
@@ -16,6 +16,7 @@ import {
   Interaction,
   InteropFunctionOptions,
   InteropMeta,
+  JSXFunction,
   RuntimeValue,
   Style,
   StyleMeta,
@@ -42,10 +43,11 @@ type UseStyledPropsOptions = InteropFunctionOptions<Record<string, unknown>>;
  */
 export function useStyledProps<P extends Record<string, any>>(
   $props: P,
+  jsx: JSXFunction<P>,
   options: UseStyledPropsOptions,
   rerender: () => void,
 ) {
-  const propsRef = useRef<Record<string, any>>($props);
+  const propsRef = useRef<P>($props);
   propsRef.current = $props;
 
   const inheritedContainers = useContext(ContainerContext);
@@ -87,6 +89,7 @@ export function useStyledProps<P extends Record<string, any>>(
         computedVariables,
         inheritedContainers,
         interaction,
+        jsx,
         options,
       ),
     [computedVariables, inheritedContainers, ...options.dependencies],
@@ -104,6 +107,7 @@ export function getStyledProps<P extends Record<string, any>>(
   computedVariables: Record<string, unknown>,
   inheritedContainers: Record<string, ContainerRuntime>,
   interaction: Interaction,
+  jsx: JSXFunction<P>,
   options: UseStyledPropsOptions,
 ) {
   const styledProps: Record<string, any> = {};
@@ -254,6 +258,7 @@ export function getStyledProps<P extends Record<string, any>>(
     transitionProps,
     variables,
     requiresLayout,
+    jsx,
   };
 
   return {

diff --git a/packages/react-native-css-interop/src/types.ts b/packages/react-native-css-interop/src/types.ts
@@ -7,6 +7,7 @@ import type {
   ContainerCondition,
   Declaration,
 } from "lightningcss";
+import { ComponentType } from "react";
 import {
   Appearance,
   Dimensions,
@@ -33,7 +34,6 @@ import {
   INTERNAL_VERIFICATION_FLAGS,
   INTERNAL_RESET,
 } from "./shared";
-import { ComponentType } from "react";
 
 export interface ExtractRuleOptions {
   platform?: string;
@@ -175,6 +175,7 @@ export type InteropMeta = {
   transitionProps: Set<string>;
   requiresLayout: boolean;
   variables: Record<string, unknown>;
+  jsx: JSXFunction<any>;
 };
 
 export type Interaction = {