Full Screen Integration

The most common pattern: the channel takes the entire screen. Tapping a video opens a native fullscreen player.

Basic Setup

import React from 'react';
import { SafeAreaView, StatusBar, StyleSheet } from 'react-native';
import { BBChannelWithPlayer } from '@bluebillywig/react-native-channel';

function ChannelScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" />
      <BBChannelWithPlayer
        channelUrl="https://demo.bbvms.com/ch/channel_name.json"
        playerMode="fullscreen"
        handleBackButton={true}
        style={styles.channel}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  channel: {
    flex: 1,
  },
});

Setting playerMode="fullscreen" opens a native modal player when the user taps a video. The channel UI remains underneath. Use playerMode="inline" instead if you want the player fixed at the top of the screen.

Loading State

Show a loading overlay while the channel initializes:

function ChannelScreen() {
  const [loading, setLoading] = useState(true);

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" />
      <BBChannelWithPlayer
        channelUrl="https://demo.bbvms.com/ch/channel_name.json"
        playerMode="fullscreen"
        handleBackButton={true}
        onReady={() => setLoading(false)}
        style={styles.channel}
      />
      {loading && (
        <View style={styles.loadingOverlay}>
          <ActivityIndicator size="large" color="#fff" />
        </View>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  channel: {
    flex: 1,
  },
  loadingOverlay: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
});

Android Back Button

Simple: Automatic Handling

The easiest approach — set handleBackButton={true} and the SDK handles everything:

<BBChannelWithPlayer
  channelUrl="https://demo.bbvms.com/ch/channel_name.json"
  playerMode="fullscreen"
  handleBackButton={true}
/>

When the user presses the Android back button:

1. If the fullscreen player is open, it closes
2. If the channel can go back (detail page → main), it navigates back
3. Otherwise, the default back behavior (exit app) runs

Advanced: Manual with Refs

For custom back button logic (e.g., confirming exit), handle it manually using refs:

import { BackHandler } from 'react-native';

function ChannelScreen() {
  const channelRef = useRef<BBChannelRef>(null);
  const canGoBackRef = useRef(false);

  useEffect(() => {
    const handler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (canGoBackRef.current) {
        channelRef.current?.goBack();
        return true;
      }
      return false;
    });
    return () => handler.remove();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <BBChannelWithPlayer
        ref={channelRef}
        channelUrl="https://demo.bbvms.com/ch/channel_name.json"
        playerMode="fullscreen"
        onCanGoBackChange={(canGoBack) => {
          canGoBackRef.current = canGoBack;
        }}
      />
    </SafeAreaView>
  );
}

Why refs instead of state?

BackHandler captures the state value at the time the listener is registered. If you use useState for canGoBack, rapid back presses may read a stale value. A ref always returns the current value. See Back Navigation for details.

State Persistence

Save and restore the user's position with AsyncStorage:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { BBNavigationState } from '@bluebillywig/react-native-channel';

const STORAGE_KEY = '@channel_nav_state';

function ChannelScreen() {
  const [initialState, setInitialState] = useState<BBNavigationState | undefined>();
  const [ready, setReady] = useState(false);

  useEffect(() => {
    AsyncStorage.getItem(STORAGE_KEY).then((json) => {
      if (json) {
        setInitialState(JSON.parse(json));
      }
      setReady(true);
    });
  }, []);

  if (!ready) return null;

  return (
    <SafeAreaView style={styles.container}>
      <BBChannelWithPlayer
        channelUrl="https://demo.bbvms.com/ch/channel_name.json"
        playerMode="fullscreen"
        handleBackButton={true}
        initialNavigationState={initialState}
        onNavigationStateChange={(state) => {
          AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(state));
        }}
      />
    </SafeAreaView>
  );
}

Key Points

• SafeAreaView — Wrap the channel in SafeAreaView to avoid notches and system UI. The SDK also has built-in safe area support via the safeAreaEdges prop (see Safe Areas).
• StatusBar — Set barStyle="light-content" for dark channel backgrounds.
• Orientation — The channel is responsive and adapts to both portrait and landscape. Lock orientation at the app level if needed. The fullscreen player handles orientation independently.
• Background color — Set the container background to match the channel theme to avoid white flashes during load.