I don't see how you can make a single cross-platform experience from a single JS / JSX file. The sample has two different main.js files, one for each platform:
// iOS
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
// Android
var React = require('react-native');
var { DrawerLayoutAndroid, ProgressBarAndroid } = React;
How can you determine the platform at runtime and dynamically build the layout for each? I'm guessing, we'll have to expose a native function that returns the active platform, although it seems weird this doesn't already exist.
I wonder why the team decided not to abstract the functionality a bit, like Xamarin did with Forms, so something as common as tab view could be constructed in a cross-platform manner? I understand the urge to keep the platforms feeling native, but a little abstraction could go a long way.
That is by design. React native isn't intended to be write-once, run-anywhere. iOS and Android UIs are just too different for that to work well.
Instead, React Natives gives you a place (javascript) where logic can be shared between iOS and Android, and a common approach to rendering that leads to lots of shared code.
- You can determine the platform with React.Platform -- eg:
var React = require('react-native');
var { Platform } = React;
if (Platform.OS === 'ios') {
// lol steve jobs
} else {
// lol robutts
}
Android also has a `Version` property on `Platform`.
- Certain features are not idiomatic on both platforms: where you might use TabBar on iOS you are going to use a Drawer on Android. NavigatorIOS is a wrapper around UINavigationController that is not maintained as part of the core React Native project, but is a community effort -- nobody at Facebook uses it, and nobody who makes any serious apps with React Native use it either; instead, they use the cross-platform Navigator component, written entirely in JS. Similarly, if you really want to use a TabBar on Android, there exists at least one excellent JS implementations of this that you can use: https://github.com/exponentjs/react-native-tab-navigator
- This is still a very early release! In fact, it is the first day it is released. There are plans to bring the APIs together where it makes sense. For example, SwitchAndroid and SwitchIOS will be brought together under a Switch component that has the same API on both platforms but uses their underlying native implementations.
I wonder why the team decided not to abstract the functionality a bit, like Xamarin did with Forms, so something as common as tab view could be constructed in a cross-platform manner? I understand the urge to keep the platforms feeling native, but a little abstraction could go a long way.