Let’s practice adding transitions between screens
The App component must return a navigation container with a stacked navigator.
There should be two screens in the stack - the first named Frontend, and the second named Backend.
The first screen should display the screens/FrontendScreen component, the second one - screens/BackendScreen
In this case, the Frontend screen should be displayed first.
Do not change screens/FrontendScreen and screens/BackendScreen components.

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

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

export default function BackendScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Backend stack</Text>
      <View style={styles.list}>
        <Text>1. Node.js</Text>
        <Text>2. Express</Text>
        <Text>3. Mongo</Text>
        <Text>4. MySQL</Text>
      </View>
      <Button title="Check FE stack" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
  },
  header: {
    marginVertical: 10,
    fontWeight: 'bold'
  },
  list: {
    marginBottom: 10,
  }
});

screens/FrontendScreen/index.js

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

export default function FrontendScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Frontend stack</Text>
      <View style={styles.list}>
        <Text>1. HTML, CSS</Text>
        <Text>2. JS</Text>
        <Text>3. React, React-native</Text>
        <Text>4. Styled components</Text>
      </View>
      <Button title="Check BE stack"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
  },
  header: {
    marginVertical: 10,
    fontWeight: 'bold'
  },
  list: {
    marginBottom: 10,
  }
});