A navigator with two screens has already been added to the <App /> component.
But on the first screen, we don’t need a header at all - let’s hide it.
On the second screen, we need to change the header title. Make it Terms and Conditions.
Screen names cannot be changed.

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-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './screens/HomeScreen';
import TermsScreen from './screens/TermsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Terms" component={TermsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

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

export default function GameList({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome to our beautiful app</Text>
      <Text style={styles.terms}>Please, read our terms and conditions</Text>
      <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Terms')}>
        <Text style={styles.buttonLabel}>Terms and conditions</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 30,
  },
  header: {
    color: 'rgb(70,48,235)',
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 20,
  },
  terms: {
    color: '#30AE60',
  },
  button: {
    backgroundColor: 'rgb(70,48,235)',
    marginTop: 20,
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 6,
  },
  buttonLabel: {
    color: 'white',
    fontWeight: 'bold',
  },
});

screens/TermsScreen/index.js

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

export default function GameDetails() {
  return (
    <View style={styles.container}>
      <Text style={styles.description}>
        You agree that by accessing the Site, you have read, understood, and agree to be bound by
        all of these Terms and Conditions. If you do not agree with all of these Terms and
        Conditions, then you are expressly prohibited from using the Site and you must discontinue
        use immediately.
      </Text>
      <Text />
      <Text style={styles.description}>
        Supplemental terms and conditions or documents that may be posted on the Site from time to
        time are hereby expressly incorporated herein by reference. We reserve the right, in our
        sole discretion, to make changes or modifications to these Terms and Conditions at any time
        and for any reason.{' '}
      </Text>
      <Text />
      <Text style={styles.description}>
        We will alert you about any changes by updating the “Last updated” date of these Terms and
        Conditions, and you waive any right to receive specific notice of each such change.{' '}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  description: {
    marginVertical: 10,
  },
});