Patterns from production · Navigation

Watch and camera screens own the screen

One chat, no floating buttons, and nothing over the picture but its own controls.

Watch and camera screens own the screenLive demo

Try the controls to see the rule.

The rule

On a phone, a screen for watching a stream or going live hides the bottom tab bar and every floating button. Its own controls take the edges: the chat docks under a wide picture, or runs over the lower part of a portrait one. Leaving the screen brings the tabs back.

Tokens used

  • size.tap44px
  • space.md12px
  • motion.duration.base260ms

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvMediaOwnsTheScreen: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: size.tap=44px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvMediaOwnsTheScreen(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: size.tap=44px, space.md=12px, motion.duration.base=260ms