Hooks

useChannelSDK

Primary hook for interacting with the channel. Requires BBChannelProvider as an ancestor in the component tree.

import { useChannelSDK } from '@bluebillywig/react-native-channel';

function MyComponent() {
  const {
    canGoBack,
    currentPage,
    isLoading,
    error,
    goBack,
    navigateTo,
    navigateToEntity,
    search,
    reload,
    getNavigationState,
    setNavigationState,
    resetNavigation,
  } = useChannelSDK();

  return (
    <Button
      title="Go Back"
      disabled={!canGoBack}
      onPress={goBack}
    />
  );
}

Return value

Property	Type	Description
canGoBack	boolean	Whether back navigation is available
currentPage	BBPageType	Current page type
isLoading	boolean	Whether the channel is loading
error	BBErrorEvent | null	Current error, if any
goBack	() => void	Navigate back
navigateTo	(page: BBPageType) => void	Navigate to a page
navigateToEntity	(id: string, type: string, options?: NavigateToEntityOptions) => void	Navigate to a specific entity
search	(query: string) => void	Perform a search
reload	() => void	Reload the channel
getNavigationState	() => Promise<BBNavigationState>	Get current navigation state
setNavigationState	(state: BBNavigationState) => void	Set navigation state
resetNavigation	() => void	Reset to the main page

Provider setup

Wrap your app (or the relevant subtree) with BBChannelProvider:

import { BBChannelProvider, BBChannel } from '@bluebillywig/react-native-channel';

function App() {
  return (
    <BBChannelProvider>
      <BBChannel channelUrl="https://demo.bbvms.com/ch/1152.json" />
      <ControlBar />
    </BBChannelProvider>
  );
}

---

useChannelNavigation

Hook focused on navigation state management.

import { useChannelNavigation } from '@bluebillywig/react-native-channel';

function NavigationControls() {
  const {
    currentPage,
    canGoBack,
    navigationState,
    goBack,
    goHome,
    openSearch,
    navigateToEntity,
    navigateToSubChannel,
    getState,
    setState,
    reset,
  } = useChannelNavigation();

  return (
    <View>
      <Text>Current: {currentPage}</Text>
      <Button title="Home" onPress={goHome} />
      <Button title="Back" onPress={goBack} disabled={!canGoBack} />
      <Button title="Search" onPress={() => openSearch()} />
    </View>
  );
}

Return value

Property	Type	Description
currentPage	BBPageType	Current page type
canGoBack	boolean	Whether back navigation is available
navigationState	BBNavigationState	Current navigation state
goBack	() => void	Navigate back
goHome	() => void	Navigate to the main page
openSearch	(query?: string) => void	Open the search page, optionally with a query
navigateToEntity	(id: string, type: string, options?: NavigateToEntityOptions) => void	Navigate to a specific entity
navigateToSubChannel	(subChannelId: string) => void	Switch to a sub-channel
getState	() => Promise<BBNavigationState>	Get current state
setState	(state: BBNavigationState) => void	Set navigation state
reset	() => void	Reset to initial state

---

Custom hook example

Build your own hooks on top of the SDK:

import { useChannelSDK } from '@bluebillywig/react-native-channel';
import { useCallback } from 'react';

function useDeepLink() {
  const { navigateToEntity, getNavigationState } = useChannelSDK();

  const openFromDeepLink = useCallback(async (clipId: string) => {
    const state = await getNavigationState();
    if (state.contentId !== clipId) {
      navigateToEntity(clipId, 'mediaclip', { autoPlay: true });
    }
  }, [navigateToEntity, getNavigationState]);

  return { openFromDeepLink };
}