Komponenten und Props in React Native mit TypeScript typisieren

Jetzt migrieren wir ProductCard – GENAU wie in "React für Profis" Kapitel 41, nur mit den React-Native-spezifischen Event-Typen statt der Web-DOM-Event-Typen.

ProductCard.js zu ProductCard.tsx

components/ProductCard.tsx

import { memo } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Image } from 'expo-image';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

const BLURHASH = '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';

interface ProductCardProps {
  name: string;
  price: number;
  imageUrl: string;
  onPress: () => void;
  isFavorite: boolean;
  onToggleFavorite: () => void;
}

function ProductCard({
  name,
  price,
  imageUrl,
  onPress,
  isFavorite,
  onToggleFavorite,
}: ProductCardProps) {
  const scale = useSharedValue(1);

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

  function handleToggleFavorite() {
    scale.value = withSpring(1.4, { damping: 4 }, () => {
      scale.value = withSpring(1);
    });
    onToggleFavorite();
  }

  return (
    <TouchableOpacity style={styles.card} onPress={onPress}>
      <Image
        source={imageUrl}
        style={styles.image}
        placeholder={{ blurhash: BLURHASH }}
        contentFit="cover"
        transition={200}
        cachePolicy="memory-disk"
      />
      <View style={styles.info}>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.price}>${price.toFixed(2)}</Text>
      </View>
      <TouchableOpacity style={styles.favoriteButton} onPress={handleToggleFavorite}>
        <Animated.Text style={[styles.favoriteIcon, heartStyle]}>
          {isFavorite ? '♥' : '♡'}
        </Animated.Text>
      </TouchableOpacity>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    marginBottom: 8,
    backgroundColor: '#f9fafb',
    borderRadius: 8,
    alignItems: 'center',
  },
  image: { width: 60, height: 60, borderRadius: 4 },
  info: { marginLeft: 12, flex: 1 },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#6b7280' },
  favoriteButton: { padding: 8 },
  favoriteIcon: { fontSize: 20, color: '#ef4444' },
});

export default memo(ProductCard);

Bonus: StyleSheet.create ist bereits automatisch typisiert

Ein angenehmer Unterschied zu React Web: StyleSheet.create({{...}}) ist GENERISCH typisiert – tippen Sie versehentlich einen ungültigen Style-Namen (z. B. colr statt color), meldet TypeScript den Fehler SOFORT, ohne dass Sie selbst einen Style-Typ definieren müssten. Diese Typen kommen direkt aus @types/react-native, das Expo automatisch mitinstalliert.

Style-Objekte als Props weiterreichen

Für Komponenten, die eigene style-Props nach außen anbieten (z. B. eine zukünftige, konfigurierbarere Version von ProductCard), gibt es den passenden React-Native-Typ:

import { StyleProp, ViewStyle } from 'react-native';

interface CardProps {
  style?: StyleProp<ViewStyle>;
}

StyleProp<ViewStyle> deckt ALLE gültigen Formen ab, in denen React Native Styles akzeptiert: ein einzelnes Style-Objekt, ein Array aus Styles (wie wir es bei [styles.favoriteIcon, heartStyle] im Beispiel oben nutzen), oder false/null/undefined (für bedingte Styles à la condition && styles.active).

children und generische Touchable-Props

import { ReactNode } from 'react';
import { TouchableOpacityProps } from 'react-native';

// ReactNode funktioniert identisch wie in "React für Profis" Kapitel 41 (Web):
interface WrapperProps {
  children: ReactNode;
}

// Praktisch, um ALLE Standard-Props einer nativen Komponente zu übernehmen,
// plus eigene Ergänzungen - spart, jede Standard-Prop einzeln aufzulisten:
interface CustomButtonProps extends TouchableOpacityProps {
  label: string;
}

extends TouchableOpacityProps ist ein React-Native-spezifisches Muster ohne direktes Äquivalent in "React für Profis": es übernimmt ALLE Standard-Props von TouchableOpacity (onPress, disabled, style, activeOpacity, ...) automatisch, sodass eine eigene Wrapper-Komponente sie NICHT einzeln neu deklarieren muss.

Tipp: Faustregel für eigene, wiederverwendbare RN-Komponenten: extends <NativeComponent>Props ist fast IMMER der bessere Ausgangspunkt als ein komplett neu geschriebenes Props-Interface – Sie erben automatisch alle Standard-Funktionalität und müssen nur die WIRKLICH neuen, eigenen Props hinzufügen.

Komponenten und Props in React Native mit TypeScript typisieren

Komponenten und Props typisieren

ProductCard.js zu ProductCard.tsx

Bonus: StyleSheet.create ist bereits automatisch typisiert

Style-Objekte als Props weiterreichen

children und generische Touchable-Props