Dave

MarvelApp/.env

@@ -0,0 +1,2 @@
+publicKey=a3802ab0c87c81f95d8fbc811aeb0d08
+privateKey=b572f5a6a574c27bf097a96f9db029eb3374bfcf

MarvelApp/.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

MarvelApp/App.jsx

@@ -0,0 +1,38 @@
+/* import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native'; */
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import Home from './components/Home/Home'
+import Detail from './components/Detail/Detail';
+
+const Stack = createStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Hello World!" component={Home} />
+        <Stack.Screen name="Detail" component={Detail} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}/* 
+export default function App() {
+    <View style={styles.container}>
+      <Text>Open up App.js to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  return (
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+ */

MarvelApp/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "MarvelApp",
+    "slug": "MarvelApp",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

MarvelApp/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      ["module:react-native-dotenv", {
+        "moduleName": "@env",
+        "path": ".env",
+        "blacklist": null,
+        "whitelist": null,
+        "safe": false,
+        "allowUndefined": true
+      }]
+    ]
+  };
+};

MarvelApp/components/CharacterCard/CharacterCard.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Text, View, Image, StyleSheet,TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+export default function CharacterCard({image, name}) {
+	const navigation = useNavigation();
+  return (
+    <TouchableOpacity 
+			style={[styles.container, styles.containerNightMode]}
+			onPress={() => navigation.navigate('Detail')}
+	>
+			<Image 
+				style={styles.image}
+				source={image}
+			/>
+      <Text style={[styles.name, styles.nameNightMode]}>{name}</Text>
+      {/* <Text style={[styles.name, styles.nameNightMode]}>{name}</Text> */}
+
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F6F8FA', // Color de fondo similar al de GitHub (Modo diurno)
+    borderRadius: 8,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  containerNightMode: {
+    backgroundColor: '#24292E', // Color de fondo similar al de GitHub (Modo nocturno)
+  },
+  image: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    marginBottom: 16,
+  },
+  name: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#24292E', // Color de texto similar al de GitHub (Modo diurno)
+  },
+  nameNightMode: {
+    color: '#F6F8FA', // Color de texto similar al de GitHub (Modo nocturno)
+  },
+});

MarvelApp/components/Detail/Detail.jsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createBottomTabNavigator, Information} from '@react-navigation/bottom-tabs';
+import MaterialCommunityIcons from 'react-native-vector-icons/Ionicons';
+
+const Tab = createBottomTabNavigator();
+
+
+export default function Detail() {
+  return (
+    <Tab.Navigator
+      initialRouteName="Information"
+      tabBarOptions={{
+        activeTintColor: 'darkred'
+      }}
+    >
+      <Tab.Screen 
+        name="Information" 
+        component={Information} 
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="information-circle" color={color} size={size} />
+          )
+        }}
+      />
+      <Tab.Screen 
+        name="Comics" 
+        component={Comics} 
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="book" color={color} size={size} />
+          )
+        }}
+      />
+    </Tab.Navigator>
+  );
+}

MarvelApp/components/Home/Home.jsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Text, View, ActivityIndicator, FlatList } from 'react-native';
+import CharacterCard from '../CharacterCard/CharacterCard';
+import apiParams from '../../config';
+import axios from 'axios';
+import { useState,useEffect } from 'react';
+
+export default function Home() {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+  const { ts, apikey, hash, baseURL } = apiParams;
+
+  useEffect(() => {
+    axios.get(`${baseURL}/v1/public/characters`, {
+      params: {
+        ts,
+        apikey,
+        hash
+      }
+    })
+      .then(response => setData(response.data.data.results))
+      .catch(error => console.error(error))
+      .finally(() => setLoading(false));
+  }, []);
+  return (
+    <View>
+      {isLoading 
+        ? <ActivityIndicator size="large" color="#00ff00" /> 
+        : (
+          <FlatList
+            data={data}
+            keyExtractor={({ id }) => id.toString()}
+            renderItem={({ item }) => (
+              <CharacterCard 
+                image={`${item?.thumbnail?.path}.${item?.thumbnail.extension}`} 
+                name={item.name} />
+            )}
+          />
+        )
+      }
+    </View>
+  );
+}
+const styles = {
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F6F8FA', // Color de fondo similar al de GitHub
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#24292E', // Color de texto similar al de GitHub
+  },
+};

MarvelApp/config.js

@@ -0,0 +1,18 @@
+import md5 from 'md5';
+// Toma los valores de la clave pública y provada desde el archivo .env
+import { publicKey, privateKey } from '@env';
+
+const ts = Date.now();
+// Generamos el hash que nos pide la API pasandole como parámetro 
+// a la función md5 un string que concatene el ts + privateKey + publicKey
+const hash = md5(`${ts}${privateKey}${publicKey}`);
+
+// Exportamos un objeto con los datos necesarios para usar la API
+// para que luego podamos importarlo desde cualquier componente
+const apiParams = {
+  ts,
+  apikey: publicKey,
+  hash,
+	baseURL: 'https://gateway.marvel.com'
+};
+export default apiParams;