feat: add web support

App.tsx

@@ -1,5 +1,7 @@
 import { MaterialIcons } from '@expo/vector-icons';
+import { DefaultTheme } from '@react-navigation/native';
 import * as Font from 'expo-font';
+import * as Linking from 'expo-linking';
 import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import React, { useEffect } from 'react';
@@ -8,6 +10,14 @@ import Navigation from './src/components/Navigation';
 
 SplashScreen.preventAutoHideAsync();
 
+const theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: '#000',
+  },
+};
+
 export default function App() {
   const [fontsLoaded, setFontsLoaded] = React.useState(false);
 
@@ -28,7 +38,14 @@ export default function App() {
   return (
     <>
       <StatusBar translucent />
-      <Navigation onReady={() => SplashScreen.hideAsync()} />
+      <Navigation
+        theme={theme}
+        onReady={() => SplashScreen.hideAsync()}
+        linking={{
+          prefixes: [Linking.createURL('/')],
+          config: 'auto',
+        }}
+      />
     </>
   );
 }

app.json

@@ -2,6 +2,7 @@
   "expo": {
     "name": "PocketGear",
     "slug": "pocket-gear",
+    "scheme": "pocketgear",
     "privacy": "public",
     "platforms": [
       "ios",

package.json

@@ -9,6 +9,7 @@
   },
   "packageManager": "yarn@4.1.1",
   "dependencies": {
+    "@expo/metro-runtime": "~3.1.3",
     "@expo/vector-icons": "^14.0.0",
     "@react-navigation/elements": "^2.0.0-alpha.15",
     "@react-navigation/material-top-tabs": "^7.0.0-alpha.17",
@@ -17,6 +18,7 @@
     "expo": "^50.0.14",
     "expo-blur": "~12.9.2",
     "expo-font": "~11.10.3",
+    "expo-linking": "~6.2.2",
     "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "expo-updates": "~0.24.12",

src/components/CPCalculator.tsx

@@ -41,8 +41,6 @@ function CPCalculator({ pokemon, style }: Props) {
     setValue((prev) => prev - 1);
   };
 
-  const pokemons = store.getPokemons();
-
   if (!pokemon.evolution_cp_multipliers) {
     return (
       <View style={style}>
@@ -65,13 +63,15 @@ function CPCalculator({ pokemon, style }: Props) {
       />
       <View style={styles.container}>
         {pokemon.evolution_cp_multipliers.map((it) => {
-          const poke = pokemons.find((p) => p.id === it.id);
+          const poke = store.getPokemon(it.id);
           const minimum = (value || 0) * it.multipliers.minimum;
           const maximum = (value || 0) * it.multipliers.maximum;
           const average = (minimum + maximum) / 2;
+
           if (!poke) {
             return null;
           }
+
           return (
             <TouchableOpacity key={it.id} onPress={() => goToPokemon(it.id)}>
               <View style={styles.pokemon}>

src/components/Evolution.tsx

@@ -28,17 +28,15 @@ function Evolution(props: Props) {
   };
 
   const getEvolutions = (pokemon: Pokemon): Pokemon[] | undefined => {
-    const pokemons = store.getPokemons();
     const { evolution } = pokemon;
 
     return evolution && evolution.branch
       ? (evolution.branch
-          .map((ev) => pokemons.find((p) => p.id === ev.id))
+          .map((ev) => store.getPokemon(ev.id))
           .filter(Boolean) as Pokemon[])
       : undefined;
   };
 
-  const pokemons = store.getPokemons();
   const { pokemon } = props;
   const { evolution } = pokemon;
 
@@ -67,7 +65,8 @@ function Evolution(props: Props) {
 
       while (curr.evolution && curr.evolution.parent) {
         const { parent } = curr.evolution;
-        const poke = pokemons.find((p) => p.id === parent);
+        const poke = store.getPokemon(parent);
+
         if (poke) {
           curr = poke;
           parents = [poke, ...parents];
@@ -80,7 +79,7 @@ function Evolution(props: Props) {
       chain.map((poke) => {
         if (poke.evolution && poke.evolution.parent) {
           const { parent } = poke.evolution;
-          const prev = pokemons.find((p) => p.id === parent);
+          const prev = store.getPokemon(parent);
 
           if (prev && prev.evolution && prev.evolution.branch) {
             const ev = prev.evolution.branch.find(({ id }) => id === poke.id);