1
1
import { useNavigation } from "@react-navigation/native" ;
2
- import React from "react" ;
2
+ import * as React from "react" ;
3
3
import { Alert , StyleSheet } from "react-native" ;
4
4
import { Button , Card , Text } from "react-native-paper" ;
5
+ import Animated , { FadeIn , FadeOut } from "react-native-reanimated" ;
5
6
6
7
import type { StarshipProps } from "../../api/types" ;
7
8
import { useImage } from "../hooks/useImage" ;
8
9
import { Routes } from "../navigation/Routes" ;
9
10
10
11
import { Image } from "~/components/Image" ;
11
12
13
+ export function createAnimatedComponentFrowardingRef < P , S > (
14
+ Component : React . ComponentClass < P , S >
15
+ ) {
16
+ return React . forwardRef < React . Component < P , S > , P > ( ( props , ref ) => {
17
+ class Wrapper extends React . Component < P , S > {
18
+ render ( ) {
19
+ return < Component { ...this . props } ref = { ref } /> ;
20
+ }
21
+ }
22
+ const AnimatedWrapper = Animated . createAnimatedComponent ( Wrapper ) ;
23
+ return < AnimatedWrapper { ...props } /> ;
24
+ } ) ;
25
+ }
26
+
27
+ const AnimatedCard = createAnimatedComponentFrowardingRef ( Card ) ;
28
+
12
29
export interface StarshipCardProps {
13
30
ship : StarshipProps ;
14
31
}
@@ -35,7 +52,14 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
35
52
} ;
36
53
37
54
return (
38
- < Card style = { styles . containerCard } onPress = { handleGoToDetails } >
55
+ < AnimatedCard
56
+ style = { styles . containerCard }
57
+ onPress = { handleGoToDetails }
58
+ // mounting
59
+ entering = { FadeIn . duration ( 500 ) }
60
+ // unmounting
61
+ existing = { FadeOut . duration ( 500 ) }
62
+ >
39
63
< Image
40
64
style = { { width : "100%" , height : 200 , borderRadius : 12 } }
41
65
source = { source }
@@ -56,7 +80,7 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
56
80
</ Button >
57
81
) }
58
82
</ Card . Actions >
59
- </ Card >
83
+ </ AnimatedCard >
60
84
) ;
61
85
} ;
62
86
0 commit comments