SDKs & Guides
React Native
Build a food tracking app with React Native
Add food search, barcode scanning, and nutrition display to your React Native app.
Prerequisites
- React Native 0.72+
- Expo or bare workflow
- ChowAPI key
Installation
1
Install the SDK
npm install chowapi2
Add your API key
// In your app config or .env
CHOWAPI_KEY=chow_live_YOUR_KEYCode examples
Search foods
Search for foods and display results in a FlatList.
FoodSearch.tsx
import { ChowAPI } from 'chowapi'
import { useState } from 'react'
import { FlatList, TextInput, Text, View } from 'react-native'
const chow = new ChowAPI('chow_live_YOUR_KEY')
export function FoodSearch() {
const [query, setQuery] = useState('')
const [results, setResults] = useState([])
const handleSearch = async (text: string) => {
setQuery(text)
if (text.length < 2) return
const { results } = await chow.search(text, { limit: 10 })
setResults(results)
}
return (
<View>
<TextInput value={query} onChangeText={handleSearch}
placeholder="Search foods..." />
<FlatList data={results} keyExtractor={item => item.id}
renderItem={({ item }) => (
<Text>{item.name} - {item.nutrients.calories} cal</Text>
)} />
</View>
)
}React Native Pattern
Offline caching with AsyncStorage
Cache recent searches for offline access.
food-cache.ts
import AsyncStorage from '@react-native-async-storage/async-storage'
import { ChowAPI } from 'chowapi'
const chow = new ChowAPI('chow_live_YOUR_KEY')
async function searchWithCache(query: string) {
const cacheKey = `food_search_${query}`
const cached = await AsyncStorage.getItem(cacheKey)
if (cached) return JSON.parse(cached)
const { results } = await chow.search(query, { limit: 10 })
await AsyncStorage.setItem(cacheKey, JSON.stringify(results))
return results
}