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
No install needed
# Just use the built-in fetch API — no SDK required2
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 { useState } from 'react'
import { FlatList, TextInput, Text, View } from 'react-native'
const API_BASE = 'https://api.chowapi.dev/v1'
const API_KEY = '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 res = await fetch(`${API_BASE}/search?q=${encodeURIComponent(text)}&limit=10`, {
headers: { 'Authorization': `Bearer ${API_KEY}` },
})
const data = await res.json()
setResults(data.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'
const API_BASE = 'https://api.chowapi.dev/v1'
const API_KEY = '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 res = await fetch(`${API_BASE}/search?q=${encodeURIComponent(query)}&limit=10`, {
headers: { 'Authorization': `Bearer ${API_KEY}` },
})
const data = await res.json()
await AsyncStorage.setItem(cacheKey, JSON.stringify(data.results))
return data.results
}