Platform Handling

Platform.select

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#fff',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 8,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  text: {
    fontFamily: Platform.select({
      ios: 'Helvetica Neue',
      android: 'Roboto',
    }),
  },
});

Platform.OS

function MyComponent() {
  const isIOS = Platform.OS === 'ios';
  const isAndroid = Platform.OS === 'android';

  return (
    
      {isIOS && }
      {isAndroid ? 'Android' : 'iOS'}
    
  );
}

Platform-Specific Files

components/
├── Button.tsx           # Shared logic
├── Button.ios.tsx       # iOS-specific
└── Button.android.tsx   # Android-specific

// Import resolves to correct platform file

SafeAreaView

// Method 1: SafeAreaView component
function Screen() {
  return (
    
      
    
  );
}

// Method 2: useSafeAreaInsets hook (more control)
function CustomHeader() {
  const insets = useSafeAreaInsets();

  return (
    
      Header
    
  );
}

// Method 3: SafeAreaProvider context

function App() {
  return (
    
      
    
  );
}

KeyboardAvoidingView

function FormScreen() {
  return (
    
      
        
        
      
    
  );
}

StatusBar

function Screen() {
  return (
    <>
      
      
    </>
  );
}

Android Back Button

function useBackHandler(handler: () => boolean) {
  useEffect(() => {
    if (Platform.OS !== 'android') return;

    const subscription = BackHandler.addEventListener(
      'hardwareBackPress',
      handler
    );

    return () => subscription.remove();
  }, [handler]);
}

// Usage
function Screen() {
  useBackHandler(() => {
    if (hasUnsavedChanges) {
      showDiscardAlert();
      return true; // Prevent default back
    }
    return false; // Allow default back
  });
}

Quick Reference