Skip to content

Commit c8d34fa

Browse files
flexboxflexbox
authored
Merge pull request #212 from flexbox/feature/animate-stuff
reanimated live
2 parents fc0e968 + a33b75a commit c8d34fa

18 files changed

+576
-264
lines changed

‎challenges/foundation/login-finished.png

98.1 KB
Loading

‎challenges/foundation/password.gif

305 KB
Loading

‎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/package.json

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,34 +24,36 @@
2424
]
2525
},
2626
"dependencies": {
27-
"@expo/metro-runtime": "^3.1.1",
28-
"@expo/vector-icons": "^13.0.0",
27+
"@expo/metro-runtime": "~3.1.3",
28+
"@expo/vector-icons": "^14.0.0",
2929
"@react-native-async-storage/async-storage": "1.21.0",
3030
"@react-native-community/masked-view": "0.1.11",
31-
"@react-native-community/netinfo": "11.2.1",
31+
"@react-native-community/netinfo": "11.1.0",
3232
"@react-navigation/bottom-tabs": "^6.5.5",
3333
"@react-navigation/native": "^6.1.1",
3434
"@react-navigation/native-stack": "^6.9.7",
3535
"@tanstack/react-query": "^5.17.19",
36+
"@types/react-currency-format": "^1.0.4",
3637
"babel-core": "^7.0.0-bridge.0",
3738
"babel-jest": "^29.5.0",
3839
"deepmerge": "^4.3.1",
39-
"expo": "^50.0.2",
40-
"expo-application": "~5.8.3",
41-
"expo-constants": "~15.4.5",
42-
"expo-image": "~1.10.4",
40+
"expo": "~50.0.17",
41+
"expo-application": "~5.8.4",
42+
"expo-constants": "~15.4.6",
43+
"expo-image": "~1.10.6",
4344
"expo-linking": "~6.2.2",
4445
"expo-status-bar": "~1.11.1",
4546
"expo-store-review": "~6.8.3",
46-
"expo-updates": "~0.24.8",
47-
"expo-web-browser": "~12.8.1",
47+
"expo-updates": "~0.24.12",
48+
"expo-web-browser": "~12.8.2",
4849
"react": "18.2.0",
50+
"react-currency-format": "^1.1.0",
4951
"react-dom": "^18.2.0",
50-
"react-native": "0.73.2",
52+
"react-native": "0.73.6",
5153
"react-native-gesture-handler": "~2.14.1",
5254
"react-native-offline": "^6.0.0",
5355
"react-native-paper": "^5.12.2",
54-
"react-native-reanimated": "~3.6.1",
56+
"react-native-reanimated": "~3.6.2",
5557
"react-native-safe-area-context": "4.8.2",
5658
"react-native-screens": "~3.29.0",
5759
"react-native-vector-icons": "^10.0.3",
@@ -61,8 +63,8 @@
6163
"devDependencies": {
6264
"@babel/core": "^7.23.7",
6365
"@babel/preset-typescript": "^7.18.6",
64-
"@react-native-community/datetimepicker": "7.6.2",
65-
"@react-native-community/slider": "4.5.0",
66+
"@react-native-community/datetimepicker": "7.6.1",
67+
"@react-native-community/slider": "4.4.2",
6668
"@storybook/addon-controls": "^7.6.10",
6769
"@storybook/addon-ondevice-actions": "^7.6.15",
6870
"@storybook/addon-ondevice-backgrounds": "^7.6.15",
@@ -77,7 +79,7 @@
7779
"@testing-library/react-native": "^12.4.3",
7880
"@types/jest": "^29.5.4",
7981
"@types/react": "~18.2.48",
80-
"@types/react-dom": "~18.2.18",
82+
"@types/react-dom": "~18.0.10",
8183
"app-icon-badge": "^0.0.15",
8284
"babel-loader": "^9.1.3",
8385
"babel-plugin-module-resolver": "^5.0.0",
@@ -88,7 +90,7 @@
8890
"eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
8991
"eslint-plugin-import": "^2.29.1",
9092
"jest": "^29.6.4",
91-
"jest-expo": "^50.0.1",
93+
"jest-expo": "~50.0.4",
9294
"typescript": "^5.1.3"
9395
}
9496
}

‎hackathon/spacecraft/src/components/FromInput.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const FormInput = ({
1212
<View style={{ paddingVertical: 8 }}>
1313
<TextInput
1414
{...rest}
15+
mode="outlined"
1516
label={label}
1617
value={value}
1718
onChangeText={onChangeText}

‎hackathon/spacecraft/src/components/Image.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import React from "react";
2-
import type { ImageProps } from "expo-image";
2+
// import type { ImageProps } from "expo-image";
3+
import type { ImageProps } from "react-native";
4+
import { Image as RNImage } from "react-native";
35
import { Image as ExpoImage } from "expo-image";
6+
import type { AnimatedProps } from "react-native-reanimated";
7+
import Animated from "react-native-reanimated";
48

5-
export const Image = (props: ImageProps) => {
9+
const AnimatedImage = Animated.createAnimatedComponent(RNImage);
10+
11+
export const Image = (props: AnimatedProps<ImageProps>) => {
612
// We should have a unique value for each image
7-
const blurhash = "L56t?txt00D*t7M{Rjxu00Rk~p-:";
13+
// const blurhash = "L56t?txt00D*t7M{Rjxu00Rk~p-:";
814

915
return (
10-
<ExpoImage
11-
placeholder={blurhash}
12-
contentFit="cover"
13-
transition={350}
16+
<AnimatedImage
17+
// placeholder={blurhash}
18+
// contentFit="cover"
19+
// transition={0}
1420
{...props}
1521
/>
1622
);

‎hackathon/spacecraft/src/components/StarshipCard.tsx

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
1+
import CurrencyFormat from "react-currency-format";
12
import { useNavigation } from "@react-navigation/native";
2-
import React from "react";
3+
import * as React from "react";
34
import { Alert, StyleSheet } from "react-native";
45
import { Button, Card, Text } from "react-native-paper";
6+
import { FadeOut, FadeInDown } from "react-native-reanimated";
57

68
import type { StarshipProps } from "../../api/types";
79
import { useImage } from "../hooks/useImage";
810
import { Routes } from "../navigation/Routes";
11+
import { withAnimated } from "../utils/withAnimated";
912

1013
import { Image } from "~/components/Image";
1114

15+
const AnimatedCard = withAnimated(Card);
16+
1217
export interface StarshipCardProps {
1318
ship: StarshipProps;
19+
index: number;
1420
}
1521

1622
interface StarshipDetailsScreenParams {
1723
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1824
navigate: any;
1925
}
2026

21-
export const StarshipCard = ({ ship }: StarshipCardProps) => {
27+
export const StarshipCard = ({ ship, index }: StarshipCardProps) => {
2228
const title = ship.name;
2329
const price = ship.cost_in_credits;
2430
const { manufacturer } = ship;
@@ -31,22 +37,47 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
3137

3238
const navigation = useNavigation<StarshipDetailsScreenParams>();
3339
const handleGoToDetails = () => {
34-
navigation.navigate(Routes.STARSHIP_DETAILS_SCREEN, ship);
40+
navigation.navigate(Routes.STARSHIP_DETAILS_SCREEN, {
41+
...ship,
42+
image: source,
43+
});
3544
};
3645

46+
// visibleIndex -> prop
47+
// Range = if index belongs to this range [visibleIndex - 2, visibleIndex+ 2] -> animate
48+
// otherwise don't animate
3749
return (
38-
<Card style={styles.containerCard} onPress={handleGoToDetails}>
50+
<AnimatedCard
51+
style={styles.containerCard}
52+
onPress={handleGoToDetails}
53+
// mounting
54+
entering={FadeInDown.duration(index > 3 ? 0 : 250).delay(
55+
index > 3 ? 0 : 100 * index
56+
)}
57+
// unmounting
58+
exiting={FadeOut.duration(250)}
59+
>
3960
<Image
4061
style={{ width: "100%", height: 200, borderRadius: 12 }}
4162
source={source}
63+
// sharedTransitionTag={`image-${ship.model}`}
4264
/>
4365
{/* we remplace with an Image to have the benefits of `expo-image` */}
4466
{/* <Card.Cover source={source} /> */}
4567
<Card.Title title={title} subtitle={manufacturer} />
4668

47-
<Card.Content>
48-
<Text variant="titleLarge">{price} credits</Text>
49-
</Card.Content>
69+
{price !== "unknown" && (
70+
<Card.Content>
71+
<CurrencyFormat
72+
value={price}
73+
displayType="text"
74+
thousandSeparator={true}
75+
renderText={(value: string) => (
76+
<Text variant="titleLarge">{value} credits</Text>
77+
)}
78+
/>
79+
</Card.Content>
80+
)}
5081
<Card.Actions>
5182
{price === "unknown" ? (
5283
<Button disabled>Not for sale</Button>
@@ -56,7 +87,7 @@ export const StarshipCard = ({ ship }: StarshipCardProps) => {
5687
</Button>
5788
)}
5889
</Card.Actions>
59-
</Card>
90+
</AnimatedCard>
6091
);
6192
};
6293

‎hackathon/spacecraft/src/navigation/BottomTabNavigator.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FontAwesome5, Ionicons } from "@expo/vector-icons";
55
import { useTheme } from "react-native-paper";
66
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
77

8-
import { ExploreNavigator } from "~/navigation/ExploreNavigator";
8+
import { PlanetNavigator } from "~/navigation/PlanetNavigator";
99
import { Routes } from "~/navigation/Routes";
1010
import { PilotNavigator } from "~/navigation/PilotNavigator";
1111
import { StarshipNavigator } from "~/navigation/StarshipNavigator";
@@ -46,8 +46,8 @@ export const BottomTabNavigator = () => {
4646
}}
4747
/>
4848
<Tab.Screen
49-
name={Routes.EXPLORE_SCREEN}
50-
component={ExploreNavigator}
49+
name={Routes.PLANETS}
50+
component={PlanetNavigator}
5151
options={{
5252
tabBarLabel: "Explore",
5353
tabBarIcon: ({ color }) => (

‎hackathon/spacecraft/src/navigation/ExploreNavigator.tsx renamed to ‎hackathon/spacecraft/src/navigation/PlanetNavigator.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
22

33
import { Routes } from "./Routes";
44

5-
import { ExploreScreen } from "~/screens/ExploreScreen";
5+
import { PlanetsScreen } from "~/screens/PlanetsScreen";
66
import { PlanetDetailsScreen } from "~/screens/PlanetDetailsScreen";
77

88
const Stack = createNativeStackNavigator();
99

10-
export const ExploreNavigator = () => {
10+
export const PlanetNavigator = () => {
1111
return (
1212
<Stack.Navigator
1313
screenOptions={{
1414
headerShown: false,
1515
}}
1616
>
17-
<Stack.Screen name={Routes.EXPLORE_SCREEN} component={ExploreScreen} />
17+
<Stack.Screen name={Routes.PLANETS} component={PlanetsScreen} />
1818
<Stack.Screen
1919
name={Routes.PLANET_DETAILS_SCREEN}
2020
component={PlanetDetailsScreen}

‎hackathon/spacecraft/src/navigation/Routes.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Routes = {
77
PILOT_SCREEN: "Pilots",
88
PILOT_STACK: "Pilots Stack",
99
PILOT_DETAILS_SCREEN: "Pilot",
10-
EXPLORE_SCREEN: "Explore",
10+
PLANETS: "Planets",
1111
PLANET_DETAILS_SCREEN: "Planet",
1212
PLUS_STACK: "Plus Stack",
1313
PLUS_SCREEN: "Plus",

0 commit comments

Comments
 (0)