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
   

   View Slide

2. !"#$%&'()*
   

   View Slide

3. Plan
   • hi
   • Build grid view in RN
   • Wrap grid in tvOS tab bar
   • Add a native search tab
   • bye ✌
   

   View Slide

4. hi
   @neilkimmett
   kimmett.me
   mobile dev since 2011
   

   View Slide

5. View Slide

6. View Slide

7. boilerroom.tv
   

   View Slide

8. RN on tvOS Basics
   • mostly the same as iOS
   • input with remote, not touch
   • a little rough around the edges
   

   View Slide

9. Lets write some code!
   grid view, which shows you current selected item
   

   View Slide

10. FlatList
    App
    Card
    Title of talk
    Speaker Name
    

    View Slide

11. View Slide

12. View Slide

13. FlatList
    App
    Card
    Title of talk
    Speaker Name
    

    View Slide

14. Navigation in tvOS
    • UIViewController
    • UINavigationController
    • UITabBarController
    

    View Slide

15. UITabBarController on iOS
    

    View Slide

16. UITabBarController on iOS
    

    View Slide

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
    

    View Slide

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”
    

    View Slide

19. TabBarIOS
    

    View Slide

20. TabBarIOS
    
    
    // ur dope content
    
    
    

    View Slide

21. FlatList
    App
    Card
    

    View Slide

22. App
    TabBarIOS
    TabBarIOS.Item
    

    View Slide

23. View Slide

24. App
    TabBarIOS
    TabBarIOS.Item
    

    View Slide

25. App
    TabBarIOS
    Search
    

    View Slide

26. 
    Objective-C
    !
    

    View Slide

27. JS vs ObjC
    var mittens = new Cat();
    Cat *mittens = [[Cat alloc] init];
    

    View Slide

28. JS vs ObjC
    var mittens = new Cat(“Mittens”);
    Cat *mittens = [[Cat alloc] initWithName:@“Mittens”];
    

    View Slide

29. JS vs ObjC
    @interface Cat : Animal
    @property NSString *name;
    - (instancetype)initWithName:(NSString *)name;
    @end
    

    View Slide

30. JS vs ObjC
    @interface Cat : Animal
    @property NSString *name;
    - (Cat *)initWithName:(NSString *)name;
    @end
    

    View Slide

31. JS vs ObjC
    @implementation Cat
    - (void)throwBall:(Ball *)ball
    toFriend:(Person *)friend {
    // …
    }
    @end
    

    View Slide

32. JS vs ObjC
    mittens.throw(ball, friend);
    [mittens throwBall:ball toFriend:friend];
    

    View Slide

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
    

    View Slide

34. Native components
    import { requireNativeComponent } from ‘react-native’;
    var Map = requireNativeComponent('Map', null);
    
    https://facebook.github.io/react-native/docs/native-components-ios.html
    

    View Slide

35. App
    TabBarIOS
    Search
    

    View Slide

36. View Slide

37. App
    TabBarIOS
    NKSearchComponent
    

    View Slide

38. TabBarIOS
    NKSearchComponent
    SearchResults
    

    View Slide

39. UISearchController
    

    View Slide

40. UISearchController
    

    View Slide

41. UISearchController
    - searchResultsController
    a UIViewController
    - searchResultsUpdater
    some
    

    View Slide

42. UISearchContainerController
    UISearchController
    TabBarIOS
    NKSearchComponent
    NKSearchResultsVC
    SearchResults
    

    View Slide

43. TabBarIOS
    NKSearchComponent
    UISearchContainerController
    UISearchController
    NKSearchResultsVC
    SearchResults
    

    View Slide

44. View Slide

45. Recap
    • hi
    • Build grid view in RN
    • Wrap grid in tvOS tab bar
    • Add a native search tab
    • bye ✌
    

    View Slide

46. bye ✌
    @neilkimmett
    neil@kimmett.me
    

    View Slide