Composing the application layout

Let's suppose we have to create a welcome screen for our application. It should be divided into three sections—header, main content, and footer. We would like to have consistent margins and styling for both logged and anonymous users. However, the header and footer content will differ. Our next task is to create a component that supports these requirements.

Let's create a welcome screen that will use a generic component for encapsulating an app layout.

Follow this step-by-step guide to do so:

1. Create the AppLayout component that enforces some styling. It should accept three props: header, MainContent, and Footer:

const AppLayout = ({Header, MainContent, Footer}) => (
    // These three props can be any component that we pass.
    // You can think of it as a function that
    // can accept any kind of parameter passed to it.
    <View style={styles.container}>
        <View style={styles.layoutHeader}>{Header}</View>
        <View style={styles.layoutContent}>{MainContent}</View>
        <View style={styles.layoutFooter}>{Footer}</View>
    </View>
);

2. It's now time to create placeholders for header, footer, and content. We have created three components: WelcomeHeader, WelcomeContent, and WelcomeFooter. If you wish, you can extend them to be more complex than a trivial piece of text:

const WelcomeHeader = () => <View><Text>Header</Text></View>;
const WelcomeContent = () => <View><Text>Content</Text></View>;
const WelcomeFooter = () => <View><Text>Footer</Text></View>;

3. We should connect AppLayout with our placeholder components. Create the WelcomeScreen component, which will pass placeholder components (from step 2) down to the AppLayout as props:

const WelcomeScreen = () => (
    <AppLayout
        Header={<WelcomeHeader />}
        MainContent={<WelcomeContent />}
        Footer={<WelcomeFooter />}
    />
);

4. The last step is going to be creating the root component for our app and adding some styles:

// src/ Chapter 1/ Example_7_App_layout_and_Welcome_screen/ App.js

// root component
export default class App extends React.Component {
    render = () => <WelcomeScreen />;
}

// styles
const styles = StyleSheet.create({
    container: {
         flex: 1,
         marginTop: 20
    },
    layoutHeader: {
        width: '100%',
        height: 100,
        backgroundColor: 'powderblue'
    },
    layoutContent: {
        flex: 1,
        width: '100%',
        backgroundColor: 'skyblue'
    },
    layoutFooter: {
        width: '100%',
        height: 100,
        backgroundColor: 'steelblue'
    }
});

Please note the use of StyleSheet.create({...}). This creates a style object that represents our app styles. In this case, we have created four different styles (container, layoutHeader, layoutContent, and layoutFooter) that will be available to use with the markup we defined. We previously customized styles using keys such as width, height, and backgroundColor, which are trivial. In this example, however, we also use flex, which comes from the term flexbox pattern. We will explain this approach in detail in Chapter 3, Style Patterns,  where we focus primarily on StyleSheet patterns.

This is pretty good. We have made a trivial layout for our application and then created the welcome screen with it.