Android

AniUI components work on both iOS and Android out of the box. However, there are platform differences to be aware of. This page documents known Android-specific behaviors.

Bottom Sheet / Action Sheet / Select#

Components that use @gorhom/bottom-sheet (Bottom Sheet, Action Sheet, Select) require your app to be wrapped in GestureHandlerRootView on Android. Without this, gestures will silently fail.

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

Keyboard Handling#

Android keyboard behavior differs from iOS. Set android.softInputMode in your app.json to control how inputs behave when the keyboard appears:

{
  "expo": {
    "android": {
      "softInputMode": "adjustResize"
    }
  }
}

When using KeyboardAvoidingView, set behavior="height" on Android (vs "padding" on iOS).

Dialog / Alert Dialog#

Android's hardware back button should dismiss modals. If you customize the Dialog or Alert Dialog component, you may need to integrate BackHandler from React Native to handle back button presses:

import { BackHandler } from "react-native";
import { useEffect } from "react";

useEffect(() => {
  if (!open) return;
  const handler = BackHandler.addEventListener(
    "hardwareBackPress",
    () => { onOpenChange(false); return true; }
  );
  return () => handler.remove();
}, [open]);

Switch#

The native Switch component renders differently on Android vs iOS. AniUI's Switch wraps the native component, so appearance varies by platform. Use thumbColor and trackColor props to normalize the look if needed.

Shadows & Elevation#

NativeWind shadow-* classes map to elevation on Android. Shadows look different from iOS — Android uses a single elevation value while iOS supports multiple shadow properties (offset, radius, color). Components like Card that use shadows may appear slightly different across platforms.

Safe Area#

Android status bar and navigation bar insets behave differently from iOS. Always use react-native-safe-area-context to handle safe areas consistently across both platforms.

Testing Checklist#

When testing your app on Android, verify:

• Keyboard interactions — inputs scroll into view, no overlap
• Gesture components — bottom sheet, drawer, carousel respond to swipes
• Shadows and elevation — cards, dialogs look acceptable
• Dark mode — works on Android 10+ with system theme
• Back button — dismisses modals, navigates back correctly
• Touch targets — all interactive elements are 48dp minimum