React Native on Android TV

From Custom Hardware
to Android TV and
Beyond
Valentin Nagacevschi

Summary
• Custom Hardware ?
• What is Android TV and why develop for it ?
• Think different!
• React Native & Android TV
• Start developing for Android TV
• Takeaways

Custom
Hardware,
still Android

Smart TV Market Share
2018
2017
2016
2015
Smart TV Other TV

Smart TV OS Share
Android
40%
Tizen
23%
WebOS
13%
Roku 6%
Other
40%

Why Android TV ?
• Larger screen

Why Android TV ?
• Larger screen
• Real life shared experiences

Why Android TV ?
• Larger screen
• Real life shared experiences
• Less SMOBIES !!

Think Different!
• Smartphone without touch

Think Different!
• Everything is focus oriented

Think Different!
• Use background images, it’s a large screen

Think Different!
• Avoid keyboard input

Think Different!
• Use the microphone

Think Different!
• Use the microphone
• Use Recommendations

React Native & Android TV
• Supported since RN 0.55 (March, 2018)

• Limited if any changes - works of the shelf

• Limited if any changes - works of the shelf
• Can be published as usual in Google Play

Use Your Imagination
• Use focus and selectors
• Animated State List - horizontal or 2D scrolling
• Focusable components
• Full-screen background images

Navigation using Remote Control

Connect to the Android TV
> adb connect 10.0.208.153:5555
connected to 10.0.208.153:5555
> adb devices
List of devices attached
10.0.208.153:5555 device
> react-native run android

Android Manifest File
<uses-feature android:name="android.hardware.microphone" android:required="false" />
<uses-feature android:name="android.hardware.touchscreen" android:required="false" />
<application
…
android:label="@string/app_name"
android:banner="@drawable/videos_by_google_banner"
android:logo=“@drawable/videos_by_google_banner">
<activity
…
android:label="@string/app_name"
android:logo="@drawable/videos_by_google_banner"
android:screenOrientation="landscape">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>
</activity>

Focusable Button
<TouchableOpacity
style={[styles.button, this.state.currentStyle]}
onPress={this.onPress}
onFocus={() => this.setState({ currentStyle: { borderColor: '#62DBFB' }})}
onBlur={() => this.setState({ currentStyle: { borderColor: '#CC0000' }})}
>
<Text style={styles.text} >Press Me</Text>
</TouchableOpacity>

Remote Control Events
const TVEventHandler = require(‘TVEventHandler’);
...
componentDidMount() {
this.tvEventHandler = new TVEventHandler();
this.tvEventHandler.enable(this, (cmp, evt) => {
console.log('TVEvent' , evt);
});
}
TVEvent, { eventType: 'up' }
TVEvent, { eventType: 'right' }
TVEvent, { eventType: 'down' }
TVEvent, { eventType: 'left' }
TVEvent, { eventType: 'select' }
TVEvent, { eventType: 'rewind' }
TVEvent, { eventType: 'fastForward' }
TVEvent, { eventType: 'playstop' }
TVEvent, { eventType: 'focus' }
TVEvent, { eventType: ‘blur' }

React Native Voice
import Voice from ‘react-native-voice';
constructor(props) {
Voice.onSpeechStart = this.onSpeechStartHandler.bind(this);
Voice.onSpeechEnd = this.onSpeechEndHandler.bind(this);
Voice.onSpeechResults = this.onSpeechResultsHandler.bind(this);
}
onPress = (e) => {
Voice.start('en-GB');
}
onSpeechResultsHandler = ({ value }) => {
console.log(‘RESULT', value);
}

React Native Music Control
import MusicControl from 'react-native-music-control';
MusicControl.enableControl('setRating', false);
MusicControl.enableControl('volume', true);
...
MusicControl.setNowPlaying({
title: ‘Stay With Me',
artwork: 'https://i.imgur.com/e1cpwdo.png',
artist: ‘Sam Smith',
album: ‘In the Lonely Hour',
genre: 'Ballad, Rhythm and Blues, Pop',
duration: 294,
description: '',
color: 0xFFFFFF,
date: ‘2014-01-02T00:00:00Z',
rating: 84,
notificationIcon: 'my_custom_icon'
});

ADB Goodies
/* launch developer menu */

adb shell input keyevent KEYCODE_MENU

/* go back */

adb shell input keyevent KEYCODE_BACK

/* input keyevent */

adb shell input keyevent 19 // DPAD_DOWN

/* input text */

adb shell input text "my.email@domain.com"

/* install apk */

adb install -r /path-to-your-apk/app-debug.apk

/* run app */

adb shell monkey -p com.magicworks.androidtv -c

/* run main intent with deep link params */

adb shell am start -a android.intent.action.MAIN -d "tvapp://ok"

/* launch settings options */

adb shell am start -a android.settings.SETTINGS

Takeaways
• No better time to start developing for Android TV

Takeaways
• React Native just works

Takeaways
• Be creative when designing for Android TV

Takeaways
• No touch, no keyboard, use focus, microphone, background images

Takeaways
• No touch, no keyboard, use focus, microphone, background images
• AndroidX (with LeanBack included) support on RN 0.60

Questions?
Thank you !
linkedin.com/in/vnagacevschi/

React Native on Android TV

More Related Content

What's hot (20)

Similar to React Native on Android TV (20)

Recently uploaded (20)

React Native on Android TV