O'Reilly logo

React Native Cookbook by Crysfel Villa, Stan Bershadskiy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required