**Course Title:** Building Mobile Applications with React Native **Section Title:** Core Components and Styling **Topic:** Build a simple mobile app layout using core components and apply styles using Flexbox. **Objective:** By the end of this lab, you will be able to build a simple mobile app layout using React Native core components and apply styles using Flexbox. **Prerequisites:** * You have a good understanding of the basics of React Native, including its architecture and core components. * You have a React Native development environment set up on your machine, using either the React Native CLI or Expo. * You have a basic understanding of styling in React Native using StyleSheet. **Let's Get Started:** In this lab, we will build a simple mobile app layout using React Native core components and apply styles using Flexbox. We will create a simple app that displays a header, a list of items, and a footer. **Step 1: Create a New React Native Project** Open your terminal and create a new React Native project using the following command: ```bash npx react-native init SimpleApp ``` This will create a new React Native project named `SimpleApp`. **Step 2: Create the Header Component** Create a new file called `Header.js` in the `components` folder of your project. Add the following code to this file: ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const Header = () => { return ( <View style={styles.header}> <Text style={styles.headerText}>Simple App</Text> </View> ); }; const styles = StyleSheet.create({ header: { height: 60, backgroundColor: '#333', justifyContent: 'center', alignItems: 'center', }, headerText: { fontSize: 24, color: '#fff', }, }); export default Header; ``` This code defines a simple header component that displays the text "Simple App" in a centered, 60px tall rectangle with a dark gray background. **Step 3: Create the List Component** Create a new file called `ItemList.js` in the `components` folder of your project. Add the following code to this file: ```jsx import React from 'react'; import { View, Text, FlatList, StyleSheet } from 'react-native'; const ItemList = () => { const items = [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, { id: 4, text: 'Item 4' }, { id: 5, text: 'Item 5' }, ]; return ( <FlatList data={items} renderItem={({ item }) => ( <View style={styles.item}> <Text style={styles.itemText}>{item.text}</Text> </View> )} keyExtractor={(item) => item.id.toString()} /> ); }; const styles = StyleSheet.create({ item: { height: 40, justifyContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#ccc', }, itemText: { fontSize: 18, }, }); export default ItemList; ``` This code defines a simple list component that displays a list of items using a `FlatList` component. **Step 4: Create the Footer Component** Create a new file called `Footer.js` in the `components` folder of your project. Add the following code to this file: ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const Footer = () => { return ( <View style={styles.footer}> <Text style={styles.footerText}> 2023 Simple App</Text> </View> ); }; const styles = StyleSheet.create({ footer: { height: 60, backgroundColor: '#333', justifyContent: 'center', alignItems: 'center', }, footerText: { fontSize: 18, color: '#fff', }, }); export default Footer; ``` This code defines a simple footer component that displays the text " 2023 Simple App" in a centered, 60px tall rectangle with a dark gray background. **Step 5: Combine the Components** Open the `App.js` file in your project and replace the existing code with the following code: ```jsx import React from 'react'; import { View, StyleSheet } from 'react-native'; import Header from './components/Header'; import ItemList from './components/ItemList'; import Footer from './components/Footer'; const App = () => { return ( <View style={styles.container}> <Header /> <ItemList /> <Footer /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, }); export default App; ``` This code combines the header, list, and footer components into a single app component. **Step 6: Apply Flexbox Styles** To apply Flexbox styles to our app component, we need to add some additional styles to our `App.js` file. Update the `styles.container` style to the following: ```jsx container: { flex: 1, backgroundColor: '#fff', flexDirection: 'column', }, ``` This will apply a Flexbox layout to our app component, with a vertical direction. **Step 7: Run the App** Finally, run the app using the following command: ``` npx react-native run-ios ``` or ``` npx react-native run-android ``` This will launch the app on your simulator or physical device. **Conclusion:** In this lab, we built a simple mobile app layout using React Native core components and applied styles using Flexbox. We created a header, list, and footer component, and combined them into a single app component. We also applied Flexbox styles to our app component to create a responsive layout. **Key Concepts:** * React Native core components (View, Text, Image, ScrollView) * Flexbox layout in React Native * Responsive design principles for mobile apps * Building a simple mobile app layout using React Native **Practical Takeaways:** * Use Flexbox to create responsive layouts in your React Native apps. * Use core components to build simple mobile app layouts. * Combine multiple components into a single app component. * Apply styles using StyleSheet to create a visually appealing app. If you have any questions or need help, please leave a comment below. **Next Topic:** Introduction to React Hooks (useState, useEffect)