Introduction

Getting Started with React Native

React Fundamentals

Core Components, Part 1

Core Components, Part 2

Core APIs, Part 1

Core APIs, Part 2

Navigation

Animation

Gestures

Native Modules

Building and publishing

Appendix

Changelog

The Complete Guide to React Native

Fullstack React Native

We successfully built an awesome infinitely-scrolling image feed. Next, we're going to add a new screen to the same app for commenting on images.

. If you haven't been coding along with us but would like to start now, we've included a snapshot of our current progress in the sample code for this book.

If you haven't created a project yet, you'll need to do so with:

bash
$ expo init image-feed --template blank@sdk-36 --yarn

Then, copy the contents of the directory 

Here's what the comments screen will look like:

To build this portion of the app, we'll learn how to use the 

 components. We'll also cover a few other topics like 

. We'll make a few assumptions so we can focus on built-in components:

The first thing we'll want to do is break the screen down into components. Here's one way we can break it down:

 component will be responsible for handling comment data in our app, since both the 

 screen need to render this data. We'll render the 

, passing the comment data for the selected card as a prop. We'll render the built-in 

 component to open and close this new screen based on the 

We'll continue building bottom-up, starting with the 

 component, working our way up to the screen component. We won't test every component individually by rendering it from 

 like we did in the first half of the chapter, but you're welcome to continue to do this if you liked having a quicker feedback loop while developing.

First, let's create the input field for new comments.

As we saw in the "Getting Started" chapter, we can use a 

 component to create an editable text field for the user to type in.

It's common to store the current text in the 

 to update the current text. When the user presses return, the function we passed to 

 is called -- we can then perform some action with the current text, and use 

 to reset the current text to the empty string.

). A few styles don't work quite as well as they do on 

 though: borders tend not to render correctly, and padding and line height can conflict in unusual ways. If you're having trouble styling a 

 screen, it's often better to create a wrapper component that encapsulates state, styles, edge cases, etc, and has a smaller API. That's what we'll do in our 

 component. The result will be very similar to our 

 wrapper components from previous chapters.

# Core Components, Part 2

### Picking up where we left off

We successfully built an awesome infinitely-scrolling image feed. Next, we're going to add a new screen to the same app for commenting on images.

T> This is a **code checkpoint**. If you haven't been coding along with us but would like to start now, we've included a snapshot of our current progress in the sample code for this book.
T>
T> If you haven't created a project yet, you'll need to do so with:
T>
T> `bash
T> $ expo init image-feed --template blank@sdk-36 --yarn
T>`
T>
T> Then, copy the contents of the directory `image-feed/1` from the sample code into your new `image-feed` project directory.

### Comments

Here's what the comments screen will look like:

![](https://d2uusema5elisf.cloudfront.net/books/fullstack-react-native/images/image-feed/comments-screen.png)

To build this portion of the app, we'll learn how to use the `TextInput`, `ScrollView`, and `Modal` components. We'll also cover a few other topics like `AsyncStorage`. We'll make a few assumptions so we can focus on built-in components:

-   we won't use a navigation library even though we have multiple screens (more on navigation in later chapters)
-   we only want to store comments locally on the device, rather than remotely via an API
-   comments can be saved as simple strings (no `id`, `author`, or other metadata)
-   the comment input field is at the top of the screen, to avoid complexities around keyboard and scrolling (which we'll cover in the next chapter)
-   there are few enough comments that a `ScrollView` will be performant enough (rather than using a `FlatList`)

### Breaking down the comments screen

The first thing we'll want to do is break the screen down into components. Here's one way we can break it down:

![](https://d2uusema5elisf.cloudfront.net/books/fullstack-react-native/images/image-feed/comments-screen-component-outline.png)

-   `NavigationBar` - A simple navigation bar for the top of the screen with a title and a "close" button
-   `CommentInput` - The input field for adding new comments
-   `CommentList` - The scrollable list of comments

The `App` component will be responsible for handling comment data in our app, since both the `Feed` screen and `Comments` screen need to render this data. We'll render the `Comments` screen component from `App`, passing the comment data for the selected card as a prop. We'll render the built-in `Modal` component to open and close this new screen based on the `state` of `App`.

We'll continue building bottom-up, starting with the `CommentInput` component, working our way up to the screen component. We won't test every component individually by rendering it from `App` like we did in the first half of the chapter, but you're welcome to continue to do this if you liked having a quicker feedback loop while developing.

### `CommentInput`

First, let's create the input field for new comments.

![](https://d2uusema5elisf.cloudfront.net/books/fullstack-react-native/images/image-feed/comment-input.png)

## `TextInput`

As we saw in the "Getting Started" chapter, we can use a `TextInput` component to create an editable text field for the user to type in.

When working with `TextInput`, we'll generally use the following `props` to capture user input:

-   **`value`** - The current text in the input field.
-   **`onChangeText`** - A function called each time the text changes. The new value is the first argument.
-   **`onSubmitEditing`** - A function called when the user presses the return/next key to submit/move to the next field.

It's common to store the current text in the `state` of the component that renders the `TextInput`. Each time the function we pass to `onChangeText` is called, we call `setState` to update the current text. When the user presses return, the function we passed to `onSubmitEditing` is called -- we can then perform some action with the current text, and use `setState` to reset the current text to the empty string.

### Common `TextInput` props and styles

When working with `TextInput`, we can use most of the same styles as `Text` (which includes the styles for `View`). A few styles don't work quite as well as they do on `Text` though: borders tend not to render correctly, and padding and line height can conflict in unusual ways. If you're having trouble styling a `TextInput`, you may want to wrap the `TextInput` in a `View` and style the `View` instead.

A few other common `props`:

-   **`autoCapitalize`** - For capitalizing characters as they're typed. One of `'none'`, `'sentences'`, `'words'`, `'characters'`.
-   **`autoCorrect`** - Enable/disable auto-correct.
-   **`editable`** - Enable/disable the text field.
-   **`keyboardType`** - The type of keyboard to display. Cross-platform values are  `'default'`, `'numeric'`, `'email-address'`, `'phone-pad'`.
-   **`multiline`** - Allow multiple lines of input text.
-   **`placeholder`** - The text to show when the text field is empty
-   **`placeholderTextColor`** - The color of the placeholder text
-   **`returnKeyType`** - The text of the return key on the keyboard. Cross-platform values are `'done'`, `'go'`, `'next'`, `'search'`, `'send'`.

Many more props are available in the [docs for TextInput](https://facebook.github.io/react-native/docs/textinput.html)

### Adding `TextInput` to `CommentList`

While we could render a `TextInput` component directly from our `Comments` screen, it's often better to create a wrapper component that encapsulates state, styles, edge cases, etc, and has a smaller API. That's what we'll do in our `CommentInput` component. The result will be very similar to our `TextInput` wrapper components from previous chapters.