Editing Exported Code

Who is this page for? Engineers picking up a codebase Appsanic generated. If you've never written code, you don't need this - every doc in the sidebar gets you further without leaving Appsanic. Skip ahead.

After a few sessions in Appsanic, most engineers want to make some changes directly. Maybe a design tweak the agent didn't nail. A library the agent doesn't know. A handoff to another developer.

This page covers the conventions so your edits and the agent's edits don't fight each other.

The stack

• Expo (SDK 54+) + React Native + TypeScript.
• React Navigation v7 for navigation (@react-navigation/native + native-stack / bottom-tabs). There is no Expo Router - navigation is wired by hand in App.tsx.
• StyleSheet.create for styling, with every visual value centralised in theme.ts. There is no NativeWind / Tailwind.
• Zustand for cross-screen state; useState / useReducer for local state.
• @expo/vector-icons (Ionicons or MaterialIcons) for icons.

Nothing exotic - a React Native developer is productive immediately.

The codebase at a glance

A typical export:

your-app/
├── App.tsx              # Entry point: NavigationContainer + Stack/Tab navigator
├── screens/             # One default-exported screen per file (e.g. HomeScreen.tsx)
├── components/          # Shared UI components
├── stores/              # Zustand stores, one per concern (<name>-store.ts)
├── theme.ts             # Design tokens - colors, spacing, type, radii, shadows
├── types.ts             # Shared TypeScript types
├── app.json             # Expo config
├── package.json
├── tsconfig.json
├── babel.config.js      # Standard Expo preset (added automatically)
├── .gitignore           # (added automatically)
└── README.md            # Run instructions (added automatically)

App.tsx is always the entry and default-exports the root component. The agent respects this layout; your edits should too - diverging from the conventions makes the agent's reads less effective on the next pass.

Where are my images? Uploaded account and brand assets are included under assets/appsanic/ and referenced with local require(...) paths. ZIP exports and GitHub pushes materialize the authorized bytes, so the checkout is self-contained. If a generated README.md reports a legacy remote Storage URL, regenerate that asset reference before distributing the app.

Conventions

TypeScript everywhere

Every component, store, and helper is TypeScript. No any unless explicitly annotated for dynamic data bags.

Functional components with hooks

No class components. Local state in useState / useReducer; cross-screen state in a Zustand store.

Zustand for shared state

One store file per concern in stores/<name>-store.ts:

import { create } from "zustand";

interface CommentsState {
  comments: Comment[];
  fetchForPost: (id: string) => Promise<void>;
}

export const useCommentsStore = create<CommentsState>((set) => ({
  comments: [],
  fetchForPost: async (id) => {
    const { data } = await supabase.from("comments").select("*").eq("post_id", id);
    set({ comments: data ?? [] });
  },
}));

Subscribers should use narrow selectors so they only re-render on the slice they use.

Styling via StyleSheet + theme.ts

The agent uses StyleSheet.create and pulls every colour, spacing, font size, and radius from theme.ts - never inline hex or magic numbers:

import { StyleSheet, View, Text } from "react-native";
import { theme } from "../theme";

function Header() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: theme.colors.bg, paddingHorizontal: theme.space.lg },
  title: { fontSize: theme.type.h1, fontWeight: "600", color: theme.colors.heading },
});

If you add new visual values, add them to theme.ts and reference the token - same as the agent does.

Navigation in App.tsx

App.tsx holds the NavigationContainer wrapping a createNativeStackNavigator() or createBottomTabNavigator(). Param lists are typed (type RootStackParamList = { Home: undefined; Details: { id: string } }) and screens call useNavigation<NativeStackNavigationProp<RootStackParamList>>().

Backend & keys

If the app talks to Supabase (or another connected service), it uses that service's client SDK configured with the publishable key embedded directly in the source - that's the key class designed to live in client code. Secret keys are never written into the app; they stay encrypted in Appsanic. There is no .env file in a generated project, and no local supabase/migrations folder - schema changes are applied through Appsanic's connector tools, not a local migration runner.

Keeping Appsanic and local edits in sync (GitHub)

If you've connected GitHub (the GitHub button on the build page), Appsanic can create a repo and sync both ways:

• Push snapshots your current project to the repo as a single commit (Git Data API: one tree + one commit on the default branch). Files you deleted in Appsanic disappear from the repo.
• Pull reads the repo's latest text files and replaces your project's working copy.

A simple rule: push before you edit locally, pull before you edit in Appsanic.

1. In Appsanic, open GitHub → Push to get your latest into the repo.
2. git clone (or git pull) locally, edit, commit, and git push.
3. Back in Appsanic, open GitHub → Pull to bring your local edits in.

Avoid editing the same file in both places at once - pull/push is a whole-snapshot replace, not a line-level merge.

Editing patterns

• Small copy / style tweaks - faster in Appsanic; a one-line label change doesn't need a clone and PR.
• Medium feature work - either way. Comfortable in React? Locally is faster. Not? Appsanic is safer.
• Cross-cutting refactors - the agent is strong here. "Rename this store everywhere and update the types" is Pro-model work.
• Deeply custom components - if the agent keeps producing a component you keep rewriting, build it once in components/ and reference it by name in future prompts.

Handoff to a developer

Handing the project to another engineer:

1. Connect GitHub and Push, then add them as a collaborator on the repo (or just send them the exported zip).
2. They git clone / unzip, run npm install, then npx expo start.
3. They scan the QR code with Expo Go, or press i / a for a simulator.

A senior mobile engineer should orient themselves in under an hour - it's conventional React Native + Expo + TypeScript.

What the agent won't touch

• node_modules/ - managed by npm.
• ios/ and android/ (if you've run expo prebuild) - the agent prefers app.json config over hand-edited native code, and can't read native code you add by hand.

Next

Read Plans and Billing to understand what you're paying for as the project grows.