**Course Title:** Building Mobile Applications with React Native **Section Title:** Core Components and Styling **Topic:** Understanding core components (View, Text, Image, ScrollView) In this topic, we will delve into the fundamental building blocks of React Native applications: core components. Understanding these components is crucial for creating visually appealing and functional mobile applications. **What are Core Components?** Core components are the basic UI elements that make up a React Native application. They are the foundation upon which more complex components are built. React Native provides a set of pre-built core components that can be used to construct a wide range of UI elements, from simple text labels to complex scrollable lists. **Core Components** ### 1. View Component The `View` component is the most fundamental core component in React Native. It is a container that can hold other components and provides a way to group and style them. The `View` component is similar to the `div` element in HTML. **Example:** ```jsx import React from 'react'; import { View, Text } from 'react-native'; const MyComponent = () => { return ( <View> <Text>Hello, World!</Text> </View> ); }; ``` In this example, the `View` component wraps around a `Text` component, creating a simple container for the text. ### 2. Text Component The `Text` component is used to display text in a React Native application. It can be customized using various props, such as `style`, `fontSize`, and `color`. **Example:** ```jsx import React from 'react'; import { Text } from 'react-native'; const MyComponent = () => { return ( <Text style={{ fontSize: 24, color: 'blue' }}> Hello, World! </Text> ); }; ``` In this example, the `Text` component is styled with a font size of 24 and a blue color. ### 3. Image Component The `Image` component is used to display images in a React Native application. It can be used with local or remote images. **Example:** ```jsx import React from 'react'; import { Image } from 'react-native'; const MyComponent = () => { return ( <Image source={{ uri: 'https://example.com/image.jpg' }} style={{ height: 200, width: 200 }} /> ); }; ``` In this example, the `Image` component is used to display a remote image with a height and width of 200. ### 4. ScrollView Component The `ScrollView` component is used to create a scrollable list of components. It can be used with a variety of components, including `View`, `Text`, and `Image`. **Example:** ```jsx import React from 'react'; import { ScrollView, View, Text } from 'react-native'; const MyComponent = () => { return ( <ScrollView> <View> <Text>Item 1</Text> </View> <View> <Text>Item 2</Text> </View> <View> <Text>Item 3</Text> </View> </ScrollView> ); }; ``` In this example, the `ScrollView` component is used to create a scrollable list of three `View` components, each containing a `Text` component. **Key Concepts** * Core components are the building blocks of React Native applications. * The `View` component is the most fundamental core component and is used as a container for other components. * The `Text` component is used to display text and can be customized using various props. * The `Image` component is used to display images and can be used with local or remote images. * The `ScrollView` component is used to create a scrollable list of components. **Practical Takeaways** * Use the `View` component as a container for other components to group and style them. * Use the `Text` component to display text and customize its appearance using props. * Use the `Image` component to display images and consider using a local image for better performance. * Use the `ScrollView` component to create a scrollable list of components when the content exceeds the screen size. **External Resources** * React Native documentation: [https://reactnative.dev/docs/getting-started](https://reactnative.dev/docs/getting-started) * React Native GitHub repository: [https://github.com/facebook/react-native](https://github.com/facebook/react-native) **Leave a Comment or Ask for Help** If you have any questions or need further clarification on any of the concepts covered in this topic, please leave a comment below. We will be happy to help. In the next topic, we will cover 'Styling components using StyleSheet'.