Phát triển ứng dụng React Native 2026: Hướng dẫn đầy đủ và câu hỏi phỏng vấn

import { TurboModuleRegistry, TurboModule } from 'react-native';

export interface Spec extends TurboModule {
  getUserProfile(userId: string): Promise<{
    id: string;
    name: string;
    email: string;
  }>;
  
  // Gọi đồng bộ - chỉ có thể với JSI
  getDeviceLocale(): string;
}

export default TurboModuleRegistry.getEnforcing<Spec>('UserModule');

import React, { memo, useCallback } from 'react';
import {
  View,
  Text,
  Image,
  Pressable,
  StyleSheet,
} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
  inStock: boolean;
}

interface ProductCardProps {
  product: Product;
  onPress: (id: string) => void;
}

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export const ProductCard = memo(function ProductCard({
  product,
  onPress,
}: ProductCardProps) {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const handlePressIn = useCallback(() => {
    scale.value = withSpring(0.95);
  }, [scale]);

  const handlePressOut = useCallback(() => {
    scale.value = withSpring(1);
  }, [scale]);

  const handlePress = useCallback(() => {
    onPress(product.id);
  }, [onPress, product.id]);

  return (
    <AnimatedPressable
      style={[styles.card, animatedStyle]}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      onPress={handlePress}
    >
      <Image source={{ uri: product.imageUrl }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{product.name}</Text>
        <Text style={styles.price}>
          {product.price.toLocaleString('vi-VN')} đ
        </Text>
        {!product.inStock && (
          <Text style={styles.outOfStock}>Hết hàng</Text>
        )}
      </View>
    </AnimatedPressable>
  );
});

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  image: {
    width: '100%',
    height: 200,
  },
  info: {
    padding: 16,
  },
  name: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  price: {
    fontSize: 16,
    color: '#2563eb',
    fontWeight: '700',
  },
  outOfStock: {
    color: '#dc2626',
    marginTop: 4,
    fontSize: 14,
  },
});

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface AnalyticsEvent {
  name: string;
  properties: Record<string, string | number | boolean>;
  timestamp: number;
}

export interface Spec extends TurboModule {
  trackEvent(event: AnalyticsEvent): void;
  trackScreen(screenName: string): void;
  setUserId(userId: string): void;
  flush(): Promise<void>;
  getSessionId(): string; // Đồng bộ với JSI
}

export default TurboModuleRegistry.getEnforcing<Spec>('Analytics');

import { Stack } from 'expo-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
      gcTime: 5 * 60 * 1000,
    },
  },
});

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Stack
        screenOptions={{
          headerShown: false,
          animation: 'slide_from_right',
        }}
      />
    </QueryClientProvider>
  );
}

import { View, FlatList, RefreshControl } from 'react-native';
import { useQuery } from '@tanstack/react-query';
import { ProductCard } from '@/components/ProductCard';
import { fetchProducts } from '@/api/products';

export default function HomeScreen() {
  const { data, isLoading, refetch, isRefetching } = useQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
  });

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={data?.products}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <ProductCard product={item} onPress={() => {}} />
        )}
        refreshControl={
          <RefreshControl refreshing={isRefetching} onRefresh={refetch} />
        }
        contentContainerStyle={{ padding: 16, gap: 16 }}
      />
    </View>
  );
}

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface CartItem {
  productId: string;
  quantity: number;
  price: number;
}

interface CartStore {
  items: CartItem[];
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
  totalPrice: () => number;
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) =>
        set((state) => {
          const existing = state.items.find(
            (i) => i.productId === item.productId
          );
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.productId === item.productId
                  ? { ...i, quantity: i.quantity + 1 }
                  : i
              ),
            };
          }
          return { items: [...state.items, { ...item, quantity: 1 }] };
        }),
      removeItem: (productId) =>
        set((state) => ({
          items: state.items.filter((i) => i.productId !== productId),
        })),
      updateQuantity: (productId, quantity) =>
        set((state) => ({
          items: state.items.map((i) =>
            i.productId === productId ? { ...i, quantity } : i
          ),
        })),
      clearCart: () => set({ items: [] }),
      totalPrice: () =>
        get().items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    }),
    {
      name: 'cart-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

import { render, screen, fireEvent } from '@testing-library/react-native';
import { ProductCard } from '../ProductCard';

const mockProduct = {
  id: '1',
  name: 'Tai nghe không dây',
  price: 1500000,
  imageUrl: 'https://example.com/image.jpg',
  inStock: true,
};

describe('ProductCard', () => {
  it('hiển thị thông tin sản phẩm chính xác', () => {
    render(<ProductCard product={mockProduct} onPress={() => {}} />);

    expect(screen.getByText('Tai nghe không dây')).toBeOnTheScreen();
    expect(screen.getByText('1.500.000 đ')).toBeOnTheScreen();
  });

  it('hiển thị badge hết hàng khi sản phẩm không còn', () => {
    const outOfStockProduct = { ...mockProduct, inStock: false };
    render(<ProductCard product={outOfStockProduct} onPress={() => {}} />);

    expect(screen.getByText('Hết hàng')).toBeOnTheScreen();
  });

  it('gọi callback onPress với product id', () => {
    const onPressMock = jest.fn();
    render(<ProductCard product={mockProduct} onPress={onPressMock} />);

    fireEvent.press(screen.getByText('Tai nghe không dây'));

    expect(onPressMock).toHaveBeenCalledWith('1');
  });
});

import { PerformanceObserver } from 'react-native-performance';

export function setupPerformanceMonitoring() {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.entryType === 'measure') {
        // Gửi đến analytics service
        console.log(`${entry.name}: ${entry.duration}ms`);
      }
    });
  });

  observer.observe({ entryTypes: ['measure'] });
}

export function measureTTI(screenName: string) {
  const startMark = `${screenName}_start`;
  const endMark = `${screenName}_interactive`;
  const measureName = `${screenName}_tti`;

  performance.mark(startMark);

  return () => {
    performance.mark(endMark);
    performance.measure(measureName, startMark, endMark);
  };
}