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