Build Your First Complete App

Let's architect a complete cross-platform app: login screen, bottom tabs (Home + Profile), API-driven article list, pull-to-refresh, and persisted auth token. This ties together every concept in the course.

Project: Rishtaara Reader app

App architecture

App structure

Root App.tsx with auth gate

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </AuthProvider>
  );
}

function RootNavigator() {
  const { user, loading } = useAuth();
  if (loading) return <SplashScreen />;
  return user ? <MainTabs /> : <AuthStack />;
}

HomeScreen — FlatList + API

export function HomeScreen() {
  const { data, loading, error, refresh } = useArticles();

  if (loading) return <ActivityIndicator size="large" />;
  if (error) return <ErrorView message={error} onRetry={refresh} />;

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <ArticleCard
          title={item.title}
          excerpt={item.excerpt}
          onPress={() => navigation.navigate("Article", { id: item.id })}
        />
      )}
      refreshControl={<RefreshControl refreshing={loading} onRefresh={refresh} />}
    />
  );
}

Checklist before calling it done

Works on both iOS Simulator and Android Emulator.
Loading, empty, and error states handled on every API screen.
Keyboard does not cover login form inputs.
Back navigation works correctly from detail screens.
Token persists — app reopens logged in after kill.