DEV Community

Allen
Allen

Posted on

Add a daily inspirational quote to your React Native app in 20 minutes

#reactnative #tutorial #javascript #api

Daily quotes are one of the highest-engagement features in wellness, recovery, and faith apps. Here's how to add one to your React Native app using the Quotable Wisdom API — free tier, no credit card.

What you'll build

A DailyQuote component that fetches a mood-filtered quote on app open and displays it with author attribution.

Step 1 — Get a free API key

Email quotable2026@gmail.com with your app name and what you're building. Subject line: Trial API Key Request. You'll get a key with 1,000 free calls/month within a few hours.

Docs: https://quotable2026.github.io/api-docs

Step 2 — Install nothing

The API is plain REST — no SDK, no npm package needed.

Step 3 — Fetch a quote 

const fetchDailyQuote = async (apiKey) => {
  const response = await fetch(
    'https://ptzxcvrqqmztehcducxq.supabase.co/functions/v1/quotes-random?mood=uplifting&length=short',
    {
      headers: { 'X-API-Key': apiKey }
    }
  );
  const data = await response.json();
  return data;
};
Enter fullscreen mode Exit fullscreen mode

Step 4 — Display it 

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const API_KEY = 'your_key_here';

export default function DailyQuote() {
  const [quote, setQuote] = useState(null);

  useEffect(() => {
    fetchDailyQuote(API_KEY).then(setQuote);
  }, []);

  if (!quote) return null;

  return (
    <View style={styles.container}>
      <Text style={styles.text}>"{quote.text}"</Text>
      <Text style={styles.author}>— {quote.author}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: '#f9f9f9',
    borderRadius: 12,
    margin: 16,
  },
  text: {
    fontSize: 17,
    fontStyle: 'italic',
    color: '#222',
    lineHeight: 26,
    marginBottom: 12,
  },
  author: {
    fontSize: 14,
    color: '#666',
    textAlign: 'right',
  },
});
Enter fullscreen mode Exit fullscreen mode

Step 5 — Make it daily (not just on every open) 

import AsyncStorage from '@react-native-async-storage/async-storage';

const fetchDailyQuote = async (apiKey) => {
  const today = new Date().toDateString();
  const cached = await AsyncStorage.getItem('daily_quote_date');

  if (cached === today) {
    const stored = await AsyncStorage.getItem('daily_quote');
    return JSON.parse(stored);
  }

  const response = await fetch(
    'https://ptzxcvrqqmztehcducxq.supabase.co/functions/v1/quotes-random?mood=uplifting&length=short',
    { headers: { 'X-API-Key': apiKey } }
  );
  const quote = await response.json();

  await AsyncStorage.setItem('daily_quote_date', today);
  await AsyncStorage.setItem('daily_quote', JSON.stringify(quote));

  return quote;
};
Enter fullscreen mode Exit fullscreen mode

Now the quote only refreshes once per day — not on every app open.

Available filters

Mix and match any of these on /quotes-random or /quotes-filter:

Filter Values
mood uplifting, reflective, challenging, inspirational, comforting, thought-provoking, motivational, humorous
category grief, courage, healing, wisdom, recovery, faith, hope, resilience, gratitude, and 34 more
faith christian, islamic, jewish, buddhist, hindu, taoist, confucian
length short, medium, long
era ancient, medieval, early-modern, modern, contemporary, present

Example: faith-specific daily quote 

// Christian quote for a faith app
const url = 'quotes-random?faith=christian&mood=inspirational&length=short';

// Islamic quote for a Muslim app
const url = 'quotes-random?faith=islamic&mood=reflective';

// Grief support app — comforting, not too long
const url = 'quotes-random?category=grief&mood=comforting&length=short';
Enter fullscreen mode Exit fullscreen mode

Example: recovery app streak screen 

// Show a recovery-focused quote after they log a sober day
const url = 'quotes-random?category=recovery&mood=motivational&length=short';
Enter fullscreen mode Exit fullscreen mode

API response shape 

{
  "id": 48291,
  "text": "The secret of getting ahead is getting started.",
  "author": "Mark Twain",
  "category": "courage",
  "mood": "motivational",
  "length": "short",
  "era": "modern",
  "faith_tradition": null
}
Enter fullscreen mode Exit fullscreen mode

Pricing

Tier Calls/month Price
Trial 1,000 Free (30 days)
Starter 10,000 $9/mo
Pro 50,000 $29/mo
Platform 200,000 $79/mo

Get a key

Email quotable2026@gmail.com with your app name. Subject: Trial API Key Request. Usually same-day.

Full docs: https://quotable2026.github.io/api-docs

Built this API while making my own wisdom/faith/encourage app and couldn't find anything with real filtering. Figured other developers might find it useful.

Top comments (0)