O'Reilly logo

React Native By Example by Richard Kho

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

Writing a collapsible component

Our collapsible component should accomplish the following goals:

  • It should show and hide other components passed to it when tapped on
  • An animation will accompany this component, adding to the user experience of our app
  • The component should not make any assumptions about the type of data it is showing and hiding; it should not be strictly specific to DatePickerIOS in case we want to reuse the component for other purposes in the future

We'll need to take advantage of React Native's fantastic LayoutAnimation API, which is designed to let us create fluid and meaningful animations.

To begin, I've created an ExpandableCell component within the components folder of our project, like this:

|Tasks |__android |__app ...

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