# Project export: Stepli

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: OpenAI Build Week
- Tagline: Your personal AI guide for navigating technology with confidence.
- Devpost: https://devpost.com/software/stepli
- GitHub: https://github.com/rababzahra8/Stepli
- Video: https://www.youtube.com/embed/2E9fV_PpAh4?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 1 GitHub contributor(s) — rababzahra8 (14 commits)

## Devpost submission (written by the team)

### Overview

🌱

### Inspiration

Stepli started with my mother. I saw how easily everyday phone tasks can become frustrating when an app feels unfamiliar. My mother, like many older adults, sometimes needs help ordering food, booking a ride via Uber, sending a WhatsApp message, posting on Instagram, or finding a video on YouTube. The problem isn't intelligence. It's digital confidence. I wanted to build something that feels like a patient person sitting beside her. Something calm, clear, bilingual, and never in a hurry. Stepli explains one step at a time so people can learn how to complete tasks on their own instead of relying on someone else for every small thing. Why this matters in Pakistan Stepli is especially meaningful to me because digital access, literacy, language, and confidence are not the same for everyone in Pakistan. Pakistan's 2024 to 2025 Household Integrated Economic Survey reports a 63% literacy rate for people aged 10 and above. The gap is still significant. Literacy is 73% for men and 54% for women, while urban literacy is 74% compared with 55% in rural areas. Provincial rates also vary, ranging from 68% in Punjab to 49% in Balochistan. Source: Pakistan Bureau of Statistics, HIES 2024–25 Digital access is also uneven. The same survey reports that only 50% of people own a mobile phone. Ownership is 69% for men and 39% for women, with another gap between urban (58%) and rural (44%) communities. Internet usage is also lower in rural areas at 49%, compared with 69% in urban areas. Source: Pakistan Bureau of Statistics, HIES Not everyone is comfortable using English language apps, unfamiliar icons, or complicated digital flows. Stepli is my attempt to make everyday technology easier to understand with simple Urdu and English guidance, voice support, and calm step by step instructions. ✨

### What it does

Stepli is a bilingual Android accessibility companion that helps people complete unfamiliar tasks in other apps, one calm step at a time. It is not limited to Foodpanda. Ordering food is just one guide. Stepli is built to support as many guides as needed across different apps and everyday tasks. Stepli also lets users create their own guides for other apps and tasks. They can record step by step instructions, add descriptions, then publish those guides so other Stepli users can discover and use them. The current built in guides include: Ordering food with Foodpanda Posting a photo on Instagram Sharing an Instagram Story Sending a WhatsApp message Searching for a video on YouTube When a guide starts, Stepli opens the selected app and shows a soft, movable instruction card on top of it. It explains the current step and highlights the next likely button or field whenever it finds it. The user always stays in control. Stepli never taps, types, scrolls, sends messages, chooses payment methods, or places orders. If voice guidance is enabled, users can press Read this step to hear the instruction again. The instruction card can be moved, minimized into a small floating bubble, or closed whenever the user wants. Every step can be confirmed manually if an app screen looks different. Users can choose either English or Urdu. I intentionally kept the interface gentle and easy to understand, with large readable text, friendly colors, clear buttons, and a small Stepli mascot so it feels supportive instead of technical. 🛠️ How I built it I built Stepli using React Native, TypeScript, Kotlin, and Android accessibility tools. React Native powers the main app experience, including onboarding, language selection, permission education, settings, guide browsing, voice tours, guide creation, and completion screens. I designed the interface to feel calm and beginner friendly, with separate English and Urdu content throughout the app. The guide system is completely data driven. Every guide contains an ordered list of steps with: Instruction text Confirmation text Optional voice narration Lightweight matchers for visible labels, content descriptions, or resource IDs The Android package name of the selected app Because of this structure, I can add new guides without changing or rebuilding the core application. On the Android side, I built a Kotlin AccessibilityService that watches only the app selected by the active guide. When it finds the expected control, it draws a visual highlight around it. I also created a native floating overlay using Android's WindowManager, allowing Stepli to stay visible while users interact with another app. I added English and Urdu text to speech support, including guidance for devices where Urdu voice data is not installed. I also built the foundation for user created guides so Stepli can continue growing into a larger library of helpful walkthroughs. Codex helped me throughout development by refining the user flow, connecting React Native with Kotlin, structuring the guide system, and improving the accessibility and privacy experience. I worked with Codex across multiple chats, using it like a team of specialists to solve different parts of the project instead of keeping everything in a single conversation. ⚡ Challenges I ran into One of the biggest challenges was creating guidance without taking control away from the user. For sensitive tasks involving payments, addresses, messages, and orders, I never wanted Stepli to perform actions on someone's behalf. Instead, I designed it as a teaching and support tool rather than an automation tool. Another challenge was building an overlay that stays above another app without blocking user interaction. I solved this by separating the instruction card from the highlight layer. The highlight layer does not receive touch events, so users can continue interacting naturally with the app underneath. Apps also change depending on the country, app version, promotions, and individual user accounts. For example, Foodpanda may display different location or promotion screens. To handle this, I added multiple possible UI matchers along with manual confirmation buttons for every step. Supporting Urdu involved much more than translating text. I had to think about readability, natural wording, right to left layouts, and Android text to speech support. Some devices, especially those using Samsung Text to Speech, do not include an Urdu voice by default, so I added guidance for switching to Google Text to Speech. My original vision was an LLM powered screen analyzer and assistant that could understand any app screen dynamically. Unfortunately, I could not continue with the LLM or agent based approach because I did not have access to the required OpenAI API keys and runtime support. Instead of giving up on the idea, I built the current manual, data driven guide system. It already provides reliable bilingual step by step guidance for real everyday tasks. The GPT 5.6 powered version is still something I want to build in the future, but it is not part of this submission. The submitted app does not use GPT 5.6 or any other runtime LLM. 🏆 Accomplishments I'm proud of I'm proud that Stepli became more than just an idea. It is a working Android accessibility experience built to help people with real everyday tasks. Some of the things I'm most proud of are: Building a complete bilingual English and Urdu experience. Creating guides for multiple apps instead of only Foodpanda. Designing a data driven system that can easily grow with new apps and workflows. Building a native Android overlay that stays visible above other apps. Creating a visual highlighting system without blocking user interaction. Adding voice guidance along with a Read this step replay feature. Keeping Stepli privacy conscious and read only. Designing a gentle interface for people with low digital confidence. Making sure users stay in control of every important decision. More than anything else, I'm proud that I built something that could genuinely help my mother, and people like her, feel more confident and independent while using technology. How Codex helped I was already familiar with React Native, but Kotlin and Android Accessibility Services were new to me. Codex helped me understand and work with these areas while building Stepli, including the accessibility service, floating overlay, permission flow, and touch-through visual highlights. It also supported me with the bilingual English and Urdu experience, Supabase community-guide flow, Android troubleshooting, and making the app easier for beginners to use. 📚 What I learned This project taught me that accessibility is about much more than making a feature work. It is also about confidence, trust, dignity, language, and giving people enough time to understand what they are doing. I learned how to connect a React Native app with Kotlin based Android code, build an AccessibilityService, manage Android overlays with WindowManager, create non blocking visual highlights, and send native accessibility events back to the React Native interface. I also learned that multilingual accessibility requires thoughtful design. Simply translating text is not enough. Instructions need to sound natural, reassuring, short, and easy to understand in the user's preferred language. Most importantly, I learned that helping someone does not always mean doing the task for them. Sometimes the best support is simply giving them the confidence and guidance to do it themselves. 🚀

### What's next

Stepli is designed to keep growing. I plan to add more guides for everyday tasks, including: Booking rides Paying utility bills Shopping online Booking hospital appointments Using government service apps Learning more social media actions I also want to improve Urdu voice support, add more languages, test the app with more older adults, and make the interface even more accessible for people with low vision or limited digital confidence. In the future, once I have the right API access, privacy safeguards, and clear user consent, I want to revisit my original idea of building an LLM-powered screen understanding agent that can understand what's on a user's screen and provide contextual assistance. That would allow Stepli to adapt to changing app screens and guide users through an even wider range of apps while always keeping the user in control.

## README (from the GitHub repository)

# Stepli

> A gentle, bilingual Android guide that helps people complete a task in an unfamiliar app—one tap at a time, while they remain in control.

**Suggested submission category:** Accessibility & Inclusion (or the closest matching category in the challenge form).

Stepli is an Android accessibility companion designed for people who feel less confident using everyday digital services. It includes bilingual guides for Foodpanda, Instagram, WhatsApp, and YouTube, and its data-driven guide model can support many more apps and tasks. Rather than taking over a task, Stepli opens the chosen app, displays a small movable instruction card over it, highlights the next relevant control when it can find it, and lets the person confirm each step themselves. People can also create reusable guides for other installed apps.

## Built with Codex and GPT-5.6

I used Codex and GPT-5.6 as development collaborators while building Stepli. They helped me move from my React Native experience into unfamiliar Kotlin and Android Accessibility Service work, refine the permission and overlay flow, connect native Android features to the TypeScript app, structure the guide and Supabase flows, and troubleshoot the real-device build.

Codex and GPT-5.6 supported the development process; they are **not runtime features of the submitted app**. Stepli's current guidance remains curated and data-driven, with no runtime LLM or API calls.

## The idea

Many apps assume that everyone is comfortable with search, checkout, addresses, delivery options, and payment screens. Stepli turns a potentially intimidating flow into calm, plain-language guidance. The user chooses a language, grants only the permissions required for visual guidance, then follows a short sequence of instructions at their own pace.

Foodpanda ordering is one practical use case: its guide covers location setup, search, selecting a restaurant and dish, cart review, address, delivery, payment, and final order review. The current guide library also includes Instagram posting and Stories, WhatsApp messaging, and YouTube search.

## Setup and run

```sh
git clone <your-repository-url>
cd Stepli
npm ci
```

Start Metro in one terminal:

```sh
npm start
```

In a second terminal, with an Android device connected or an emulator running:

```sh
npm run android
```

### First-run permissions

1. In Stepli, tap **Allow overlay** and enable **Display over other apps** for Stepli.
2. Tap **Open accessibility settings**. If Android blocks Stepli screen guidance because the APK was installed outside Google Play, open **Settings** → **Apps** → **Stepli** → **three dots** → **Allow restricted settings**, then return to Accessibility settings.
3. Choose **Stepli screen guidance** and enable it.
4. Return to Stepli; both permission indicators should show a check mark.
5. Select a language, finish onboarding, and tap **Order food with Foodpanda**.

The accessibility service is read-only: Stepli does not tap, type, scroll, or submit anything on the user's behalf.

When a guide is active, drag the guidance card using its **⠿** handle if it covers the screen. Tap **×** to hide the card while keeping the Stepli bubble available; tap the bubble again to reopen it.

### Debug APK security check

When installing a locally built debug APK on a physical phone, Google Play Protect may ask to scan the app or show a warning because it was not installed from the Play Store. Prefer scanning the app first. If it blocks your own test build, temporarily turn off scanning on that test device:

1. Open the **Google Play Store**.
2. Tap your profile picture, then **Play Protect** → **Settings**.
3. Turn off **Scan apps with Play Protect**.
4. Install the debug APK, then turn scanning back on immediately afterwards.

This is only for local development testing. Keep Play Protect enabled for normal use and for any app you did not build yourself. [Google's Play Protect instructions](https://support.google.com/accounts/answer/9924802) explain the same setting.

### Debug APK versus release APK

An `app-release.apk` runs on its own after installation. An `app-debug.apk` is for development and needs Metro running on the development computer. If a debug APK shows **Unable to load script**, connect the phone by USB and run:

```sh
npm start
adb reverse tcp:8081 tcp:8081
```

Then reopen Stepli on the phone.

### The story behind Stepli

I built Stepli after seeing my mother, and other older family members, ask younger relatives to order food, book a ride, send a message, or complete other everyday phone tasks. The need is not about intelligence; it is about digital confidence. Stepli is intended to make those moments less dependent on a nearby family member and help people complete the next task independently.

### Version 1: the original LLM idea - planned for the future

The first version of the idea was an LLM-powered screen analyser and assistant. It would understand the current app screen and generate context-aware, conversational guidance instead of relying on a fixed sequence of instructions.

I could not continue with the LLM-powered or agent-based version because I did not have access to the required OpenAI API keys. Rather than give up on Stepli, I built the current manual, data-driven guide system instead. The GPT-5.6-powered idea is still in progress, but it is **not included in this submission**: the submitted app does not call GPT-5.6 or any other runtime LLM. I plan to return to it later with suitable API access, privacy safeguards, and user consent.

### The submitted build

The `master` branch contains the submitted implementation: curated, data-driven bilingual guides, supported by Android accessibility hints and a floating guidance card. It currently includes Foodpanda, Instagram, WhatsApp, and YouTube workflows, and it can be extended with as many additional guides as needed.

The current version gives people calm, one-step-at-a-time guidance, optional highlights, and manual control for real tasks today. Its guide model is data-driven, so I can add more apps and workflows without changing the core guidance experience.

### Future direction

With appropriate production API access, privacy safeguards, and user consent, Stepli can return to its original dynamic screen-understanding approach. That would make it possible to guide people through more services - including booking rides, shopping and paying bills, government services, and hospital appointments - without writing a completely separate fixed flow for every screen. Future expansion also includes more languages, trusted family/community-created guides, and support for additional everyday apps.

### What Stepli does—and does not do

- Guides the user in English or Urdu.
- Opens a tutorial's selected app and shows a movable, non-blocking instruction card above it.
- Reads only the selected app's accessibility tree while a guide is active, to locate the next suggested UI element and draw a highlight ring around it.
- Narrates each instruction on Android when Voice guidance is enabled, with a replay button.
- Lets a person close the navigator completely at any time; this removes the card, bubble, highlight, active guide, and speech.
- Lets the user manually confirm a step when Foodpanda's interface differs from the expected screen.
- Never taps, types, selects a payment method, or places an order for the user.
- Does not store screenshots, typed text, coordinates, or accessibility-tree dumps.

## How it works

1. The user selects English or Urdu and completes Stepli's short onboarding.
2. The app asks for Android's **Display over other apps** permission so its guidance card can appear above another app.
3. The user enables the **Stepli screen guidance** accessibility service. The service observes only the package selected by the currently active tutorial.
4. Selecting **Order food with Foodpanda** launches Foodpanda and starts the built-in, data-driven tutorial.
5. Stepli observes the allowed a

[README truncated for size]

## Detected evidence (automated analysis)

Indexed codebase: 64 recognized source files, 221 KB.
- JavaScript (language) — detected in the code
- Kotlin (language) — detected in the code
- React (technology) — detected in the code
- SQL (language) — detected in the code
- Swift (language) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (93 of 93)

```
__tests__/App.test.tsx
__tests__/foodpandaSteps.test.ts
__tests__/TutorialRepository.test.ts
.bundle/config
.env.example
.eslintrc.js
.gitignore
.prettierrc.js
.watchmanconfig
android/app/build.gradle
android/app/debug.keystore
android/app/proguard-rules.pro
android/app/src/main/AndroidManifest.xml
android/app/src/main/java/com/stepli/app/GuidanceSpeaker.kt
android/app/src/main/java/com/stepli/app/HighlightRingView.kt
android/app/src/main/java/com/stepli/app/MainActivity.kt
android/app/src/main/java/com/stepli/app/MainApplication.kt
android/app/src/main/java/com/stepli/app/OverlayStep.kt
android/app/src/main/java/com/stepli/app/SecureSessionStore.kt
android/app/src/main/java/com/stepli/app/StepliAccessibilityService.kt
android/app/src/main/java/com/stepli/app/StepliOverlayModule.kt
android/app/src/main/java/com/stepli/app/StepliOverlayPackage.kt
android/app/src/main/java/com/stepli/app/StepliOverlayService.kt
android/app/src/main/java/com/stepli/app/TtsVoiceHelper.kt
android/app/src/main/res/drawable/ic_launcher_foreground.xml
android/app/src/main/res/drawable/launch_screen.xml
android/app/src/main/res/drawable/rn_edit_text_material.xml
android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
android/app/src/main/res/values/colors.xml
android/app/src/main/res/values/strings.xml
android/app/src/main/res/values/styles.xml
android/app/src/main/res/xml/accessibility_service_config.xml
android/build.gradle
android/com.stepli.app@0.0.1
android/gradle.properties
android/gradle/wrapper/gradle-wrapper.properties
android/gradlew
android/gradlew.bat
android/react-native
android/settings.gradle
android/Task
app.json
App.tsx
babel.config.js
Gemfile
index.js
ios/.xcode.env
ios/Podfile
ios/Stepli.xcodeproj/project.pbxproj
ios/Stepli.xcodeproj/xcshareddata/xcschemes/Stepli.xcscheme
ios/Stepli/AppDelegate.swift
ios/Stepli/Images.xcassets/AppIcon.appiconset/Contents.json
ios/Stepli/Images.xcassets/Contents.json
ios/Stepli/Info.plist
ios/Stepli/LaunchScreen.storyboard
ios/Stepli/PrivacyInfo.xcprivacy
jest.config.js
metro.config.js
package.json
react-native.config.js
README.md
src/components/ui.tsx
src/data/builtInGuides.ts
src/data/foodpandaSteps.ts
src/data/stepliTour.ts
src/hooks/useGuideRunner.ts
src/models/tutorial.ts
src/native/StepliOverlay.ts
src/screens/AccountScreen.tsx
src/screens/BuiltInGuidesScreen.tsx
src/screens/CelebrationScreen.tsx
src/screens/GuideEditorScreen.tsx
src/screens/GuidesScreen.tsx
src/screens/HomeScreen.tsx
src/screens/index.ts
src/screens/LanguageScreen.tsx
src/screens/OnboardingScreen.tsx
src/screens/PermissionsScreen.tsx
src/screens/SettingsScreen.tsx
src/screens/VoiceTourScreen.tsx
src/services/TutorialRepository.ts
src/strings/en.ts
src/strings/ur.ts
src/theme/colors.ts
src/theme/styles.ts
src/types/app.ts
src/utils/authErrors.ts
src/utils/copy.ts
src/utils/urduVoice.ts
supabase/migrations/202607200001_user_tutorials.sql
supabase/migrations/202607200002_require_authenticated_community_reads.sql
tsconfig.json
```

### Dependencies

- package.json: @babel/core@^7.25.2, @babel/preset-env@^7.25.3, @babel/runtime@^7.25.0, @react-native-community/cli@20.1.0, @react-native-community/cli-platform-android@20.1.0, @react-native-community/cli-platform-ios@20.1.0, @react-native-google-signin/google-signin@^16.1.2, @react-native/babel-preset@0.86.0, @react-native/eslint-config@0.86.0, @react-native/jest-preset@^0.86.0, @react-native/metro-config@0.86.0, @react-native/new-app-screen@0.86.0, @react-native/typescript-config@0.86.0, @react-navigation/native@^7.3.8, @react-navigation/native-stack@^7.17.10, @types/jest@^29.5.13, @types/react@^19.2.0, @types/react-test-renderer@^19.1.0, eslint@^8.19.0, jest@^29.6.3, prettier@2.8.8, react@19.2.3, react-native@0.86.0, react-native-gesture-handler@^3.0.2, react-native-safe-area-context@^5.5.2, react-native-screens@^4.26.1, react-test-renderer@19.2.3, typescript@^5.8.3

### Recent commits (newest first)

- Readme updated
- Logout button added
- Ui issued fixed
- Fix permission issues
- README updated
- README, and other bugs fixed
- Fixed UI, Add some new guids
- Fixed UI screens
- Optimize code approach
- Sign in with google fixed
- Sign-in with google and more steps added
- Logo fixed in related screens, app icon etc
- Phase 0: Prototype with hardcoded dialogs
- Initial commit

## Key source files (fetched from GitHub, selected and truncated for size)

### Gemfile

```
source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby ">= 2.6.10"

# Exclude problematic versions of cocoapods and activesupport that causes build failures.
gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
gem 'xcodeproj', '< 1.26.0'
gem 'concurrent-ruby', '< 1.3.4'

# Ruby 3.4.0 has removed some libraries from the standard library.
gem 'bigdecimal'
gem 'logger'
gem 'benchmark'
gem 'mutex_m'
gem 'nkf'

```

### package.json

```
{
  "name": "com.stepli.app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-google-signin/google-signin": "^16.1.2",
    "@react-native/new-app-screen": "0.86.0",
    "@react-navigation/native": "^7.3.8",
    "@react-navigation/native-stack": "^7.17.10",
    "react": "19.2.3",
    "react-native": "0.86.0",
    "react-native-gesture-handler": "^3.0.2",
    "react-native-safe-area-context": "^5.5.2",
    "react-native-screens": "^4.26.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "20.1.0",
    "@react-native-community/cli-platform-android": "20.1.0",
    "@react-native-community/cli-platform-ios": "20.1.0",
    "@react-native/babel-preset": "0.86.0",
    "@react-native/eslint-config": "0.86.0",
    "@react-native/jest-preset": "^0.86.0",
    "@react-native/metro-config": "0.86.0",
    "@react-native/typescript-config": "0.86.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.2.0",
    "@types/react-test-renderer": "^19.1.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.2.3",
    "typescript": "^5.8.3"
  },
  "engines": {
    "node": ">= 22.11.0"
  }
}

```

### index.js

```javascript
/**
 * @format
 */

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

```

### App.tsx

```typescript
import React, {useEffect, useState} from 'react';
import {ActivityIndicator, Text, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {
  AccountScreen,
  BuiltInGuidesScreen,
  CelebrationScreen,
  GuideEditorScreen,
  GuidesScreen,
  HomeScreen,
  LanguageScreen,
  OnboardingScreen,
  PermissionsScreen,
  SettingsScreen,
  VoiceTourScreen,
} from './src/screens';
import {AuthSession, tutorialRepository} from './src/services/TutorialRepository';
import {StepliOverlay} from './src/native/StepliOverlay';
import {C} from './src/theme/colors';
import {styles} from './src/theme/styles';
import {Language, RootStack} from './src/types/app';
import {confirmUrduSelection} from './src/utils/urduVoice';

const Stack = createNativeStackNavigator<RootStack>();

export default function App() {
  const [language, setLanguageState] = useState<Language | null>(null);
  const [onboardingComplete, setOnboardingComplete] = useState(false);
  const [session, setSession] = useState<AuthSession | null>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => tutorialRepository.subscribeSession(next => setSession(next)), []);
  useEffect(() => {
    Promise.all([
      StepliOverlay.getLanguage(),
      StepliOverlay.getOnboardingComplete(),
      tutorialRepository.restoreSession().catch(() => null),
    ])
      .then(([savedLanguage, complete, restoredSession]) => {
        setLanguageState(savedLanguage);
        setOnboardingComplete(complete);
        setSession(restoredSession);
        setLoaded(true);
      })
      .catch(() => setLoaded(true));
  }, []);

  const setLanguage = async (value: Language) => {
    if (value === language) {
      return;
    }
    if (value === 'ur' && !(await confirmUrduSelection())) {
      return;
    }
    await StepliOverlay.setLanguage(value);
    setLanguageState(value);
  };
  const completeOnboarding = async () => {
    await StepliOverlay.setOnboardingComplete();
    setOnboardingComplete(true);
  };

  if (!loaded) {
    return (
      <SafeAreaView style={styles.safe}>
        <View style={styles.boot}>
          <ActivityIndicator size="large" color={C.sage} />
          <Text style={styles.loaderLabel}>Loading Stepli…</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (!language) {
    return <LanguageScreen onChoose={setLanguage} />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={onboardingComplete ? 'Home' : 'Permissions'} screenOptions={{headerShown: false, animation: 'fade'}}>
        <Stack.Screen name="Permissions">
          {props => <PermissionsScreen {...props} language={language} setLanguage={setLanguage} />}
        </Stack.Screen>
        <Stack.Screen name="Onboarding">
          {props => (
            <OnboardingScreen
              {...props}
              language={language}
              setLanguage={setLanguage}
              completeOnboarding={completeOnboarding}
            />
          )}
        </Stack.Screen>
        <Stack.Screen name="Home">
          {props => <HomeScreen {...props} language={language} setLanguage={setLanguage} session={session} />}
        </Stack.Screen>
        <Stack.Screen name="Settings">
          {props => <SettingsScreen {...props} language={language} setLanguage={setLanguage} session={session} />}
        </Stack.Screen>
        <Stack.Screen name="Account">
          {props => <AccountScreen {...props} language={language} setLanguage={setLanguage} session={session} setSession={setSession} />}
        </Stack.Screen>
        <Stack.Screen name="Guides">
          {props => <GuidesScreen {...props} language={language} setLanguage={setLanguage} session={session} />}
        </Stack.Screen>
        <Stack.Screen name="BuiltInGuides">
          {props => <BuiltInGuidesScreen {...props} language={language} setLanguage={setLanguage} />}
        </Stack.Screen>
        <Stack.Screen name="VoiceTour">
          {props => <VoiceTourScreen {...props} language={language} setLanguage={setLanguage} />}
        </Stack.Screen>
        <Stack.Screen name="GuideEditor">
          {props => <GuideEditorScreen {...props} language={language} setLanguage={setLanguage} />}
        </Stack.Screen>
        <Stack.Screen name="Celebration">
          {props => <CelebrationScreen {...props} language={language} setLanguage={setLanguage} />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

```

### src/types/app.ts

```typescript
import {TutorialGuide} from '../models/tutorial';

export type Language = 'en' | 'ur';

export type RootStack = {
  Language: undefined;
  Permissions: undefined;
  Onboarding: {page: number};
  Home: undefined;
  Settings: undefined;
  Account: undefined;
  Guides: {initialTab?: 'mine' | 'community' | 'all'} | undefined;
  BuiltInGuides: undefined;
  VoiceTour: undefined;
  GuideEditor: undefined;
  Celebration: {title?: string} | undefined;
};

export type ActiveTutorial = {guide: TutorialGuide; index: number};

```

### src/screens/index.ts

```typescript
export {LanguageScreen} from './LanguageScreen';
export {PermissionsScreen} from './PermissionsScreen';
export {OnboardingScreen} from './OnboardingScreen';
export {HomeScreen} from './HomeScreen';
export {AccountScreen} from './AccountScreen';
export {GuidesScreen} from './GuidesScreen';
export {BuiltInGuidesScreen} from './BuiltInGuidesScreen';
export {VoiceTourScreen} from './VoiceTourScreen';
export {GuideEditorScreen} from './GuideEditorScreen';
export {SettingsScreen} from './SettingsScreen';
export {CelebrationScreen} from './CelebrationScreen';

```

### .eslintrc.js

```javascript
module.exports = {
  root: true,
  extends: '@react-native',
};

```

### babel.config.js

```javascript
module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

```

### react-native.config.js

```javascript
module.exports = {
  assets: ['./android/app/src/main/assets/fonts'],
};

```

### .prettierrc.js

```javascript
module.exports = {
  arrowParens: 'avoid',
  singleQuote: true,
  trailingComma: 'all',
};

```

[55 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]