Scaffolding BookNest

BookNest's scaffold turns the blank template into the start of the catalog screen, using the same six books as Framework7. Three files join the template: src/data/booknest-data.json (the shared sample data), src/theme.js (colors, spacing and a formatPrice helper) and src/components/BookCard.js (one book's title, price, author, genre, rating and an "Out of stock" line). npx expo install react-native-safe-area-context 2,760 added the safe-area library, which keeps the header below the status bar now that apps draw edge to edge (edgeToEdgeEnabled=true) and replaces the deprecated core SafeAreaView. App.js puts them together:

App.js: BookNest's scaffoldJavaScript

import { StatusBar } from 'expo-status-bar';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import BookCard from './src/components/BookCard';
import data from './src/data/booknest-data.json';
import { colors, spacing } from './src/theme';
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.screen} edges={['top', 'left', 'right']}>
        <View style={styles.header}>
          <Text style={styles.brand}>{data.app}</Text>
          <Text style={styles.subtitle}>{data.books.length} books in the catalog</Text>
        </View>
        <ScrollView style={styles.body} contentContainerStyle={styles.list}>
          {data.books.map((book) => (
            <BookCard key={book.id} book={book} />
          ))}
          <Text style={styles.footer}>API: {apiUrl ?? 'not set'}</Text>
        </ScrollView>
        <StatusBar style="light" />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: colors.primary },
  body: { backgroundColor: colors.background },
  header: { backgroundColor: colors.primary, padding: spacing.md },
  brand: { fontSize: 26, fontWeight: '700', color: '#fff' },
  subtitle: { color: '#e3f2fd', marginTop: spacing.xs },
  list: { padding: spacing.md },
  footer: { textAlign: 'center', color: colors.muted, marginTop: spacing.sm },
});

Metro imports the JSON file directly, and the footer shows the inlined EXPO_PUBLIC_API_URL from Env and app.config. ScrollView with map is fine for six books; Catalog Screen replaces it with FlatList, which renders only the rows on screen.

BookNest's scaffold running as a development build; the gear is expo-dev-client's Tools button, which opens the dev menu on the right, connected to Metro on the host

The project is kept as the baseline for the rest of the chapter: prebuilt, with expo-dev-client, app.config.js, eas.json and .env in place and one Git 1,932 commit, BookNest scaffold (Section 3.2.16).

MENU