manusalinas-mx

 <Text style={{ marginLeft: 4 }}>- {pelicula.generos.map(g => g.name).join(', ')} </Text>


// Suponiendo que generos es de tipo Genero
export interface Genero; {
    id: number;
    name: string;
}

manusalinas-mx

import { createStackNavigator } from '@react-navigation/stack';
import { MoviesScreen } from '../screens/MoviesScreen';
import { MovieDetailScreen } from '../screens/MovieDetailScreen';
import { Movie } from '../interfaces/movieInterfaces';

export type RootStackParams = {
    MoviesScreen: undefined,
    MovieDetailScreen: Movie,
}

manusalinas-mx

// 1- Crea una interface con los resultados esperados
interface MoviesState {
    nowPlaying: Movie[];
    popular: Movie[];
    topRated: Movie[];
    upcoming: Movie[];
}

// 2- Usa la interface multiple en un solo 'useState' hook con inicializacion vacia
const [moviesState, setMoviesState] = useState<MoviesState>({

manusalinas-mx

// title?: string;

{
    title ? <Text style={{ fontSize: 20, fontWeight: "bold", paddingLeft: 8, paddingBottom: 5 }}>{title}</Text> : <View style={{ height: 20, paddingBottom: 5 }}></View>;
}

// o solamente
{
    title && <Text style={{ fontSize: 20, fontWeight: "bold", paddingLeft: 8, paddingBottom: 5 }}>{title}</Text>;
}

manusalinas-mx

const { width } = Dimensions.get("window");

// or

const windowDim = Dimensions.get("window");

manusalinas-mx

// 1-  Instalar axios
npm install axios

// 2- Importar Axios
import axios from "axios";

// 3- Crear un file para centralizarlo con los parametros requeridos
import axios from "axios";

const moviesAPI = axios.create({

manusalinas-mx

import { useNavigation } from "@react-navigation/native";
import React from "react";
import { Button, SafeAreaView, Text } from "react-native";

export const MoviesScreen = () => {
    const navigation = useNavigation<any>();

    return (
        <SafeAreaView>
            <Text style={{ fontSize: 50 }}>Movies</Text>

manusalinas-mx

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { HomeScreen } from "../screens/HomeScreen";
import { DetailScreen } from "../screens/DetailScreen";
import { ProfileScreen } from "../screens/ProfileScreen";
import { SettingsScreen } from "../screens/SettingsScreen";

const Stack = createStackNavigator();

export function NavigationStack() {

manusalinas-mx

import React, { useContext } from "react";
import Icon from "react-native-vector-icons/Ionicons";

import { DrawerContentComponentProps, DrawerContentScrollView, createDrawerNavigator } from "@react-navigation/drawer";
// import { NavigationStack } from './NavigationStack';
import { NotificationsScreen } from "../screens/NotificationsScreen";
import { useWindowDimensions, View, Image, Text, TouchableOpacity } from "react-native";
import { Colores, styles } from "../theme/AppTheme";
import { Tabs } from "./Tabs";
import { AuthContext } from "../context/AuthContext";

manusalinas-mx

import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
    globalMargin: {
        marginHorizontal: 20,
        marginVertical: 8,
    },
    mainTitle: {
        fontSize: 30,
        textAlign: "center",