Let’s practice with nesting navigation and transitions between screens
The App component should only return a navigation container with a stacked navigator.
There should be three screens in the stack - the first with the name Product, the second with the name Comments, the third with the name Analogues.
The first screen should display the screens/Product component, the second one should display the screens/Comments component, the third one should display the screens/Analogues component.
The Product screen should load first.
Do not modify the components screens/Product, screens/Comments, screens/Analogues.

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

function App() {
  return null;
}

export default App;

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

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

export default function Analogues({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Analogues</Text>
      <Text style={styles.description}>Intel Core i7-10700K 3.8GHz / 16MB</Text>
      <Text style={styles.description}>Intel Core i5-10600K 4.1 GHz / 12 MB</Text>
      <Text style={styles.description}>Intel Core i9-10900 2.8 GHz / 20 MB</Text>
      <View style={styles.buttonWrapper}>
        <Button title="Back" />
      </View>
      <View style={styles.buttonWrapper}>
        <Button title="Comments" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 25,
    marginBottom: 10,
  },
  description: {
    fontSize: 18,
    marginVertical: 4,
  },
  buttonWrapper: {
    paddingVertical: 4,
  },
});

screens/Comments/index.js

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

export default function Comments({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Comments</Text>
      <Text style={styles.description}>John D: Very hot</Text>
      <Text style={styles.description}>Jack S: The best processor!</Text>
      <Text style={styles.description}>Intel Core i9-10900 2.8 GHz / 20 MB</Text>
      <View style={styles.buttonWrapper}>
        <Button title="Back" />
      </View>
      <View style={styles.buttonWrapper}>
        <Button title="Main" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 25,
    marginBottom: 10,
  },
  description: {
    fontSize: 18,
    marginVertical: 4,
  },
  buttonWrapper: {
    paddingVertical: 4,
  },
});

screens/Product/index.js

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

export default function Product({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Product Details</Text>
      <Text style={styles.description}>Intel Core i7-10700 2.9GHz / 16MB</Text>
      <Text style={styles.description}>Processor family: Intel Core i7</Text>
      <Text style={styles.description}>Connector type: Socket 1200</Text>
      <Text style={styles.description}>Number of cores: 8</Text>
      <Text style={styles.description}>
        Generation of Intel processors: 10th generation (Comet Lake)
      </Text>
      <View style={styles.buttonWrapper}>
        <Button title="Comments" />
      </View>
      <View style={styles.buttonWrapper}>
        <Button title="Analogues" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 25,
    marginBottom: 10,
  },
  description: {
    fontSize: 18,
    marginVertical: 4,
  },
  buttonWrapper: {
    paddingVertical: 4,
  },
});