В <App /> компоненте уже добавлен навигатор с двумя экранами.
Но на первом экране нам не нужен хедер вообще - давай его уберем.
На втором экране нам нужно изменить заголовок хедера.
Заголовок должен отображать название фильма. Элемент фильма передается как параметр маршрута. Проверь MoviesScreen
Имена экранов изменять нельзя.

Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим

Начни Учить Full-Stack JavaScript СЕЙЧАС!

App.js

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import DetailsScreen from './screens/DetailsScreen';
import MoviesScreen from './screens/MoviesScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Movies" component={MoviesScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

app.json

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

screens/DetailsScreen/index.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function DetailsScreen({ route: { params } }) {
  return (
    <View style={styles.container}>
      <Text style={styles.description}>Directed by: {params.directedBy}</Text>
      <Text style={styles.description}>Running time: {params.runningTime}</Text>
      <Text style={styles.description}>Release Date: {params.releaseDate}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    color: '#4730EB',
    marginBottom: 8,
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
  },
  description: {
    marginVertical: 10,
  },
});

screens/MoviesScreen/index.js

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const movies = [
  {
    id: 1,
    name: 'Avengers: Endgame',
    directedBy: 'Anthony Russo, Joseph Russo',
    runningTime: '181 minutes',
    releaseDate: 'April 22, 2019',
  },
  {
    id: 2,
    name: 'Avatar ',
    directedBy: 'James Francis Cameron',
    runningTime: '162 minutes',
    releaseDate: 'December 10, 2009',
  }
]

export default function MoviesScreen({ navigation }) {
  return (
    <View style={styles.container}>
      {movies.map(item => (
        <View style={styles.item} key={item.id}>
          <Text>{item.name}</Text>
          <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Details', item)}>
            <Text style={styles.buttonLabel}>View details</Text>
          </TouchableOpacity>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  item: {
    marginBottom: 10,
    padding: 8,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderRadius: 8,
    justifyContent: 'space-between',
  },
  button: {
    backgroundColor: '#4730EB',
    padding: 4,
    borderRadius: 4,
  },
  buttonLabel: {
    color: 'white',
  }
});