React Native By Example

Header and TextInput fields

You may note that we currently don't have a way to close this modal or add any data to create new expenses for our list. Let's change that by adding the following things:

• A header that prompts the user to add an expense
• A normal TextInput field that prompts the user for the name of the expense
• A numeric TextInput field, set to a numeric keyboard, that prompts the user for the cost of the expense

Here are the changes I made to AddExpensesModal:

// Expenses/app/components/AddExpensesModal/index.js ... import {   ...   TextInput,   ... } from 'react-native'; ... export default class AddExpensesModal extends Component { ...

Store the amount and description values for the two TextInput fields:

 constructor (props) ...