Expanding and collapsing containers

In this recipe, we will create a custom container with a title and content. When pressing the title, the content will collapse or expand.

We will explore the layout animation API for this example, as it will help us to accomplish our goal in a few steps only.

Getting ready

Let's start by creating a new app, using the React Native CLI. We will call it CollapsibleApp, but feel free to use any other name.

Once we have created the app, let's create two files at the root of the project, src/MainApp.js and src/Panel/index.js. These are the only two files we will be working on.

How to do it...

  1. Let's start by opening the index.ios.js file; remove the existing code and add the following to bootstrap the app:
            import ...

Get React Native Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.