React Native App-Ontwikkeling Gids 2026: Productie-Apps Bouwen en Sollicitatievragen

# Create a new Expo project with SDK 56
npx create-expo-app@latest my-production-app
cd my-production-app

# Verify the New Architecture is enabled (default since RN 0.76)
npx expo config --type introspect | grep newArchEnabled

{
  "expo": {
    "name": "MyProductionApp",
    "slug": "my-production-app",
    "version": "1.0.0",
    "newArchEnabled": true, // Default in SDK 56
    "android": {
      "package": "com.company.myproductionapp",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "ios": {
      "bundleIdentifier": "com.company.myproductionapp",
      "supportsTablet": true
    },
    "plugins": [
      "expo-router"
    ]
  }
}

// Performance monitoring with Hermes V1
// HermesInternal is available globally when running on Hermes
declare global {
  var HermesInternal: {
    getRuntimeProperties: () => Record<string, unknown>;
    enableSamplingProfiler: () => void;
    disableSamplingProfiler: () => string;
  } | undefined;
}

export function checkHermesStatus(): boolean {
  const isHermes = typeof HermesInternal === 'object' && HermesInternal !== null;

  if (isHermes && __DEV__) {
    const props = HermesInternal.getRuntimeProperties();
    console.log('Hermes version:', props['OSS Release Version']);
    console.log('Bytecode version:', props['Bytecode Version']);
  }

  return isHermes;
}

{
  "cli": {
    "version": ">= 15.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "resourceClass": "m-medium"
      },
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "ios": {
        "resourceClass": "m-large"
      },
      "android": {
        "buildType": "app-bundle"
      },
      "env": {
        "EXPO_USE_PRECOMPILED_MODULES": "1"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

# Build for iOS App Store
eas build --platform ios --profile production

# Build for Google Play
eas build --platform android --profile production

# Submit to stores after build
eas submit --platform all

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import type { Product } from '@/types';

// Query key factory for type-safe cache management
export const productKeys = {
  all: ['products'] as const,
  lists: () => [...productKeys.all, 'list'] as const,
  list: (filters: ProductFilters) => [...productKeys.lists(), filters] as const,
  details: () => [...productKeys.all, 'detail'] as const,
  detail: (id: string) => [...productKeys.details(), id] as const,
};

export function useProducts(filters: ProductFilters) {
  return useQuery({
    queryKey: productKeys.list(filters),
    queryFn: () => api.products.list(filters),
    staleTime: 5 * 60 * 1000, // 5 minutes
    gcTime: 30 * 60 * 1000,   // 30 minutes (formerly cacheTime)
  });
}

export function useCreateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateProductInput) => api.products.create(data),
    onSuccess: () => {
      // Invalidate list queries to refetch
      queryClient.invalidateQueries({ queryKey: productKeys.lists() });
    },
  });
}

import * as SQLite from 'expo-sqlite';
import NetInfo from '@react-native-community/netinfo';

const db = SQLite.openDatabaseSync('app.db');

export async function initializeOfflineStorage() {
  await db.execAsync(`
    CREATE TABLE IF NOT EXISTS pending_mutations (
      id TEXT PRIMARY KEY,
      type TEXT NOT NULL,
      payload TEXT NOT NULL,
      created_at INTEGER NOT NULL
    );
  `);
}

export async function queueMutation(type: string, payload: object) {
  const id = crypto.randomUUID();
  await db.runAsync(
    'INSERT INTO pending_mutations (id, type, payload, created_at) VALUES (?, ?, ?, ?)',
    [id, type, JSON.stringify(payload), Date.now()]
  );
}

export async function syncPendingMutations() {
  const state = await NetInfo.fetch();
  if (!state.isConnected) return;

  const pending = await db.getAllAsync<PendingMutation>(
    'SELECT * FROM pending_mutations ORDER BY created_at ASC'
  );

  for (const mutation of pending) {
    try {
      await processMutation(mutation);
      await db.runAsync('DELETE FROM pending_mutations WHERE id = ?', [mutation.id]);
    } catch (error) {
      console.error('Sync failed for mutation:', mutation.id);
      break; // Stop on first failure to maintain order
    }
  }
}

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const SWIPE_THRESHOLD = 120;

export function SwipeableCard({ onSwipe, children }: SwipeableCardProps) {
  const translateX = useSharedValue(0);
  const opacity = useSharedValue(1);

  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
    })
    .onEnd((event) => {
      if (Math.abs(event.translationX) > SWIPE_THRESHOLD) {
        const direction = event.translationX > 0 ? 'right' : 'left';
        translateX.value = withTiming(
          direction === 'right' ? 500 : -500,
          { duration: 200 }
        );
        opacity.value = withTiming(0, { duration: 200 }, () => {
          onSwipe(direction);
        });
      } else {
        translateX.value = withSpring(0, {
          damping: 15,
          stiffness: 150,
        });
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      {
        rotate: `${interpolate(
          translateX.value,
          [-200, 0, 200],
          [-15, 0, 15],
          Extrapolation.CLAMP
        )}deg`,
      },
    ],
    opacity: opacity.value,
  }));

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={animatedStyle}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

// useCallback: memoizes a function reference
const handlePress = useCallback(() => {
  navigation.navigate('Detail', { id: item.id });
}, [item.id, navigation]);

// useMemo: memoizes a computed value
const sortedItems = useMemo(() => {
  return items.slice().sort((a, b) => a.price - b.price);
}, [items]);

// React.memo: memoizes a component's render output
const ProductCard = React.memo(function ProductCard({ product, onPress }: Props) {
  return (
    <Pressable onPress={onPress}>
      <Text>{product.name}</Text>
    </Pressable>
  );
});

{
  "expo": {
    "scheme": "myapp",
    "ios": {
      "associatedDomains": ["applinks:myapp.com"]
    },
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "myapp.com",
              "pathPrefix": "/product"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

import { useURL } from 'expo-linking';
import { useEffect } from 'react';
import { router } from 'expo-router';

export default function RootLayout() {
  const url = useURL();

  useEffect(() => {
    if (url) {
      const parsed = parseDeepLink(url);
      if (parsed.requiresAuth && !isAuthenticated) {
        // Store intended destination, redirect to login
        router.replace('/login');
      }
    }
  }, [url]);

  return <Slot />;
}