Hands-On Design Patterns with React Native

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 ...