Make ReactExample look decent on Android as well

Mission (mostly) Accomplished!

examples/ReactExample/components/styles.js

@@ -6,16 +6,17 @@
 
 const React = require('react-native');
 
-const { Navigator, StyleSheet } = React;
+const { Navigator, Platform, StyleSheet } = React;
+const { NavBarHeight, TotalNavHeight } = Navigator.NavigationBar.Styles.General;
 
-const NAVBAR_HEIGHT = Navigator.NavigationBar.Styles.General.TotalNavHeight;
+const iOS = (Platform.OS == 'ios');
 
 module.exports = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'stretch',
-        backgroundColor: '#ffffff',
+        backgroundColor: '#fff',
     },
     navigator: {
         flex: 1,
@@ -23,11 +24,17 @@ module.exports = StyleSheet.create({
     navBar: {
         backgroundColor: '#f0727d',
     },
+    navBarView: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        height: NavBarHeight,
+    },
     navBarLeftArrow: {
-        fontSize: 36,
+        color: '#fff',
+        fontSize: 40,
         fontWeight: '200',
-        lineHeight: 26,
         letterSpacing: 2,
+        marginTop: -6,
     },
     navBarLeftButton: {
         paddingLeft: 8,
@@ -36,21 +43,21 @@ module.exports = StyleSheet.create({
         paddingRight: 8,
     },
     navBarText: {
-        color: '#ffffff',
+        color: '#fff',
         fontSize: 18,
-        marginVertical: 10,
     },
-    navBarTitle: {
+    navBarTitleText: {
         fontWeight: '500',
     },
     navScene: {
-        top: NAVBAR_HEIGHT,
+        top: TotalNavHeight,
     },
     listItem: {
         borderColor: '#c8c7cc',
         borderBottomWidth: 0.5,
         alignItems: 'stretch',
         alignSelf: 'stretch',
+        justifyContent: 'center',
         flexDirection: 'row',
         flex: 1,
         height: 44,
@@ -64,20 +71,26 @@ module.exports = StyleSheet.create({
     listItemCheckbox: {
         borderColor: '#ccc',
         borderWidth: 1,
-        textAlign: 'center',
         width: 16,
         height: 16,
-        lineHeight: 14,
+    },
+    listItemCheckboxText: {
+        width: 14,
+        height: 14,
+        fontSize: iOS ? 14 : 10,
+        textAlign: 'center',
     },
     listItemCount: {
         borderColor: '#ccc',
         borderWidth: 1,
         borderRadius: 8,
-        textAlign: 'center',
-        fontSize: 12,
         width: 24,
         height: 18,
-        lineHeight: 16,
+    },
+    listItemCountText: {
+        backgroundColor: 'transparent',
+        fontSize: iOS ? 12 : 11,
+        textAlign: 'center',
     },
     listItemInput: {
         fontFamily: 'System',
@@ -86,16 +99,17 @@ module.exports = StyleSheet.create({
         flex: 1,
     },
     listItemText: {
+        alignSelf: 'center',
         fontFamily: 'System',
         fontSize: 15,
         flexDirection: 'column',
         flex: 1,
-        lineHeight: 30,
     },
     listItemTextSpecial: {
         fontStyle: 'italic',
     },
     listItemDelete: {
+        backgroundColor: 'transparent',
         paddingLeft: 12,
         paddingRight: 12,
         flexDirection: 'column',

examples/ReactExample/components/todo-app.js

@@ -12,8 +12,10 @@ const styles = require('./styles');
 
 const {
     Navigator,
+    StatusBarIOS,
     Text,
     TouchableOpacity,
+    View,
 } = React;
 
 class TodoApp extends React.Component {
@@ -43,6 +45,12 @@ class TodoApp extends React.Component {
         return refs.listItemView || refs.listView;
     }
 
+    componentWillMount() {
+        if (StatusBarIOS) {
+            StatusBarIOS.setStyle('light-content');
+        }
+    }
+
     render() {
         let extraItems = [
             {name: 'Complete', items: realm.objects('Todo', 'done = true')},
@@ -155,13 +163,13 @@ const RouteMapper = {
 
         let prevRoute = navState.routeStack[index - 1];
         return (
-            <TouchableOpacity
+            <TouchableOpacity onPress={() => navigator.pop()}>
-                onPress={() => navigator.pop()}
+                <View style={[styles.navBarView, styles.navBarLeftButton]}>
-                style={styles.navBarLeftButton}>
-                <Text style={styles.navBarText}>
                     <Text style={styles.navBarLeftArrow}>‹</Text>
-                    {prevRoute.backButtonTitle || prevRoute.title || 'Back'}
+                    <Text style={styles.navBarText}>
-                </Text>
+                        {prevRoute.backButtonTitle || prevRoute.title || 'Back'}
+                    </Text>
+                </View>
             </TouchableOpacity>
         );
     },
@@ -172,21 +180,23 @@ const RouteMapper = {
         }
 
         return (
-            <TouchableOpacity
+            <TouchableOpacity onPress={route.onRightButtonPress}>
-                onPress={route.onRightButtonPress}
+                <View style={[styles.navBarView, styles.navBarRightButton]}>
-                style={styles.navBarRightButton}>
+                    <Text style={styles.navBarText}>
-                <Text style={styles.navBarText}>
+                        {route.rightButtonTitle}
-                    {route.rightButtonTitle}
+                    </Text>
-                </Text>
+                </View>
             </TouchableOpacity>
         );
     },
 
     Title(route) {
         return (
-            <Text style={[styles.navBarText, styles.navBarTitle]}>
+            <View style={styles.navBarView}>
-                {route.title}
+                <Text style={[styles.navBarText, styles.navBarTitleText]}>
-            </Text>
+                    {route.title}
+                </Text>
+            </View>
         );
     },
 };

examples/ReactExample/components/todo-item.js

@@ -38,9 +38,11 @@ class TodoItem extends TodoListItem {
         return (
             <TouchableWithoutFeedback onPress={this._onPressCheckbox}>
                 <View style={styles.listItemLeftSide}>
-                    <Text style={styles.listItemCheckbox}>
+                    <View style={styles.listItemCheckbox}>
-                        {this.done ? '✓' : ''}
+                        <Text style={styles.listItemCheckboxText}>
-                    </Text>
+                            {this.done ? '✓' : ''}
+                        </Text>
+                    </View>
                 </View>
             </TouchableWithoutFeedback>
         );

examples/ReactExample/components/todo-list-item.js

@@ -8,7 +8,15 @@ const React = require('react-native');
 const realm = require('./realm');
 const styles = require('./styles');
 
-const { Text, TextInput, TouchableWithoutFeedback, View } = React;
+const {
+    Platform,
+    Text,
+    TextInput,
+    TouchableWithoutFeedback,
+    View,
+} = React;
+
+const iOS = (Platform.OS == 'ios');
 
 class TodoListItem extends React.Component {
     constructor(props) {
@@ -90,7 +98,7 @@ class TodoListItem extends React.Component {
         return (
             <TouchableWithoutFeedback onPress={this.props.onPressDelete}>
                 <View style={styles.listItemDelete}>
-                    <Text>𐄂</Text>
+                    <Text>{iOS ? '𐄂' : '×'}</Text>
                 </View>
             </TouchableWithoutFeedback>
         );

examples/ReactExample/components/todo-listview.js

@@ -142,9 +142,11 @@ class TodoListExtraItem extends TodoListItem {
     renderLeftSide() {
         return (
             <View style={styles.listItemLeftSide}>
-                <Text style={styles.listItemCount}>
+                <View style={styles.listItemCount}>
-                    {this.props.item.items.length}
+                    <Text style={styles.listItemCountText}>
-                </Text>
+                        {this.props.item.items.length}
+                    </Text>
+                </View>
             </View>
         );
     }