Let’s practice adding Drawer navigation.
The App component must be a navigation container with a Drawer navigator.
You need to add three screens named Asia, Europe, NorthAmerica - in that order.
Components for screens, respectively: screens/AsiaCities, screens/EuropeCities,screens/NorthAmericaCities.

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

import React from 'react';
import { View, Text } from 'react-native';
import styles from '../styles';

export default function AsiaCities() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Asia</Text>
      <Text style={styles.city}>1. Tokyo	(Japan)</Text>
      <Text style={styles.city}>2. Delhi	(India)</Text>
      <Text style={styles.city}>3. Shanghai	(China)</Text>
      <Text style={styles.city}>4. Beijing	(China)</Text>
      <Text style={styles.city}>5. Mumbai	(India)</Text>
    </View>
  );
}

screens/EuropeCities/index.js

import React from 'react';
import { View, Text } from 'react-native';
import styles from '../styles';

export default function EuropeCities() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Europe</Text>
      <Text style={styles.city}>1. Istanbul	(Turkey)</Text>
      <Text style={styles.city}>2. Moscow	(Russia)</Text>
      <Text style={styles.city}>3. Paris	(France)</Text>
      <Text style={styles.city}>4. London	(United Kingdom)</Text>
      <Text style={styles.city}>5. Madrid	(Spain)</Text>
    </View>
  );
}

screens/NorthAmericaCities/index.js

import React from 'react';
import { View, Text } from 'react-native';
import styles from '../styles';

export default function NorthAmericaCities() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>North America</Text>
      <Text style={styles.city}>1. Mexico City	(Mexica)</Text>
      <Text style={styles.city}>2. New York City	(USA)</Text>
      <Text style={styles.city}>3. Los Angeles	(USA)</Text>
      <Text style={styles.city}>4. Toronto	(Canada)</Text>
      <Text style={styles.city}>5. Chicago	(USA)</Text>
    </View>
  );
}

screens/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20, 
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 24,
    marginBottom: 20,
    textAlign: 'center',
  },
  city: {
    marginBottom: 8,
  }
});