Fetching list data
Commonly, you’ll fetch your list data from some API endpoint. In this section, you’ll learn about making API requests from React Native components. The good news is that the fetch()
API is polyfilled by React Native, so the networking code in your mobile applications should look and feel a lot like it does in your web applications.
To start things off, let’s build a mock API for our list items using functions that return promises just like fetch()
does:
const items = new Array(100).fill(null).map((v, i) => `Item ${i}`);
function filterAndSort(data: string[], text: string, asc: boolean) {
return data
.filter((i) => text.length === 0 || i.includes(text))
.sort(
asc
? (a, b) => (b > a ? -1 : a === b ? 0 : 1)
: (a, b) => (a > b ? -1 : a === b ? 0 : 1)
);
}
export function fetchItems(
filter: string,
asc: boolean
): Promise<{ json: () => Promise<{ items: string[] }> }>...