Parenting template
Storyloom AI Bedtime Story App
A React Native app for parents: pick a hero, a place and a gentle lesson, and Gemini writes, illustrates and reads aloud a bedtime story. Runs on sample stories until you connect Supabase.
- 18 screens
- iOS & Android
- Sample data
- Updated Oct 19, 2026
- Verified release
Free to copy · Full source · No credit card
Screens
6 screens from the working app.
What’s inside
- Story builder: a child or animal friend, six places, eight lessons, 3/5/8 minutes and four narrator voices
- Three Gemini tasks in a Supabase Edge Function: write the story, draw each page, read each page aloud
- Honest staged progress: writing, each picture as it lands, recording; keeps going if you leave the screen
- Reader with read-along word lighting, narration playback, sleep timer, text size and a slowly dimming end
- For parents: drawn avatars only, a grown-up number check before plans and deleting data, no ads or analytics
- Sample mode with no backend: two sample children, six stories and 73 bundled illustrations
- Free plan of one new story a week, checked on the server; Pro through RevenueCat (sample prices until connected)
- Light and dark themes; the reader and story screens always at night
About this template
Overview
Storyloom is a bedtime story app used by parents with their child. The parent picks who the story is about (their child by first name, or one of six animal friends), where it happens, what it gently shows and how long it is. The app writes the story, draws a picture for every page and reads it aloud, then keeps it in a family library with favourites and collections.
Out of the box it runs in sample mode: no backend, everything stored on the device. Connect Supabase and a Gemini key and the same screens make real stories.
Key features
Library with tonight's idea for one of the children, keep reading, a favourites shelf, Calm/Brave/Friendship collections and every story
Builder with drawn hero and place pickers, lesson chips, an optional one-line detail, length and narrator, and the cost shown before Create
Creating screen that shows each real step and each picture as it arrives; failures get their own words and next step
Story page with Read or carry on, a pages strip, favourite, edit a page's words, draw a missing picture, share the text and delete
Reader that lights each word as it is read (recorded narration or read-along pacing), with page bars, a sleep timer and text size
Kids profiles with drawn avatars built from skin tone, hair and pajama colour, never photos
You tab with the week's free story, reader settings, the grown-up check, restore purchases and Delete my data
In-app Privacy Policy and Terms of Use, and an About screen
Screens
Welcome, add your first child, Stories (library), New story, Creating, Story, Reader, The end, Collection, Kids, a child's profile, Add a child, You, the grown-up check, Storyloom Pro, Privacy Policy, Terms of Use and About: 18 screens, all built and tested in light and dark.
AI and backend
AI runs on the server through one Supabase Edge Function (`ai`) that calls Google Gemini with your key. The app signs each install in anonymously, so there is no visible account.
write-story (2 units): title and pages with a picture brief each, JSON output, a children's safety prompt; saves the story and its pages
illustrate-page (2 units a page): one flat picture-book style, later pages drawn against page 1 so the hero stays the same
narrate (1 unit a page): each page read slowly in the chosen voice, saved as audio
A six-page story uses 20 units; the daily allowance, Pro limits and the free plan's one story a week are checked on the server
Tables kids, stories and pages with row-level security; pictures and narration in a private storage bucket, shown through signed URLs
In sample mode, Create returns a designed sample story for the chosen place and hero, with bundled pictures. Sample stories have no recorded voice: the reader's read-along lights the words at a bedtime pace.
Monetisation
Free makes one new story a week and includes Storyloom's own stories, read by one voice. Pro (monthly and yearly) makes unlimited stories in all four voices. Purchases go through RevenueCat; until you connect it, the paywall shows sample prices and says subscriptions open in the App Store version. The plans screen sits behind the grown-up check.
Setup
Connect Supabase and apply the two migrations, add the Gemini key and deploy the functions, then connect RevenueCat to sell Pro. Each step below includes the request for your coding agent.
What you get
- Full source — Expo and React Native in TypeScript, as an app in your workspace.
- Live preview — try every change in your browser or on your phone.
- Verified release — it compiles and every screen opens without errors.
- AI assistant — change anything by chat; each change uses credits.
- Builds and store upload — iOS and Android builds, sent to the App Store and Google Play from Publish.
- No credits to copy — the copy itself costs none.
Made with an earlier version of FluxNative. Your copy works as it is; ask the agent to update it for app languages, currencies and About links.
What you need
- A FluxNative account — the Free plan holds up to 2 apps.
- No backend to start — it runs on sample data until you connect yours.
- Creator or higher — for native builds and store upload.
- Store accounts — Apple Developer Program (US$99 a year) and Google Play (US$25 once), to publish.
What’s in the source
- screens
- 18
- files in your copy
- 418
- lines written for this app
- 5,713
- ready-made UI components
- 129
App text in English and Vietnamese
Tech stack
- Expo SDK
- 57.0.22
- React Native
- 0.86.3
- React
- 19.2.8
- TypeScript
- 6.0.3
- Expo Router
- 57.0.21
- Supabase JS
- 2.112.3
- RevenueCat
- 10.9.1
From this release’s package.json.
Design system
- Headings
- Outfit
- Body
- System font
- Light and dark mode
- Liquid glass
- Capsule buttons
- Plain cards
Set up after you fork
Your copy opens with the AI assistant that built it. Do the steps in order: connect what a step asks for under Server, then send each prompt.
Connect Supabase
Server › Backend › Supabase. Apply both migrations, turn on anonymous sign-ins in the Supabase dashboard, and write the public URL and anon key to .env. Until then the app runs on sample stories.
Prompt for the AIConnect this app to the Supabase project under Server › Backend › Supabase. Apply supabase/migrations/20261019000000_ai_kit.sql and then supabase/migrations/20261019010000_storyloom.sql. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Remind me to turn on Authentication › Sign In / Providers › "Allow anonymous sign-ins" in the Supabase dashboard and to keep the anonymous sign-in rate limit low. Then confirm the kids, stories and pages tables exist with row-level security.
Turn on the AI
Server › API keys & secrets: add GEMINI_API_KEY (a billing-enabled key; image models have no free tier). Deploy the ai function. Keep AI_FREE_UNITS_PER_DAY at 30 or more so a 9-page story fits.
Prompt for the AIUnder Server › API keys & secrets, check that GEMINI_API_KEY is set, and set AI_FREE_UNITS_PER_DAY to 30 and AI_PRO_UNITS_PER_DAY to 500 unless I say otherwise. Deploy the Supabase Edge Function ai (supabase/functions/ai) and push its secrets. Invoke it with { "task": "usage" } as a test user and show me the answer. Then make one story from the New story tab and tell me whether writing, drawing and narration all succeeded.
Sell Pro
Server › Monetization: connect RevenueCat with a monthly and a yearly product in one offering, entitlement pro. Save the webhook secret and deploy the revenuecat-webhook function.
Prompt for the AIConnect RevenueCat under Server › Monetization for Storyloom Pro: one offering with a monthly and a yearly product and the entitlement pro. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env. Create a long random REVENUECAT_WEBHOOK_SECRET under Server › API keys & secrets, deploy supabase/functions/revenuecat-webhook with JWT verification off, push the secret, and give me the webhook URL and Authorization header to paste into RevenueCat › Integrations › Webhooks. Update PLAN_PREVIEW in src/services/iap/index.ts to match my real prices.
Choose the stories and voices
Places, lessons, narrator voices and animal friends live in src/services/catalog; Storyloom's own six stories are in templates.ts. The server's task list (functions/ai/tasks.ts) must match.
Prompt for the AIShow me the places, lessons, narrator voices and animal friends in src/services/catalog/index.ts and the voice mapping in the server's ai function (functions/ai/tasks.ts). Apply the changes I ask for in both files so the app and the server stay in step, keep the safety prompt in write-story, and re-run the typecheck.
Set your icon, store IDs and legal pages
Rename the app, replace the icon, retune the colours and point the legal links at your own pages. Rewrite the in-app Privacy Policy and Terms of Use for your business.
Prompt for the AIRename the app to the name I give you in app.json and the visible copy. Replace assets/icon.svg and assets/adaptive-icon.svg with my icon and render icon.png, adaptive-icon.png and favicon.png. Change brandSeed and the overrides in src/theme/brand.ts to my colours, keeping text contrast. Set EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL in .env, and update src/features/legal/PrivacyScreen.tsx and TermsScreen.tsx with my company's details.
How to use this template
- Use the template to get an editable copy, with its source, in your workspace (Templates).
- Ask the AI assistant for the changes you want, in plain words (Work with the assistant).
- Try each change in the live preview, or on your phone (Preview).
- On Creator or higher, build it for iOS and Android and send it to the stores (Publishing overview).
Licence and support
Licence
You own the app made for you; the template’s code stays InspireUI’s and is licensed for use in your apps (Terms › Our intellectual property).
Help
- Guides to templates, the assistant and publishing.
- Contact support from Help; replies usually within 1–2 business days.
- In your copy, ask the AI assistant about any screen or file.
Made by FluxNative
Support policyQuestions
Is it free?
Copying a free template costs nothing, not even credits; a Premium one is a one-time purchase per website. Chat changes and builds use credits.
What do I own?
You own the app made for you. The template’s code stays InspireUI’s and is licensed for use in your apps (Terms › Our intellectual property).
Do I need to know code?
No. Ask the assistant for changes in plain words; the full source is there when you want it.
Does it come with a backend?
No. A full app names the backend it needs and you connect your own under Server; a design runs on sample data.
Can I change the design?
Yes. The Design tab sets the brand colour, colours, fonts and corners at no credit cost; the assistant changes the rest.
Which plan do I need to publish?
Creator or higher builds and uploads to the stores, with your own Apple and Google accounts. A Premium template’s app builds on any plan once its website is connected.
Can I download the source?
Yes, with Download source or Push to GitHub, once your workspace has bought a plan, credits or a paid template. A Premium template’s app also needs its website connected.
What if it was made with an earlier FluxNative?
Your copy works as it is. Ask the assistant to update it for newer features such as app languages and currencies; it is the last setup step.
Ready to make it yours?
Start from Storyloom AI Bedtime Story App and change anything by chat. Your copy comes with the full source.
Free to copy. No credit card required.