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

In the first part of this section, we covered a variety of React Native APIs for accessing device information. In this part, we'll focus on one fundamental feature of mobile devices: the keyboard.

. 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 messaging --template blank@sdk-36 --yarn

Then, copy the contents of the directory 

Keyboard handling in React Native can be very complex. We're going to learn how to manage the complexity, but it's a challenging problem with a lot of nuanced details.

Our UI is currently a bit flawed: on iOS, when we focus the message input field, the keyboard opens up and covers the toolbar. We have no way of switching between the image picker and the keyboard. We'll focus on fixing these issues.

We're about to embark on a deep dive into keyboard handling. We'll cover some extremely useful APIs and patterns -- however, you shouldn't feel like you have to complete the entire chapter now. Feel free to stop here and return again when you're actively building a React Native app that involves the keyboard.

Keyboard handling can be challenging for many reasons:

In this app, we'll attempt to achieve a native-quality messaging experience. Ultimately though, there will be a few aspects that don't quite feel native. It's extremely difficult to get an app with complex keyboard interactions to feel 

 without dropping down to the native level. If you can't achieve the right experience in React Native, consider writing a native module for the screen that interacts heavily with the keyboard. This is part of the beauty of React Native -- you can start with a JavaScript version in your initial implementation of a screen or feature, then seamlessly swap it out for a native implementation when you're certain it's worth the time and effort.

If you're lucky, you'll be able to find an existing open source native component that does exactly that!

In the first chapter, we demonstrated how to use the 

 component to move the UI of the app out from under the keyboard. This component is great for simple use cases, e.g. focusing the UI on an input field in a form.

When we need more precise control, it's often better to write something custom. That's what we'll do here, since we need to coordinate the keyboard with our custom image input method.

Our goal here is for our image picker to have the same height as the native keyboard, in essence acting as a custom keyboard created by our app. We'll want to smoothly animate the transition between these two input methods.

For a demo of the desired behavior, you can try playing around with the completed app (it's the same app as the previous section):

Since this problem is fairly complicated, we're going to break it down into 3 parts, each with its own component:

 build one massive component that handles everything, but this would get very complicated and be difficult to modify or reuse elsewhere.

We'll need to measure the available space on the screen and the keyboard height ourselves, and adjust our UI accordingly. We'll keep track of whether the keyboard is currently transitioning. And we'll animate our UI to transition between the different keyboard states.

# Core APIs, Part 2

In the first part of this section, we covered a variety of React Native APIs for accessing device information. In this part, we'll focus on one fundamental feature of mobile devices: the keyboard.

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 messaging --template blank@sdk-36 --yarn
T>`
T>
T> Then, copy the contents of the directory `messaging/1` from the sample code into your new `messaging` project directory.

## The keyboard

Keyboard handling in React Native can be very complex. We're going to learn how to manage the complexity, but it's a challenging problem with a lot of nuanced details.

Our UI is currently a bit flawed: on iOS, when we focus the message input field, the keyboard opens up and covers the toolbar. We have no way of switching between the image picker and the keyboard. We'll focus on fixing these issues.

W> We're about to embark on a deep dive into keyboard handling. We'll cover some extremely useful APIs and patterns -- however, you shouldn't feel like you have to complete the entire chapter now. Feel free to stop here and return again when you're actively building a React Native app that involves the keyboard.

### Why it's difficult

Keyboard handling can be challenging for many reasons:

-   The keyboard is enabled, rendered, and animated natively, so we have much less control over its behavior than if it were a component (where we control the lifecycle).
-   We have to handle a variety of asynchronous events when the keyboard is shown, hidden, or resized, and update our UI accordingly. These events are somewhat different on iOS and Android, and even slightly different in the simulator compared to a real device.
-   The keyboard works differently on iOS and Android at a fundamental level. On iOS, the keyboard appears _on top_ of the existing UI; the existing UI doesn't resize to avoid the keyboard. On Android, the keyboard _resizes_ the UI above it; the existing UI will shrink to fit in the available space. We generally want interactions to feel similar on both platforms, despite this fundamental difference.
-   Keyboards interact specially with certain native elements e.g. `ScrollView`. On iOS, dragging downward on a `ScrollView` can dismiss the keyboard at the same rate of the pan gesture.
-   Keyboards are user-customizable on both platforms, meaning there's an almost unlimited number of shapes and sizes our UI has to handle.

In this app, we'll attempt to achieve a native-quality messaging experience. Ultimately though, there will be a few aspects that don't quite feel native. It's extremely difficult to get an app with complex keyboard interactions to feel _perfect_ without dropping down to the native level. If you can't achieve the right experience in React Native, consider writing a native module for the screen that interacts heavily with the keyboard. This is part of the beauty of React Native -- you can start with a JavaScript version in your initial implementation of a screen or feature, then seamlessly swap it out for a native implementation when you're certain it's worth the time and effort.

T> If you're lucky, you'll be able to find an existing open source native component that does exactly that!

### `KeyboardAvoidingView`

In the first chapter, we demonstrated how to use the `KeyboardAvoidingView` component to move the UI of the app out from under the keyboard. This component is great for simple use cases, e.g. focusing the UI on an input field in a form.

When we need more precise control, it's often better to write something custom. That's what we'll do here, since we need to coordinate the keyboard with our custom image input method.

Our goal here is for our image picker to have the same height as the native keyboard, in essence acting as a custom keyboard created by our app. We'll want to smoothly animate the transition between these two input methods.

For a demo of the desired behavior, you can try playing around with the completed app (it's the same app as the previous section):

-   On Android, you can scan this QR code from within the Expo app:

    ![](https://d2uusema5elisf.cloudfront.net/books/fullstack-react-native/images/messaging/qr.png)
-   On iOS, you can build the app and preview it on the iOS simulator or send the link of the project URL to your device like we've done in previous chapters.

### On managing complexity

Since this problem is fairly complicated, we're going to break it down into 3 parts, each with its own component:

-   `MeasureLayout` - This component will measure the available space for our messaging UI
-   `KeyboardState` - This component will keep track of the keyboard's visibility, height, etc
-   `MessagingContainer` - This component will displaying the correct IME (text, images) at the correct size

We'll connect them so that `MeasureLayout` renders `KeyboardState`, which in turn renders `MessagingContainer`.

We _could_ build one massive component that handles everything, but this would get very complicated and be difficult to modify or reuse elsewhere.

### `Keyboard`

We'll need to measure the available space on the screen and the keyboard height ourselves, and adjust our UI accordingly. We'll keep track of whether the keyboard is currently transitioning. And we'll animate our UI to transition between the different keyboard states.