Learn the basic building blocks of Expo and React Native apps: core components

Core Components

Creating scrollable content on web is fairly straightforward.
You only have to apply a fixed width and height to a container to make out-of-bounds content scrollable.
With native development, this requires a bit more than a `View` component with fixed dimensions.

`View` components aren't scrollable in Expo and React Native.
Rendering scrollable content requires additional calculations which could hurt performance when applied to all `View` components.
Expo and React Native have different scrollable components that we can use, like [`ScrollView`](https://docs.expo.io/versions/latest/react-native/scrollview/).
`ScrollView` allows us to fully manage and customize how the content should be scrolled.

ScrollView component

When creating an app, you often need to reuse certain UI elements.
Adding styling to the components directly without grouping these elements into components can lead to inconsistencies.
It's a good practice to create custom components that apply this styling within your app.

Creating custom components is similar to React. We can create a function and render it as a component.
When creating a custom component, it's important to think about the features it needs to support.
Components with just a single or a few features are easier to reuse in multiple places.

> Breaking your design into smaller reusable components is subjective. There is no "one size fits all" solution. To read more about the process of breaking up the design, read the [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) guide.

Combining components

Well done! You've covered some of React Native's most common core components. Let's review:

* The `View` component can be used to create responsive layouts using flexbox, or add basic styling to nested components.
* The `Text` component displays text. On Android and iOS, all text strings needs to be wrapped in one of these.
* The `Image` component displays images. They can be referenced using an `https://` link, local `file://` reference, Base64-encoded string, or image imported as module with `require`.
* The `ScrollView` component is a "visible" container with the scrolling functionality added. In most places, you wouldn't need scrolling.
* The `Button` component is used for "click" or "press" interactions.
* The `TextInput` component is used for capturing user input.
* Components can be combined into custom components for consistent style and reusability.

Review

One of the most fundamental core components is the [`View` component](https://docs.expo.io/versions/latest/react-native/view/). With `View`, you can create responsive layouts using [flexbox](https://reactnative.dev/docs/flexbox) or add basic styling to nested components.

The component is best comparable with a `div` HTML element. Just like `div`, the `View` component is not visible unless styling is applied. We can apply this styling through the `style` property.

```js
<View style={{ width: 250, backgroundColor: 'yellow' }}>
  ...
</View>
```

> Expo and React Native don't use CSS. This method of styling is not available on native platforms. Instead of using CSS, we can write our styling using plain JavaScript objects. These objects use the same CSS properties but they are written in "camelCase". All styling properties are explained in the [style documentation](https://reactnative.dev/docs/style).

View component

In Expo and React Native, components are translated to native components for the platform it's running on. To help you get started, React Native provides a set of ready-to-use components for your app. These components are called "core components" and most of them have built-in Android and iOS implementations.


You can import these components from the `react-native` package. In the previous lesson, we already imported the `View` and `Text` core components. During this lesson, we will dig deeper in `View`, `Text`, `Image`, `Button`, `TextInput`, and `ScrollView`. These components are essential for every Expo and React Native apps.

> We are covering some of the most common core components in this lesson. You can find the complete list of core components in the [Expo API docs](https://docs.expo.io/versions/latest/) and [React Native component docs](https://reactnative.dev/docs/components-and-apis).

Interface broken down into core components

What is a core component?

Most apps require users to provide content, like writing tweets on Twitter. The [`TextInput` component](https://docs.expo.io/versions/latest/react-native/textinput/) is created to capture textual and numeric input. This component is best comparable with the [`<input>` HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).

To listen to input changes from the user, we can use the [`onChangeText`](https://docs.expo.io/versions/latest/react-native/textinput/#onchangetext) event handler. This event handler receives the input as a string, provided by the user.

TextInput component

Besides all visual components, every app requires interactive components.
One of the most frequent interactions is a "click" or "press" interaction. Most of the core components have support for press interactions. But, there is one component specifically created to handle simple presses: the [`Button` component](https://docs.expo.io/versions/latest/react-native/button/).

> Although the `Button` is very limited in styling customization, it's perfect for learning or prototyping purposes.

To capture the user clicking the button, we need to use the `onPress` event handler. This is called `onPress` because there usually is no mouse available on a mobile device.


```js
<Button
  title="Profile page"
  onPress={() => navigate('profile')}
/>
```

Simple press interactions can be anything from submitting a form to navigating to a different page.


Button component

Because Expo and React Native translate components to their native counterpart, they aren’t exactly similar to plain React. With web, you can render text anywhere in the document without adding parent elements. On native platforms like Android and iOS, that's not possible.

To render text on Android and iOS, the string needs to be wrapped in a [`Text` component](https://docs.expo.io/versions/latest/react-native/text/). With this component, you can render and style text. It can also inherit styling from a parent `Text` component, perfect for emphasizing certain words.

Text component

Almost every app displays images. This content can be rendered in React Native using the [`Image` component](https://docs.expo.io/versions/latest/react-native/image/). It's similar to the [`<img>` HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), but the `Image` component has more features.

One of the additional features of `<Image>` is the ability to load images from different sources. This could be a publicly accessible `https://` link, local `file://` reference, Base64-encoded string, or image imported as module with `require`. Each of the image sources has its own benefits.

In this exercise, we will use the two most frequently used methods - using images from HTTP URLs and locally imported images.