Skip to main content

Safe Areas

Handle notches, status bars, home indicators, and rounded corners correctly.

Default Behavior​

By default, BBChannel adds top padding to avoid the status bar and notch. No configuration needed for the common full-screen case:

// Top safe area applied automatically
<BBChannel
  channelUrl="https://demo.bbvms.com/ch/channel_name.json"
  style={{ flex: 1 }}
/>

Requirements​

For accurate inset values, install react-native-safe-area-context and wrap your app:

npm install react-native-safe-area-context
import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider>
      <ChannelScreen />
    </SafeAreaProvider>
  );
}

Without this package, the SDK uses fallback values that may not be accurate on all devices.

safeAreaEdges​

Control which edges get safe area padding with the safeAreaEdges prop:

// Default: top only
<BBChannel safeAreaEdges={['top']} />

// All edges (landscape, home indicator)
<BBChannel safeAreaEdges={['top', 'bottom', 'left', 'right']} />

// No safe area padding (you handle it yourself)
<BBChannel safeAreaEdges={[]} />

// Top and bottom only
<BBChannel safeAreaEdges={['top', 'bottom']} />

safeAreaInsets​

Override inset values manually when you need precise control:

// Fixed insets (ignores device-reported values)
<BBChannel
  safeAreaInsets={{ top: 44, bottom: 34, left: 0, right: 0 }}
/>

// Partial override (only override top, use device values for the rest)
<BBChannel
  safeAreaInsets={{ top: 60 }}
  safeAreaEdges={['top', 'bottom']}
/>

Common Scenarios​

Full Screen​

The channel fills the entire screen with no other UI:

<BBChannel
  channelUrl="https://demo.bbvms.com/ch/channel_name.json"
  safeAreaEdges={['top']}  // Default, can omit
  style={{ flex: 1 }}
/>

Embedded with Custom Header​

Your app provides a header above the channel, so the channel should not add top padding:

<SafeAreaView style={{ flex: 1 }}>
  <MyCustomHeader />
  <BBChannel
    channelUrl="https://demo.bbvms.com/ch/channel_name.json"
    safeAreaEdges={[]}  // SafeAreaView handles it
    style={{ flex: 1 }}
  />
</SafeAreaView>

Landscape Mode​

In landscape, content can be obscured by the notch on the left or right side:

<BBChannel
  channelUrl="https://demo.bbvms.com/ch/channel_name.json"
  safeAreaEdges={['top', 'left', 'right']}
  style={{ flex: 1 }}
/>

Tab Navigator​

When inside a tab navigator with a bottom tab bar, the tab bar handles bottom safe area:

<BBChannel
  channelUrl="https://demo.bbvms.com/ch/channel_name.json"
  safeAreaEdges={[]}  // Tab navigator handles safe areas
  style={{ flex: 1 }}
/>

Fallback Without the Package​

If react-native-safe-area-context is not installed, the SDK falls back to:

  • iOS: StatusBar.currentHeight for top inset, estimates for bottom
  • Android: System window insets where available

The fallback works for basic cases but may not account for:

  • Dynamic Island on newer iPhones
  • Foldable device configurations
  • Landscape notch positions

For production apps, always install react-native-safe-area-context.

Troubleshooting​

Double Padding​

Content has too much space at the top.

Cause: Both SafeAreaView and BBChannel are applying top padding.

Fix: Set safeAreaEdges={[]} on BBChannel when it's inside a SafeAreaView:

<SafeAreaView style={{ flex: 1 }}>
  <BBChannel safeAreaEdges={[]} />
</SafeAreaView>

Content Cutoff​

Content is hidden behind the notch or status bar.

Cause: Safe area edges are disabled but no parent is handling the safe area.

Fix: Either enable the appropriate safeAreaEdges on BBChannel, or wrap in SafeAreaView:

// Option A: Let BBChannel handle it
<BBChannel safeAreaEdges={['top']} />

// Option B: Use SafeAreaView
<SafeAreaView style={{ flex: 1 }}>
  <BBChannel safeAreaEdges={[]} />
</SafeAreaView>

Landscape Inconsistency​

Safe area looks correct in portrait but content is cut off in landscape.

Fix: Add left and right edges:

<BBChannel safeAreaEdges={['top', 'left', 'right']} />

Wrong Inset Values​

The automatic insets don't match your device.

Fix: Use safeAreaInsets to override:

<BBChannel
  safeAreaInsets={{ top: 50, bottom: 34 }}
  safeAreaEdges={['top', 'bottom']}
/>