FadeInDown animation

Author: flexbox

hackathon/spacecraft/src/components/StarshipCard.tsx

@@ -2,40 +2,48 @@ import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { Alert, StyleSheet } from "react-native";
 import { Button, Card, Text } from "react-native-paper";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import Animated, {
+  AnimateProps,
+  FadeIn,
+  FadeOut,
+  FadeInDown,
+} from "react-native-reanimated";
 
 import type { StarshipProps } from "../../api/types";
 import { useImage } from "../hooks/useImage";
 import { Routes } from "../navigation/Routes";
 
 import { Image } from "~/components/Image";
 
-export function createAnimatedComponentFrowardingRef<P, S>(
-  Component: React.ComponentClass<P, S>
-) {
-  return React.forwardRef<React.Component<P, S>, P>((props, ref) => {
-    class Wrapper extends React.Component<P, S> {
-      render() {
-        return <Component {...this.props} ref={ref} />;
-      }
+export function withAnimated<T extends object>(
+  WrappedComponent: React.ComponentType<T>
+): React.ComponentClass<AnimateProps<T>, any> {
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || "Component";
+
+  class WithAnimated extends React.Component<T, any> {
+    static displayName = `WithAnimated(${displayName})`;
+
+    render(): React.ReactNode {
+      return <WrappedComponent {...this.props} />;
     }
-    const AnimatedWrapper = Animated.createAnimatedComponent(Wrapper);
-    return <AnimatedWrapper {...props} />;
-  });
+  }
+  return Animated.createAnimatedComponent(WithAnimated);
 }
 
-const AnimatedCard = createAnimatedComponentFrowardingRef(Card);
+const AnimatedCard = withAnimated(Card);
 
 export interface StarshipCardProps {
   ship: StarshipProps;
+  index: number;
 }
 
 interface StarshipDetailsScreenParams {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   navigate: any;
 }
 
-export const StarshipCard = ({ ship }: StarshipCardProps) => {
+export const StarshipCard = ({ ship, index }: StarshipCardProps) => {
   const title = ship.name;
   const price = ship.cost_in_credits;
   const { manufacturer } = ship;
@@ -51,14 +59,19 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
     navigation.navigate(Routes.STARSHIP_DETAILS_SCREEN, ship);
   };
 
+  // visibleIndex -> prop
+  // Range = if index belongs to this range [visibleIndex - 2, visibleIndex+ 2] -> animate
+  // otherwise don't animate
   return (
     <AnimatedCard
       style={styles.containerCard}
       onPress={handleGoToDetails}
       // mounting
-      entering={FadeIn.duration(500)}
+      entering={FadeInDown.duration(index > 3 ? 0 : 250).delay(
+        index > 3 ? 0 : 100 * index
+      )}
       // unmounting
-      existing={FadeOut.duration(500)}
+      exiting={FadeOut.duration(250)}
     >
       <Image
         style={{ width: "100%", height: 200, borderRadius: 12 }}

hackathon/spacecraft/src/screens/StarshipFeedScreen.tsx

@@ -17,13 +17,14 @@ interface ShipProps {
 
 interface RenderItemProps {
   item: ShipProps;
+  index: number;
 }
 
 // SOLUTION 2: with a FlatList - more performant
 const renderItem = (props: RenderItemProps) => {
   const ship = props.item;
 
-  return <StarshipCard ship={ship} />;
+  return <StarshipCard ship={ship} index={props.index} />;
 };
 
 export const StarshipFeedScreen = () => {