React Native on tvOS

Not many people are aware you can use React Native to create Apple TV apps. This talk will give an overview of how it works, and explore some of the unique challenges you face. In particular it will dive into the process of wrapping the native UISearchController component so we can use it from React Native.

Transcript

1. React Native on tvOS by Neil Kimmett
2. !"#$%&'()*
3. Plan • hi • Build grid view in RN • Wrap grid in tvOS tab bar • Add a native search tab • bye ✌
4. hi @neilkimmett kimmett.me mobile dev since 2011
7. boilerroom.tv
8. RN on tvOS Basics • mostly the same as iOS • input with remote, not touch • a little rough around the edges
9. Lets write some code! grid view, which shows you current selected item
10. FlatList App Card Title of talk Speaker Name
13. FlatList App Card Title of talk Speaker Name
14. Navigation in tvOS • UIViewController • UINavigationController • UITabBarController
15. UITabBarController on iOS
16. UITabBarController on iOS
17. UITabBarController • owns a list of UIViewControllers, one for each tab • each UIViewController owns a UITabBarItem it uses to describe it's tab in the tab bar
18. Navigation libraries - react-navigation JS reimplementation of navigation - airbnb/native-navigation Swift native navigation (beta) - wix/react-native-navigation “a complete native navigation solution”
19. TabBarIOS
20. TabBarIOS <TabBarIOS> <TabBarIOS.Item> // ur dope content </TabBarIOS.Item> </TabBarIOS>
21. FlatList App Card
22. App TabBarIOS TabBarIOS.Item
24. App TabBarIOS TabBarIOS.Item
25. App TabBarIOS Search
26. Objective-C !
27. JS vs ObjC var mittens = new Cat(); Cat *mittens = [[Cat alloc] init];
28. JS vs ObjC var mittens = new Cat(“Mittens”); Cat *mittens = [[Cat alloc] initWithName:@“Mittens”];
29. JS vs ObjC @interface Cat : Animal @property NSString *name; - (instancetype)initWithName:(NSString *)name; @end
30. JS vs ObjC @interface Cat : Animal @property NSString *name; - (Cat *)initWithName:(NSString *)name; @end
31. JS vs ObjC @implementation Cat - (void)throwBall:(Ball *)ball toFriend:(Person *)friend { // … } @end
32. JS vs ObjC mittens.throw(ball, friend); [mittens throwBall:ball toFriend:friend];
33. Native components • inherit from UIView • paired with a Manager class to expose to React https://facebook.github.io/react-native/docs/native-components-ios.html
34. Native components import { requireNativeComponent } from ‘react-native’; var Map = requireNativeComponent('Map', null); <Map /> https://facebook.github.io/react-native/docs/native-components-ios.html
35. App TabBarIOS Search
37. App TabBarIOS NKSearchComponent
38. TabBarIOS NKSearchComponent SearchResults
39. UISearchController
40. UISearchController
41. UISearchController - searchResultsController a UIViewController - searchResultsUpdater some <UISearchResultsUpdating>
42. UISearchContainerController UISearchController TabBarIOS NKSearchComponent NKSearchResultsVC SearchResults
43. TabBarIOS NKSearchComponent UISearchContainerController UISearchController NKSearchResultsVC SearchResults
45. Recap • hi • Build grid view in RN • Wrap grid in tvOS tab bar • Add a native search tab • bye ✌
46. bye ✌ @neilkimmett neil@kimmett.me