Bringing the F8 App to Windows with React Native

As some of you may already know, Microsoft is bringing React Native to the Universal Windows Platform. This is an exciting opportunity for React Native developers to reach over 270 million Windows 10 users across phone, Desktop, Xbox and even HoloLens. As part of the effort to bring React Native to Windows, and in partnership with Facebook, we published the F8 Developer Conference app to the Windows Store, using the now recently open sourced F8 codebase.  Here’s a video demonstrating some of the features used from React Native on UWP for the F8 app:

To be completely transparent about engineering effort, which is an important factor when choosing a framework like React Native, the effort to bring the F8 app to Windows took approximately three weeks for a team of three engineers focused exclusively on this app for 80% of their time. When we kicked off the effort, however, some of the core view managers and native modules for React Native on Windows were not available, and none of the third party dependencies had Windows support either. Specifically, there was no SplitView view manager for the menus and filters, no FlipView view manager for paging through the tabs and sessions, and we did not have properly functioning events for drag and content view updates in the ScrollViewer view manager. We also did not have a clipboard module for copy/paste of WiFi details; no asynchronous storage module for navigation state storage; no dialog module for logout and other alert behaviors; nor was there a launcher module for the linking behavior in the Info tab of the app. In terms of third party modules, we were missing the linear gradient view manager, the Facebook SDK module, and the React Native share module.  Some of these, like the launcher module, were half day efforts or less; other more complex modules, like the Facebook SDK module, took time to both discover the proper native API dependencies to consume and time to write and test, and took more than a day.

When it came to shipping the app on the store, there were a number of minor things we had not yet considered, like the fact that managed store apps must be compiled with .NET Native. We ended up being quite lucky, in that the only there were only a small number of mostly .NET APIs (primarily related to reflection) that were not supported in the app when compiled with .NET Native, and we simply had to work around those particular reflected operations.

There was a bit of design and style tweaking to make the F8 app look great on a Windows Phone device.  I won’t go into too many details here, as Facebook has outlined in great detail how platform customization works for React Native between Android and iOS, and the same principles apply to customization for Windows. Excluding all the work on core and third party module parity, and store preparation, there was certainly less than 1 week of 1 developers time dedicated to platform customization and style tweaks in JavaScript.  This is the time estimate that everyone should pay attention to, because in the fullness of time, React Native on UWP will reach feature parity with iOS and Android, and this will be the only effort that developers of cross-platform apps need to worry about. I’ve added a few examples below of how the Windows app is diverged from the iOS and Android apps.

Platform specific styles from the F8 ListContainer module.

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  listView: {
    ios: {
      backgroundColor: 'transparent',
    },
    android: {
      backgroundColor: 'white',
    },
    windows: {
      backgroundColor: 'white',
    }
  },
  headerTitle: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

From F8TabsView.window.js …

class F8TabsView extends React.Component {
  ...

  render() {
    return (
      <F8SplitView
        ref="splitView"
        paneWidth={290}
        panePosition="left"
        renderPaneView={this.renderPaneView}>
        <View style={styles.content} key={this.props.tab}>
          {this.renderContent()}
        </View>
      </F8SplitView>
    );
  }

  ...
}

compared to F8TabsView.android.js …

class F8TabsView extends React.Component {
  ...

  render() {
    return (
      <F8DrawerLayout
        ref="drawer"
        drawerWidth={290}
        drawerPosition="left"
        renderNavigationView={this.renderNavigationView}>
        <View style={styles.content} key={this.props.tab}>
          {this.renderContent()}
        </View>
      </F8DrawerLayout>
    );
  }

  ...
}

and F8TabsView.ios.js

class F8TabsView extends React.Component {
  ...

  render() {
    return (
      <TabBarIOS tintColor={F8Colors.darkText}>
        <TabBarItemIOS>
          ...
        </TabBarItemIOS>
        ...
      </TabBarIOS>
    );
  }

  ...
}

React Native aims to be a “horizontal platform” that is less about “write once, run everywhere” and more “learn once, write anywhere.” While we primarily designed the Windows version of the app around the Android user experience, given more time, we likely would have modified the views and menus to feel more like a Windows app. For example, in XAML, SplitView supports a compact display mode that shows only the icons from a pull out menu when closed. This would have been great for a desktop variant of the app and Continuum. Also in XAML, Pivot is commonly used for paging content, and having Pivot style headers for pages and sessions could have provided a more familiar experience for Windows users.

Overall, we had a very positive experience bringing the F8 Developer Conference app to Windows using React Native, and the experience for bringing your existing React Native apps to Windows is only going to get easier.  We hope that this effort shows that React Native on Windows is more than just an experiment, and with strong support from the community, it poses a great opportunity to reach a broader audience with your apps.

We’ll be talking about this experience and other stories related to bringing React Native to Windows at the DECODED Conference in Dublin, Ireland on May 13^th.  Take a look at how another team at Microsoft was able to get CodePush working for React Native on UWP. Special thanks to Matt Podwysocki and Eero Bragge for all their hard work on getting the F8 Windows app ready in time for F8.