BookNest is the small bookshop app that Framework7 built with Framework7 572,986 . Here you rebuild it as a native app with the same six sample books, so you can compare the two versions screen by screen. It has four screens:
| Screen | What it does | Main building blocks | Built in |
|---|---|---|---|
| Catalog | Scrollable list, search, genre filter | FlatList, Image, TextInput | 3.8.13, 3.17.13 |
| Book detail | Cover, summary, price, Add to cart | ScrollView, Pressable, Animated | 3.5.8, 3.10.10 |
| Reading notes | A private note per book, saved on device | TextInput, KeyboardAvoidingView | 3.4.16, 3.20 |
| Cart | Quantities, swipe to remove, checkout form | Gesture Handler 6,788 , React Hook Form 351,018 , Zod 44,027 | 3.11.13, 3.18.7 |
Expo Router 6,418 connects the screens (BookNest Navigation): a tab bar for Catalog and Cart, with Book detail and Reading notes pushed onto a stack. Server data goes through TanStack Query 79,069 and the cart lives in a small Zustand 58,763 store, so only components that read the cart re-render when it changes. Each book record keeps Framework7's fields: id, title, author, genre, price, rating, pages, year, stock and a one-line summary.
Plan for the platform from the first screen. Keep business logic (cart totals, filtering, validation) in plain TypeScript modules with no React Native 36,878 imports, so Jest 62,362 can test it without an emulator (Testing React Native Apps). Expect the phone to go offline and the OS to kill your app in the background. And expect native code: sign-in, push notifications, maps and the camera all need native modules, which is why BookNest moves from Expo Go 6,418 to a development build early in Project Setup.