Mobile App Design Best Practices: UI/UX Guidelines for iOS & Android

// ✓ Correct: 20×20pt icon with 44×44pt tap area using hitSlop
<TouchableOpacity
  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
  onPress={handleClose}
  accessible={true}
  accessibilityLabel="Close"
  accessibilityRole="button"
>
  <CloseIcon width={20} height={20} />
</TouchableOpacity>

// ✓ Alternative: Pressable with padding + negative margin offset
<Pressable
  style={({ pressed }) => ({
    padding: 12,   // expands tap area to 44×44pt for a 20×20pt icon
    margin: -12,   // offsets padding so surrounding layout is unchanged
    opacity: pressed ? 0.7 : 1,
  })}
  onPress={handleClose}
>
  <CloseIcon width={20} height={20} />
</Pressable>

// ✗ Incorrect: small icon with no expanded tap area
<TouchableOpacity onPress={handleClose}>
  <CloseIcon width={20} height={20} />   {/* tap target = 20×20pt — fails HIG */}
</TouchableOpacity>

// ✓ Icon-only button: describe the action, not the visual
<TouchableOpacity
  accessible={true}
  accessibilityLabel="Add to favourites"   // NOT "Star icon"
  accessibilityRole="button"
  accessibilityState={{ selected: isFavourited }}
  accessibilityHint="Double-tap to toggle favourite"
  onPress={toggleFavourite}
>
  <StarIcon filled={isFavourited} />
</TouchableOpacity>

// ✓ Group related elements into one accessibility unit
// Screen reader announces: "John Smith, 3 unread messages, 2 minutes ago"
<View
  accessible={true}
  accessibilityLabel={user.name + ', ' + msgCount + ' unread, ' + timeAgo}
>
  <Avatar source={user.avatar} />
  <Text>{user.name}</Text>
  <Text>{msgCount} messages</Text>
  <Text>{timeAgo}</Text>
</View>

// ✓ Announce dynamic content changes (notification badge, live feed)
import { AccessibilityInfo } from 'react-native';

function onNewMessages(count: number) {
  AccessibilityInfo.announceForAccessibility(
    count + ' new message' + (count !== 1 ? 's' : '')
  );
}

// ✗ Decorative image exposed to screen readers (announces file name)
<Image source={bannerImage} />

// ✓ Hide decorative images — they add noise for screen reader users
<Image source={bannerImage} accessibilityElementsHidden={true} />

import { Platform, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// Platform.select: apply different values per platform in StyleSheet
const cardStyles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.08,
        shadowRadius: 8,
      },
      android: {
        elevation: 4,              // Android uses elevation, not shadow
        backgroundColor: '#FFF',   // Required — elevation needs a bg colour
      },
    }),
  },
});

// Platform.OS: conditionally render platform-specific UI elements
const BackButton = () => {
  // Android has a system back gesture — no in-app back button needed
  if (Platform.OS === 'android') return null;

  return (
    <TouchableOpacity onPress={navigation.goBack} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
      <ChevronLeftIcon width={24} height={24} />
    </TouchableOpacity>
  );
};

// Safe area insets: always respect Dynamic Island, notch, and gesture bar
function BottomTabBar() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{
      paddingBottom: Math.max(insets.bottom, 8), // min 8pt even on flat-bottom phones
      paddingLeft:  insets.left,
      paddingRight: insets.right,
    }}>
      {/* Tab items */}
    </View>
  );
}

import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';

function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  const scale = useRef(new Animated.Value(1)).current;

  const handlePress = () => {
    // Optimistic UI: update state immediately, sync to API in background
    setLiked(prev => !prev);
    api.toggleLike(postId).catch(() => setLiked(prev => !prev)); // revert on failure

    // Spring sequence: compress → overshoot → settle (≈ 400ms total)
    Animated.sequence([
      Animated.timing(scale, {
        toValue: 0.82,
        duration: 80,
        easing: Easing.out(Easing.quad),
        useNativeDriver: true,
      }),
      Animated.spring(scale, {
        toValue: 1.25,
        friction: 3,    // low friction = more overshoot bounce
        tension: 120,
        useNativeDriver: true,
      }),
      Animated.spring(scale, {
        toValue: 1,
        friction: 6,
        tension: 100,
        useNativeDriver: true,
      }),
    ]).start();
  };

  return (
    <TouchableWithoutFeedback
      onPress={handlePress}
      accessible={true}
      accessibilityLabel={liked ? 'Remove like' : 'Like'}
      accessibilityRole="button"
    >
      <Animated.View style={{ transform: [{ scale }] }}>
        <HeartIcon filled={liked} color={liked ? '#EF4444' : '#9CA3AF'} size={24} />
      </Animated.View>
    </TouchableWithoutFeedback>
  );
}

// For CSS/React Native Web: equivalent using CSS transforms
// .like-button:active { transform: scale(0.82); }
// .like-button.liked  { animation: heartBounce 400ms ease forwards; }
// @keyframes heartBounce {
//   0%   { transform: scale(1);    }
//   30%  { transform: scale(0.82); }
//   60%  { transform: scale(1.25); }
//   100% { transform: scale(1);    }
// }

import { Animated, Easing, View, StyleSheet } from 'react-native';

// Reusable shimmer hook — share one animation loop across all skeleton elements
function useShimmer() {
  const shimmer = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(shimmer, {
        toValue: 1,
        duration: 1400,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
    return () => shimmer.stopAnimation();
  }, []);

  return shimmer.interpolate({
    inputRange:  [0, 1],
    outputRange: [-300, 300],  // sweeps left → right across the element
  });
}

// Skeleton card that EXACTLY mirrors the real FeedCard layout
// Same dimensions, same positions — the brain reads it as "almost loaded"
function FeedCardSkeleton() {
  const translateX = useShimmer();

  const shimmerStyle = {
    transform: [{ translateX }],
    position:  'absolute' as const,
    width:     '200%',
    height:    '100%',
    backgroundColor: 'rgba(255,255,255,0.18)',
  };

  return (
    <View style={s.card}>
      {/* Avatar placeholder — same 48×48pt as real avatar */}
      <View style={s.avatar}>
        <Animated.View style={shimmerStyle} />
      </View>

      <View style={s.body}>
        {/* Name line: 60% width ≈ average display name length */}
        <View style={[s.line, { width: '60%' }]}>
          <Animated.View style={shimmerStyle} />
        </View>
        {/* Content line: 90% width ≈ one line of body text */}
        <View style={[s.line, { width: '90%', marginTop: 8 }]}>
          <Animated.View style={shimmerStyle} />
        </View>
        {/* Second content line: 75% width */}
        <View style={[s.line, { width: '75%', marginTop: 6 }]}>
          <Animated.View style={shimmerStyle} />
        </View>
      </View>
    </View>
  );
}

const s = StyleSheet.create({
  card:   { flexDirection: 'row', padding: 16, overflow: 'hidden' },
  avatar: { width: 48, height: 48, borderRadius: 24, backgroundColor: '#E5E7EB', overflow: 'hidden' },
  body:   { flex: 1, marginLeft: 12, justifyContent: 'center' },
  line:   { height: 14, borderRadius: 4, backgroundColor: '#E5E7EB', overflow: 'hidden' },
});

// Usage: render skeletons while data is loading, swap to real content when ready
function FeedScreen() {
  const { data, isLoading } = useFeed();
  return isLoading
    ? Array.from({ length: 6 }).map((_, i) => <FeedCardSkeleton key={i} />)
    : data.map(item => <FeedCard key={item.id} item={item} />);
}