With a working curl call from chapter 3 under your belt, let's now set up the actual React Native project – with Expo, the same tool used in "React Native for Beginners".

Creating the project

npx create-expo-app@latest magento-produkt-explorer-app
cd magento-produkt-explorer-app
npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

We install @react-navigation/native-stack right away, since from chapter 9 on we navigate between the product list and the detail screen – the same library "React Native for Beginners" uses. npx expo install instead of npm install ensures mutually compatible versions matching your Expo SDK version get installed.

Cleaning up App.js

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>magento-produkt-explorer-app</Text>
    </View>
  );
}

npx expo start
# Scan the QR code with the Expo Go app, or press 'i'/'a' for a simulator

A preview of the target structure

magento-produkt-explorer-app/
├── .env
├── .env.example
├── .gitignore
├── App.js
├── api/
│   └── magentoApi.js
├── components/
│   ├── ProductCard.js
│   ├── Pagination.js
│   └── SearchBar.js
└── screens/
    ├── ProductListScreen.js
    └── ProductDetailScreen.js