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

The AddExpenses container and modal

When planning this app, I wrote that once a budget for the month has been set, the user should be shown a screen that contains a button to add their expenses for the month.

The button's behavior was also detailed, and we said that upon tapping on that button, the user should be shown a modal that allows them to input details for their expenses--the name, amount, date the purchase was made on, and an icon to categorize the item. The modal should allow the user to either cancel or save the entry they make.

We can create one component to add expenses that will contain both the Button and Modal, with the Modal defaulting to a hidden state unless activated by the Button.

Let's start by creating a component, ...

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