What is the difference between Switch and ActivityIndicator, and how do you customize their appearance across platforms?

Short answer

Switch displays the operating system's native logical On/Off control, while ActivityIndicator displays a circular loading spinner. Both support color and size customization to match the app's identity.

Explanation

Switch uses properties such as trackColor and thumbColor to keep the toggle's colors consistent across iOS and Android while retaining each system's animations. ActivityIndicator accepts "small" or "large" sizes and a color property to match the moving spinner to the current screen theme.

Code example

import { Switch, ActivityIndicator, View } from 'react-native';

function SettingsItem({ enabled, onToggle, loading }: { enabled: boolean; onToggle: () => void; loading: boolean }) {
  if (loading) {
    return <ActivityIndicator size="small" color="#0066cc" />;
  }

  return (
    <Switch
      value={enabled}
      onValueChange={onToggle}
      trackColor={{ false: '#767577', true: '#81b0ff' }}
      thumbColor={enabled ? '#0066cc' : '#f4f3f4'}
    />
  );
}

Common mistakes

• Trying to pass arbitrary numeric pixel values to ActivityIndicator's size property; the standard component only accepts "small" or "large".

Follow-up questions

• What is a Modal in React Native, and how should pop-up windows be handled?

Sources

• React Native docs — Switch
• React Native docs — ActivityIndicator