Let’s practice passing parameters when changing screens.
The App component should only return a navigation container with a stacked navigator.
There should be two screens in the stack - the first with the name Games, the second with the name Details.
The first screen should display the screens/GamesList component, the second one should display the screens/GameDetails component.
The Games screen should load first.
Do not modify the components screens/GamesList, screens/GameDetails.

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 from 'react';

export default function App() {
  return null;
}

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/GameDetails/index.js

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

export default function GameDetails() {
  if (!params && !params.id) return null;

  return (
    <View style={styles.container}>
      <Text style={styles.header}>{params.name}</Text>
      <Text style={styles.description}>Platform: {params.platform}</Text>
      <Text style={styles.description}>Publisher: {params.publisher}</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/GamesList/index.js

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

const games = [
  {
    id: 1,
    name: 'Spider Man',
    platform: 'PS4',
    publisher: 'SIE (Sony Interactive Entertainment)',
  },
  {
    id: 2,
    name: 'Mortal Kombat',
    platform: 'XBox',
    publisher: 'Warner Bros. Games',
  },
];

export default function GameList() {
  return (
    <View style={styles.container}>
      {games.map((item) => (
        <View style={styles.item} key={item.id}>
          <Text>{item.name}</Text>
          <TouchableOpacity style={styles.button}>
            <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',
  },
});