react-native-design

React Native Design

Master React Native styling patterns, React Navigation, and Reanimated 3 to build performant, cross-platform mobile applications with native-quality user experiences.

Examples target React Navigation 6 and Reanimated 3; check the official documentation for API differences in newer major versions.

When to Use This Skill

• Building cross-platform mobile apps with React Native
• Implementing navigation with React Navigation 6+
• Creating performant animations with Reanimated 3
• Styling components with StyleSheet and styled-components
• Building responsive layouts for different screen sizes
• Implementing platform-specific designs (iOS/Android)
• Creating gesture-driven interactions with Gesture Handler
• Optimizing React Native performance

Detailed section: Core Concepts

For StyleSheet basics, dynamic styles, Flexbox layout, React Navigation stack and tab setup, Reanimated basics, gesture integration and platform-specific styling, read references/details.md before writing code. For deeper patterns, read references/navigation-patterns.md for navigation, references/reanimated-patterns.md for animations and gestures, and references/styling-patterns.md for themes, layout and component styling.

Quick Start Component

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,
  },
});

Best Practices

1. Use TypeScript: Define navigation and prop types for type safety
2. Memoize Components: Use React.memo and useCallback to prevent unnecessary rerenders
3. Run Animations on UI Thread: Use Reanimated worklets for 60fps animations
4. Avoid Inline Styles: Use StyleSheet.create for performance
5. Handle Safe Areas: Use SafeAreaView or useSafeAreaInsets
6. Test on Real Devices: Simulator/emulator performance differs from real devices
7. Use FlatList for Lists: Never use ScrollView with map for long lists
8. Platform-Specific Code: Use Platform.select for iOS/Android differences

Also give pressable elements an accessibility role and label, mark decorative images as not accessible or give them a label, and install packages from the official npm registry using exact package names, pinned versions and a committed lockfile.

Common Issues

• Gesture Conflicts: Wrap gestures with GestureDetector and compose them with the simultaneous, race or exclusive gesture composition helpers (see the pinch and rotate example in references/reanimated-patterns.md)
• Navigation Type Errors: Define ParamList types for all navigators
• Animation Jank: Drive animations with shared values, animated styles and timing or spring animations, which already run on the UI thread; reserve runOnUI for imperative worklet calls
• Memory Leaks: Call cancelAnimation on running shared values in the useEffect cleanup
• Font Loading: Use expo-font or react-native-asset for custom fonts
• Safe Area Issues: Test on notched devices (iPhone, Android with cutouts)