A navigator with two screens has already been added to the <App /> component.
But on the first screen, we don’t need a header at all - let’s hide it.
On the second screen, we need to change the header title.
It should display the movie name. The movie item is passed as route param. Check the MoviesScreen
Screen names cannot be changed.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

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',
  },
});