How-to Guides
Control App UI
Customize the status bar, navigation spinner, screen rotation, and swipe gestures
Control App UI
Customize the native app chrome: status bar, navigation spinner, screen rotation, and swipe navigation.
Prerequisites
- The starti.app SDK is installed and initialized
Status bar
Configure on initialization
Set status bar options when initializing the SDK:
await startiapp.initialize({
statusBar: {
removeSafeArea: false,
safeAreaBackgroundColor: "#ffffff",
hideText: false,
darkContent: true,
},
});Change at runtime
startiapp.App.setStatusBar({
removeSafeArea: false,
safeAreaBackgroundColor: "#1a1a2e",
hideText: false,
darkContent: false, // light text for dark backgrounds
});Hide / show
await startiapp.App.hideStatusBar();
await startiapp.App.showStatusBar();Set safe area background color
await startiapp.App.setSafeAreaBackgroundColor("#ff0000");Navigation spinner
The spinner shows during page navigation. Configure it globally:
await startiapp.initialize({
spinner: {
show: true,
color: "#3498db",
afterMilliseconds: 300,
excludedDomains: ["api.example.com"],
},
});Show / hide programmatically
await startiapp.App.showSpinner();
await startiapp.App.hideSpinner();Screen rotation
// Allow the screen to rotate
await startiapp.App.enableScreenRotation();
// Lock to current orientation
await startiapp.App.disableScreenRotation();Swipe navigation
Control iOS-style swipe-back and swipe-forward gestures:
// Enable swipe gestures
await startiapp.App.enableSwipeNavigation();
// Disable swipe gestures (useful for maps, carousels, etc.)
await startiapp.App.disableSwipeNavigation();Set all options at initialization
Combine everything in a single initialize call:
await startiapp.initialize({
allowZoom: false,
allowRotation: false,
allowDrag: true,
allowScrollBounce: false,
allowSwipeNavigation: true,
statusBar: {
removeSafeArea: false,
safeAreaBackgroundColor: "#ffffff",
hideText: false,
darkContent: true,
},
spinner: {
show: true,
color: "#000000",
afterMilliseconds: 200,
excludedDomains: [],
},
});Options stack
Push and pop option sets for different views:
// Enter a fullscreen video view
startiapp.App.pushOptions({
allowRotation: true,
allowSwipeNavigation: false,
});
// Leave the fullscreen view, restore previous settings
startiapp.App.popOptions();