React Native mit Expo und Claude Code: Mobile Apps 2026

# Prompt: "Erstelle Expo TypeScript App mit Expo Router und NativeWind" npx create-expo-app@latest MyApp --template tabs cd MyApp && npx expo install nativewind tailwindcss // app.json — Expo-Konfiguration { "expo": { "name": "MyApp", "slug": "my-app", "version": "1.0.0", "platforms": ["ios", "android"], "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png" }, "plugins": [ "expo-router", "expo-camera", ["expo-notifications", { "color": "#6366f1" }] ] } } // Projektstruktur mit Expo Router app/ _layout.tsx // Root Layout (Stack/Tabs) (tabs)/ _layout.tsx // Tab-Navigation index.tsx // Home Tab (/) profile.tsx // Profil Tab (/profile) [id].tsx // Dynamische Route +not-found.tsx // 404

# Prompt: "Tab-Navigation mit Stack-Screens und Modal für Einstellungen" // app/(tabs)/_layout.tsx import { Tabs } from 'expo-router' import { Ionicons } from '@expo/vector-icons' export default function TabLayout() { return ( <Tabs screenOptions={{ tabBarActiveTintColor: '#6366f1' }}> <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} /> }} /> <Tabs.Screen name="profile" options={{ title: 'Profil', tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} /> }} /> </Tabs> ) } // Navigation zwischen Screens import { useRouter, useLocalSearchParams } from 'expo-router' const router = useRouter() router.push('/profile') router.push({ pathname: '/user/[id]', params: { id: '123' } }) router.replace('/login') // Kein Zurück router.back() // Parameter empfangen const { id } = useLocalSearchParams()

# Prompt: "Foto aufnehmen mit Expo Camera, Location abfragen, Push-Notification senden" // Kamera — Foto aufnehmen import { CameraView, useCameraPermissions } from 'expo-camera' export function CameraScreen() { const [permission, requestPermission] = useCameraPermissions() const cameraRef = useRef<CameraView>(null) if (!permission?.granted) return <Button onPress={requestPermission} title="Kamera erlauben" /> const takePhoto = async () => { const photo = await cameraRef.current?.takePictureAsync({ quality: 0.8 }) if (photo) uploadPhoto(photo.uri) } return <CameraView ref={cameraRef} style={{ flex: 1 }}> <TouchableOpacity onPress={takePhoto}><Text>📸</Text></TouchableOpacity> </CameraView> } // Push-Notifications import * as Notifications from 'expo-notifications' async function registerForPushNotifications() { const { status } = await Notifications.requestPermissionsAsync() if (status !== 'granted') return const token = await Notifications.getExpoPushTokenAsync({ projectId: process.env.EXPO_PUBLIC_PROJECT_ID }) return token.data // ExponentPushToken[xxx] — zum Server senden! } // SecureStore für sensible Daten import * as SecureStore from 'expo-secure-store' await SecureStore.setItemAsync('auth-token', token) // Verschlüsselt im Keychain const token = await SecureStore.getItemAsync('auth-token') // Niemals AsyncStorage für Secrets!

# Prompt: "EAS Build Setup für iOS + Android, OTA-Updates konfigurieren" npm install -g eas-cli eas login && eas build:configure // eas.json — Build-Profile { "build": { "development": { "developmentClient": true, "distribution": "internal" }, "preview": { "distribution": "internal", "android": { "buildType": "apk" } }, "production": { "autoIncrement": true } } } # Build starten eas build --platform android --profile production eas build --platform ios --profile production # OTA-Update: JS-Bundle ohne App-Store-Review pushen eas update --branch production --message "Fix Login-Bug" # → Users sehen Update beim nächsten App-Start # Gilt NUR für JS-Code — native Module = neuer Build nötig # App Store Submit eas submit --platform ios // TestFlight → App Store eas submit --platform android // Google Play Internal → Production