Design com React Native

Domine padrões de design com React Native, React Navigation e Reanimated 3 para criar aplicativos móveis multiplataforma de alta performance com experiências de usuário de qualidade nativa.

Quando Usar Esta Habilidade

• Construir aplicativos móveis multiplataforma com React Native
• Implementar navegação com React Navigation 6+
• Criar animações de alta performance com Reanimated 3
• Estilizar componentes com StyleSheet e styled-components
• Construir layouts responsivos para diferentes tamanhos de tela
• Implementar designs específicos da plataforma (iOS/Android)
• Criar interações guiadas por gestos com Gesture Handler
• Otimizar a performance do React Native

Seção Detalhada: Conceitos Essenciais

Originalmente uma seção de 6471 bytes neste SKILL.md. Movida para references/details.md para se adequar ao limite de 8 KB do corpo da habilidade do Codex.

Componente de Início Rápido

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

interface ItemCardProps {
  title: string;
  subtitle: string;
  imageUrl: string;
  onPress: () => void;
}

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export function ItemCard({ title, subtitle, imageUrl, onPress }: ItemCardProps) {
  const scale = useSharedValue(1);

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

  return (
    <AnimatedPressable
      style={[styles.card, animatedStyle]}
      onPress={onPress}
      onPressIn={() => { scale.value = withSpring(0.97); }}
      onPressOut={() => { scale.value = withSpring(1); }}
    >
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <View style={styles.content}>
        <Text style={styles.title} numberOfLines={1}>
          {title}
        </Text>
        <Text style={styles.subtitle} numberOfLines={2}>
          {subtitle}
        </Text>
      </View>
    </AnimatedPressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  image: {
    width: '100%',
    height: 160,
    backgroundColor: '#f3f4f6',
  },
  content: {
    padding: 16,
    gap: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1f2937',
  },
  subtitle: {
    fontSize: 14,
    color: '#6b7280',
    lineHeight: 20,
  },
});

Melhores Práticas

1. Use TypeScript: Defina tipos de navegação e props para segurança de tipos.
2. Memoize Componentes: Use React.memo e useCallback para evitar renderizações desnecessárias.
3. Execute Animações na UI Thread: Use worklets do Reanimated para animações de 60fps.
4. Evite Estilos Inline: Use StyleSheet.create para performance.
5. Gerencie Áreas Seguras (Safe Areas): Use SafeAreaView ou useSafeAreaInsets.
6. Teste em Dispositivos Reais: A performance de simuladores/emuladores difere de dispositivos reais.
7. Use FlatList para Listas: Nunca use ScrollView com map para listas longas.
8. Código Específico da Plataforma: Use Platform.select para diferenças entre iOS/Android.

Problemas Comuns

• Conflitos de Gestos: Envolva gestos com GestureDetector e use simultaneousHandlers.
• Erros de Tipo de Navegação: Defina tipos ParamList para todos os navegadores.
• Travamentos de Animação: Mova animações para a UI thread com worklets runOnUI.
• Vazamentos de Memória: Cancele animações e limpe em useEffect.
• Carregamento de Fontes: Use expo-font ou react-native-asset para fontes personalizadas.
• Problemas de Área Segura: Teste em dispositivos com entalhe (notch) (iPhone, Android com recortes).