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 react-native-video@5.0.2
## 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) |