React Native By Example

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