Make a full copy of your solution to the previous lab and then do the following modifications. The resulting UI will look pretty much like the original, see the image to the right.

1. Refactoring

   1. Styles — Note that all the main View components use the same, hard-coded / copied style specification. Centralize (i.e., “factor out”) these specifications as follows:

      1. Create a new ./styles/global.js file and add this code template:

         import { StyleSheet } from 'react-native';
         
         export const globalStyles = StyleSheet.create({
             container: {
                 flex: 1,
                 padding: 20,
             },
             title: {
                 fontSize: 18,
                 fontWeight: 'bold',
                 color: '#333',
             },
         });

         Here, the container field holds the CSS specification currently hard-coded into the View specifications.

      2. Modify index.tsx by importing the global style specifications (toward the top, add: import { globalStyles } from './styles/global';) and use the imported specification in the View components (using: <View style={globalStyles.container}>…). You can take the opportunity to add the use of the title style for all movie title texts, which will make the titles larger and, thus, easier to click.

   2. Screens — Modularize the screen component definitions as follows:

      1. Create a new directory, ./screens and cut/paste each of the screen component functions into its own file. Start by moving the home screen component into home.js, which should look like this:

         // Include all the required imports.
         
         export default function HomeScreen({ navigation }) {
             // Leave the remainder of the component unchanged.
         }

      2. Import the home screen component from new module into index.tsx (using: import HomeScreen from "./screens/home";).

      3. Do the same for the details screen component.


2. New Features

   1. About page — We now add a new “About” screen. Create a new ./screens/about.js file, import it into index.tsx and add a new about component entry to the StackNavigation container.

      Note, that at this point, the about component exists but the app provides no way to display it to the user. To do this, you can simply add a button (suitably formatted) to your homepage (see lab 2 for details on this), or you can add an about button to the app header bar. You can choose to do the former, which is easier, or the latter, which is more interesting. The example output above uses the latter.

   2. Shared Header — To add a button to the app header bar, and share that bar throughout the application, Add this directory/file to your system - shared/header.js, and then in index.tsx, import the header component and then replace the options settings in index.tsx for the home and details pages to:

      options={({ navigation }) => ({
          headerRight: () => (
              <Header navigation={navigation}/>
          )
      })}

      The sample system uses a global style setting for the about icon (see the circled question mark in the upper right). You can format your icon as you see fit.

   When complete, your application file structure should look as shown on the right.

When your application is running, create a text file (README.md) in the root of your lab directory that documents the application and includes one-sentence or one-phrase answers to the following:

1. Of what benefit was the refactoring phase of this lab?
2. What do the export commands do?
3. This application uses stack navigation. What does the stack do here? What is the deepest this stack can get in this application?

Submit this application by pushing it to your cs262 repo.

Meet with your teammates to build a domain model for your project.