fix animation

Author: flexbox

hackathon/spacecraft/package.json

@@ -33,6 +33,7 @@
     "@react-navigation/native": "^6.1.1",
     "@react-navigation/native-stack": "^6.9.7",
     "@tanstack/react-query": "^5.17.19",
+    "@types/react-currency-format": "^1.0.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.5.0",
     "deepmerge": "^4.3.1",
@@ -46,6 +47,7 @@
     "expo-updates": "~0.24.12",
     "expo-web-browser": "~12.8.2",
     "react": "18.2.0",
+    "react-currency-format": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-native": "0.73.6",
     "react-native-gesture-handler": "~2.14.1",

hackathon/spacecraft/src/components/Image.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 // import type { ImageProps } from "expo-image";
-import { Image as RNImage, ImageProps } from "react-native";
+import type { ImageProps } from "react-native";
+import { Image as RNImage } from "react-native";
 import { Image as ExpoImage } from "expo-image";
-import type { AnimateProps } from "react-native-reanimated";
+import type { AnimatedProps } from "react-native-reanimated";
 import Animated from "react-native-reanimated";
 
 const AnimatedImage = Animated.createAnimatedComponent(RNImage);
 
-export const Image = (props: AnimateProps<ImageProps>) => {
+export const Image = (props: AnimatedProps<ImageProps>) => {
   // We should have a unique value for each image
   // const blurhash = "L56t?txt00D*t7M{Rjxu00Rk~p-:";
 

hackathon/spacecraft/src/components/StarshipCard.tsx

@@ -1,13 +1,9 @@
+import CurrencyFormat from "react-currency-format";
 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, {
-  AnimateProps,
-  FadeIn,
-  FadeOut,
-  FadeInDown,
-} from "react-native-reanimated";
+import { FadeOut, FadeInDown } from "react-native-reanimated";
 
 import type { StarshipProps } from "../../api/types";
 import { useImage } from "../hooks/useImage";
@@ -64,15 +60,24 @@ export const StarshipCard = ({ ship, index }: StarshipCardProps) => {
       <Image
         style={{ width: "100%", height: 200, borderRadius: 12 }}
         source={source}
-        sharedTransitionTag={`image-${ship.model}`}
+        // sharedTransitionTag={`image-${ship.model}`}
       />
       {/* we remplace with an Image to have the benefits of `expo-image` */}
       {/* <Card.Cover source={source} /> */}
       <Card.Title title={title} subtitle={manufacturer} />
 
-      <Card.Content>
-        <Text variant="titleLarge">{price} credits</Text>
-      </Card.Content>
+      {price !== "unknown" && (
+        <Card.Content>
+          <CurrencyFormat
+            value={price}
+            displayType="text"
+            thousandSeparator={true}
+            renderText={(value: string) => (
+              <Text variant="titleLarge">{value} credits</Text>
+            )}
+          />
+        </Card.Content>
+      )}
       <Card.Actions>
         {price === "unknown" ? (
           <Button disabled>Not for sale</Button>

hackathon/spacecraft/src/navigation/BottomTabNavigator.tsx

@@ -5,7 +5,7 @@ import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { useTheme } from "react-native-paper";
 import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
 
-import { ExploreNavigator } from "~/navigation/ExploreNavigator";
+import { PlanetNavigator } from "~/navigation/PlanetNavigator";
 import { Routes } from "~/navigation/Routes";
 import { PilotNavigator } from "~/navigation/PilotNavigator";
 import { StarshipNavigator } from "~/navigation/StarshipNavigator";
@@ -46,8 +46,8 @@ export const BottomTabNavigator = () => {
         }}
       />
       <Tab.Screen
-        name={Routes.EXPLORE_SCREEN}
-        component={ExploreNavigator}
+        name={Routes.PLANETS}
+        component={PlanetNavigator}
         options={{
           tabBarLabel: "Explore",
           tabBarIcon: ({ color }) => (

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

@@ -2,19 +2,19 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import { Routes } from "./Routes";
 
-import { ExploreScreen } from "~/screens/ExploreScreen";
+import { PlanetsScreen } from "~/screens/PlanetsScreen";
 import { PlanetDetailsScreen } from "~/screens/PlanetDetailsScreen";
 
 const Stack = createNativeStackNavigator();
 
-export const ExploreNavigator = () => {
+export const PlanetNavigator = () => {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
       }}
     >
-      <Stack.Screen name={Routes.EXPLORE_SCREEN} component={ExploreScreen} />
+      <Stack.Screen name={Routes.PLANETS} component={PlanetsScreen} />
       <Stack.Screen
         name={Routes.PLANET_DETAILS_SCREEN}
         component={PlanetDetailsScreen}

hackathon/spacecraft/src/navigation/Routes.ts

@@ -7,7 +7,7 @@ export const Routes = {
   PILOT_SCREEN: "Pilots",
   PILOT_STACK: "Pilots Stack",
   PILOT_DETAILS_SCREEN: "Pilot",
-  EXPLORE_SCREEN: "Explore",
+  PLANETS: "Planets",
   PLANET_DETAILS_SCREEN: "Planet",
   PLUS_STACK: "Plus Stack",
   PLUS_SCREEN: "Plus",

hackathon/spacecraft/src/navigation/StarshipNavigator.tsx

@@ -34,8 +34,7 @@ export const StarshipNavigator = () => {
         name={Routes.STARSHIP_DETAILS_SCREEN}
         component={StarshipDetailsScreen}
         options={{
-          presentation: "transparentModal",
-          animation: "fade",
+          presentation: "modal",
           contentStyle: {
             backgroundColor: "#fff",
           },

hackathon/spacecraft/src/screens/ExploreScreen.tsx renamed to hackathon/spacecraft/src/screens/PlanetsScreen.tsx

@@ -6,9 +6,11 @@ import { usePlanets } from "~/hooks/usePlanets";
 import { Routes } from "~/navigation/Routes";
 import { getTerrainColor } from "~/utils/getTerrainColor";
 
-interface ExploreScreenProps {}
+interface PlanetsScreenProps {
+  navigation: any;
+}
 
-export function ExploreScreen({ navigation }: ExploreScreenProps) {
+export function PlanetsScreen({ navigation }: PlanetsScreenProps) {
   const { data, isLoading, isError, error } = usePlanets();
 
   if (isLoading) {
@@ -35,8 +37,10 @@ export function ExploreScreen({ navigation }: ExploreScreenProps) {
     const backgroundColor = getTerrainColor(item.terrain);
     const size = item.diameter / 100;
 
+    const randomMarginTop = Math.floor(Math.random() * 100);
+
     return (
-      <View style={{ padding: 64 }}>
+      <View style={{ padding: 64, paddingTop: randomMarginTop }}>
         <TouchableOpacity
           onPress={() =>
             navigation.navigate(Routes.PLANET_DETAILS_SCREEN, { planet: item })
@@ -51,7 +55,7 @@ export function ExploreScreen({ navigation }: ExploreScreenProps) {
             width: size,
             height: size,
             backgroundColor: backgroundColor,
-            borderRadius: "100%",
+            borderRadius: 1000,
             margin: 8,
           }}
         />
@@ -64,7 +68,7 @@ export function ExploreScreen({ navigation }: ExploreScreenProps) {
       <FlatList
         data={data.results}
         renderItem={renderItem}
-        keyExtractor={(ship) => ship.model}
+        keyExtractor={(planet) => planet.name}
         horizontal={true}
       />
     </ScreenContainer>

hackathon/spacecraft/src/screens/StarshipDetailsScreen.tsx

@@ -7,18 +7,17 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  Alert,
 } from "react-native";
 import { Text, DataTable, List, FAB, Chip } from "react-native-paper";
-import { withAnimated } from "~/utils/withAnimated";
-
-const AnimatedFAB = withAnimated(FAB);
 import { useSharedValue, withSpring } from "react-native-reanimated";
 
 import type { StarshipProps } from "../../api/types";
 
+import { withAnimated } from "~/utils/withAnimated";
 import { Image } from "~/components/Image";
 
+const AnimatedFAB = withAnimated(FAB);
+
 interface StarshipDetailsScreenProps {
   route: {
     params: StarshipProps;

hackathon/spacecraft/src/utils/getTerrainColor.ts

@@ -18,7 +18,6 @@ const terrainColorMap = {
 };
 
 export function getTerrainColor(terrain: string) {
-  console.log("🚀 ~ terrain:", terrain);
   for (const [key, color] of Object.entries(terrainColorMap)) {
     if (terrain.includes(key)) {
       return color;