From custom hardware to Android TV and beyond. A brief introduction on how to develop apps for Android TV using React Native. Talk at Reat Native London Meetup - July 2019: https://youtu.be/wm56XCtMw40

1. From Custom Hardware
to Android TV and
Beyond
Valentin Nagacevschi

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

3. Custom
Hardware,
still Android

4. What is Android TV ?

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

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

7. Why Android TV ?

8. Why Android TV ?
• Larger screen

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

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

11. Less SMOBIES!

13. Think Different!

14. Think Different!
• Smartphone without touch

15. Think Different!
• Smartphone without touch
• Everything is focus oriented

16. Think Different!
• Smartphone without touch
• Everything is focus oriented
• Use background images, it’s a large screen

17. Think Different!
• Smartphone without touch
• Everything is focus oriented
• Use background images, it’s a large screen
• Avoid keyboard input

18. Think Different!
• Smartphone without touch
• Everything is focus oriented
• Use background images, it’s a large screen
• Avoid keyboard input
• Use the microphone

19. Think Different!
• Smartphone without touch
• Everything is focus oriented
• Use background images, it’s a large screen
• Avoid keyboard input
• Use the microphone
• Use Recommendations

21. Leanback Support Library

22. React Native & Android TV

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

24. React Native & Android TV
• Supported since RN 0.55 (March, 2018)
• Limited if any changes - works of the shelf

25. React Native & Android TV
• Supported since RN 0.55 (March, 2018)
• Limited if any changes - works of the shelf
• Can be published as usual in Google Play

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

28. D-Pad Control

29. Navigation using Remote Control

30. How to Start the Development?

31. How to Start the Development?

32. How to Start the Development?

33. How to Start the Development?

34. How to Start the Development?

35. 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

36. 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>

37. 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>

38. 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' }

39. 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);
}

40. 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'
});

41. 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

42. Takeaways

43. Takeaways
• No better time to start developing for Android TV

44. Takeaways
• No better time to start developing for Android TV
• React Native just works

45. Takeaways
• No better time to start developing for Android TV
• React Native just works
• Be creative when designing for Android TV

46. Takeaways
• No better time to start developing for Android TV
• React Native just works
• Be creative when designing for Android TV
• No touch, no keyboard, use focus, microphone, background images

47. Takeaways
• No better time to start developing for Android TV
• React Native just works
• Be creative when designing for Android TV
• No touch, no keyboard, use focus, microphone, background images
• AndroidX (with LeanBack included) support on RN 0.60

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