React Native & TypeScript Cross-Platform Mobile Engineering Masterclass

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

const ITEM_HEIGHT = 88;

interface Product {
  id: string;
  name: string;
  price: string;
}

// 1. Reusable Item with UI-Thread Reanimated Worklet
const ProductItem = React.memo(({ item }: { item: Product }) => {
  const scale = useSharedValue(1);

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

  const handlePressIn = () => {
    'worklet';
    scale.value = withSpring(0.96);
  };

  const handlePressOut = () => {
    'worklet';
    scale.value = withSpring(1);
  };

  return (
    <Animated.View style={[styles.card, animatedStyle]}>
      <Pressable
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        style={styles.innerCard}
      >
        <Text style={styles.title}>{item.name}</Text>
        <Text style={styles.price}>{item.price}</Text>
      </Pressable>
    </Animated.View>
  );
});

// 2. High-Performance List with Fixed Layout Optimization
export const OptimizedProductFeed = ({ products }: { products: Product[] }) => {
  const renderItem: ListRenderItem<Product> = useCallback(
    ({ item }) => <ProductItem item={item} />,
    []
  );

  const getItemLayout = useCallback(
    (_: any, index: number) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    }),
    []
  );

  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      getItemLayout={getItemLayout}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={5}
      removeClippedSubviews={true}
    />
  );
};

const styles = StyleSheet.create({
  card: { height: ITEM_HEIGHT, paddingHorizontal: 16, paddingVertical: 8 },
  innerCard: { flex: 1, backgroundColor: '#f8fafc', borderRadius: 8, padding: 12, justifyContent: 'center' },
  title: { fontSize: 16, fontWeight: '600', color: '#1e293b' },
  price: { fontSize: 14, color: '#0070f3', marginTop: 4 },
});