BoxCast SDK for React Native

All you need to build your own awesome video app to showcase your BoxCast channels and broadcasts.

Internally, playback depends on the React Native <Video> component from react-native-video.

Preview

Features

• Infinite scrolling display of all broadcasts in a channel via <ChannelList />
• Channel scroller can go horizontal or vertical
• Full screen video playback via <BroadcastModalView />
• Drag and dock the video player to continue browsing app while video plays
• Simple inline video playback with <BroadcastVideo />

Install

NOTE: This library depends on the separate react-native-video project, which has platform-specific installation requirements. Please review the installation guide at react-native-community/react-native-video.

npm install --save boxcast-sdk-react-native
npm install --save [email protected]

## Then, for React Native v0.59 and below
# react-native link react-native-video

## ... or for React Native v0.60 and above
# cd ios && pod install

Usage

• Import

import { ChannelList, BroadcastModalView } from 'boxcast-sdk-react-native';

• Render horizontal channel scroller with dockable video player on tap

...

render() {
  return (
    <View style={{flex:1}}>
      <View style={{height:150, width:'100%'}}>
        <ChannelList channelId={MY_BOXCAST_CHANNEL_ID}
                    query={'timeframe:relevant timeframe:next'}
                    sort={'-starts_at'}
                    pageSize={10}
                    onSelectBroadcast={(broadcast) => this.setState({broadcast})}
                    horizontal={true} />
      </View>
      {this.state.broadcast &&
        <BroadcastModalView
            broadcast={this.state.broadcast}
            dockable={true}
            onDismiss={() => this.setState({broadcast: null})} />
      }
    </View>
  );
}

• Render vertical channel scroller with fixed (non-dockable) video player on tap

...

render() {
  return (
    <View style={{flex:1}}>
      <ChannelList channelId={MY_BOXCAST_CHANNEL_ID}
                   query={'timeframe:relevant timeframe:next'}
                   sort={'-starts_at'}
                   pageSize={10}
                   onSelectBroadcast={(broadcast) => this.setState({broadcast})}
                   horizontal={false} />
      {this.state.broadcast &&
        <BroadcastModalView
            broadcast={this.state.broadcast}
            dockable={false}
            onDismiss={() => this.setState({broadcast: null})} />
      }
    </View>
  );
}

Components

ChannelList

Horizontal or vertical display of all broadcasts in a given channel

Properties

Name | Description | Default | Type ------|-------------|----------|----------- channelId | BoxCast channel ID. Required. | - | string (required) horizontal | Scroll horizontally? | false | boolean titleStyle | Additional styles to apply | null | StyleObject onSelectBroadcast | Callback when a broadcast is selected | - | function pageSize | Number of broadcasts to query at a time from API | 20 | int query | API query for filtering the result set | timeframe:relevant | string sort | API sort parameter | -starts_at | string

BroadcastModalView

Full-screen modal view of video and details for a given broadcast.

Properties

Name | Description | Default | Type ------|-------------|----------|----------- broadcast | BoxCast broadcast object. Required. | - | object (required) dockable | Enable dragging/docking behavior? | false | boolean dismissText | Text to use on the dismiss button | Close | string dismissStyle | Additional styles to apply to the dismiss button| null | StyleObject onDismiss | Callback when the modal is closed | - | function dragAcceleration | Value used to control vertical drag acceleration when dragging/docking | 1.0 | float

BroadcastVideo

Simple inline video playback for a given broadcast.

Properties

Name | Description | Default | Type ------|-------------|----------|----------- broadcast | BoxCast broadcast object. Required. | - | object (required)