Skip to content

Commit 01d62ff

Browse files
committed
fist animation working
1 parent fc0e968 commit 01d62ff

File tree

2 files changed

+28
-3
lines changed

2 files changed

+28
-3
lines changed

hackathon/spacecraft/babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = function (api) {
1515
rootPathSuffix: "./src/",
1616
},
1717
],
18+
"react-native-reanimated/plugin", // order matters
1819
],
1920
};
2021
};

hackathon/spacecraft/src/components/StarshipCard.tsx

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,31 @@
11
import { useNavigation } from "@react-navigation/native";
2-
import React from "react";
2+
import * as React from "react";
33
import { Alert, StyleSheet } from "react-native";
44
import { Button, Card, Text } from "react-native-paper";
5+
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
56

67
import type { StarshipProps } from "../../api/types";
78
import { useImage } from "../hooks/useImage";
89
import { Routes } from "../navigation/Routes";
910

1011
import { Image } from "~/components/Image";
1112

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+
1229
export interface StarshipCardProps {
1330
ship: StarshipProps;
1431
}
@@ -35,7 +52,14 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
3552
};
3653

3754
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+
>
3963
<Image
4064
style={{ width: "100%", height: 200, borderRadius: 12 }}
4165
source={source}
@@ -56,7 +80,7 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
5680
</Button>
5781
)}
5882
</Card.Actions>
59-
</Card>
83+
</AnimatedCard>
6084
);
6185
};
6286

0 commit comments

Comments
 (0)