Marvelapp

index.tsx

import React from "react";
import Constants from "expo-constants";
import { StyleSheet, View, Text, ImageBackground } from "react-native";
import { useNavigation, useRoute } from "@react-navigation/native";

interface IParams {
  character: {
    name: string;
    alterEgo: string;
    imagePath: string;
    biography: string;
    caracteristics: {
      birth: number;
      weight: {
        value: number;
        unity: string;
      };
      height: {
        value: number;
        unity: string;
      };
      universe: string;
    };
    abilities: {
      force: number;
      intelligence: number;
      agility: number;
      endurance: number;
      velocity: number;
    };
    movies: string[];
  };
}

const Detail = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const routeParams = route.params as IParams;

  const { character } = routeParams;

  return (
    <ImageBackground
      source={{ uri: `http://192.168.0.18:3333/${character.imagePath}` }}
      style={styles.container}
    ></ImageBackground>
  );
};

export default Detail;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 32,
    paddingTop: 20 + Constants.statusBarHeight,
  },
});