Make text input and the android toolbar cross platform

Author: MarshallOfSound

ios/GooglePlayMusicDesktopRemote/DeviceInfo.m

@@ -6,12 +6,46 @@
 //  Copyright © 2016 Samuel Attard. All rights reserved.
 //
 
+#import "RCTBridge.h"
+#import "RCTEventDispatcher.h"
 #import "DeviceInfo.h"
 
 @implementation DeviceInfo
+@synthesize bridge = _bridge;
+
+- (dispatch_queue_t)methodQueue
+{
+  return dispatch_get_main_queue();
+}
+
+-(void) dealloc{
+  [[NSNotificationCenter defaultCenter] removeObserver: self];
+  [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
+}
+
+- (void)deviceOrientationDidChange:(NSNotification *)notification
+{
+  NSString *oN = @"PORTRAIT";
+  UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
+  
+  if(orientation == 0) //Default orientation
+    oN = @"PORTRAIT";
+  else if(orientation == UIInterfaceOrientationPortrait)
+    oN = @"PORTRAIT";
+  else if(orientation == UIInterfaceOrientationLandscapeLeft)
+    oN = @"LANDSCAPE";
+  else if(orientation == UIInterfaceOrientationLandscapeRight)
+    oN = @"LANDSCAPE";
+  
+  [self.bridge.eventDispatcher sendAppEventWithName:@"orientation"
+                                               body:@{@"orientation": oN}];
+}
 
 RCT_REMAP_METHOD(getDeviceOrientation, resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 {
+  [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
+  [[NSNotificationCenter defaultCenter] addObserver: self selector:   @selector(deviceOrientationDidChange:) name: UIDeviceOrientationDidChangeNotification object: nil];
+
   NSString *oN = @"1";
   UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
 
@@ -31,6 +65,7 @@ @implementation DeviceInfo
   resolve([[UIDevice currentDevice] name]);
 }
 
+
 RCT_EXPORT_MODULE();
 
 @end

src/components/Toolbar.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react'
-import { StyleSheet } from 'react-native'
+import { Platform, TabBarIOS, StyleSheet, View, Text, TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import colors from '../theme/colors'
 
@@ -48,23 +48,47 @@ export default class Toolbar extends Component {
       }
     ]
 
+    if (Platform.OS === 'android') {
+      return (
+        <Icon.ToolbarAndroid
+          navIconName={showDrawer ? 'md-menu' : 'md-arrow-back'}
+          onIconClicked={showDrawer ? drawerFunction : this._backButtonPressed}
+          style={[styles.toolbar, { backgroundColor: color }]}
+          titleColor={'white'}
+          title={title}
+          actions={(settingsMenu ? actions : null)}
+          onActionSelected={this._actionSelected}
+        />
+      )
+    }
+    const search = settingsMenu ? (
+      <TouchableOpacity onPress={() => this.props.navigator.push({ name: 'search' })}>
+        <Icon color="white" size={22} name="md-search" style={{ flex: 0, marginLeft: 14, width: 24 }} />
+      </TouchableOpacity>
+    ) : null
+    const settings = settingsMenu ? (
+      <TouchableOpacity onPress={() => this.props.navigator.push({ name: 'settings' })}>
+        <Icon color="white" size={22} name="md-settings" style={{ flex: 0, marginHorizontal: 14, width: 24 }} />
+      </TouchableOpacity>
+    ) : null
     return (
-      <Icon.ToolbarAndroid
-        navIconName={showDrawer ? 'md-menu' : 'md-arrow-back'}
-        onIconClicked={showDrawer ? drawerFunction : this._backButtonPressed}
-        style={[styles.toolbar, { backgroundColor: color }]}
-        titleColor={'white'}
-        title={title}
-        actions={(settingsMenu ? actions : null)}
-        onActionSelected={this._actionSelected}
-      />
+      <View style={[styles.toolbar, { backgroundColor: color, paddingTop: 22 }]}>
+        <TouchableOpacity onPress={showDrawer ? drawerFunction : this._backButtonPressed}>
+          <Icon color="white" size={22} name={showDrawer ? 'md-menu' : 'md-arrow-back'} style={{ flex: 0, marginLeft: 14, width: 24 }} />
+        </TouchableOpacity>
+        <Text style={{ color: 'white', marginLeft: 8, fontSize: 22, flex: 1 }}>{title}</Text>
+        {search}
+        {settings}
+      </View>
     )
   }
 }
 
 const styles = StyleSheet.create({
   toolbar: {
     height: 56,
-    elevation: 2
+    elevation: 2,
+    flexDirection: 'row',
+    alignItems: 'flex-start'
   }
 })

src/screens/SearchScreen.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react'
-import { ScrollView, StatusBar, StyleSheet, TextInput, View } from 'react-native'
+import { ScrollView, StatusBar, StyleSheet, Text, TextInput, View } from 'react-native'
+import { MKTextField } from 'react-native-material-kit'
 import { observer } from 'mobx-react/native'
 import Toolbar from '../components/Toolbar'
 import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'
@@ -47,16 +48,19 @@ export default class SearchScreen extends Component {
         <Toolbar title={'Search'} navigator={this.props.navigator} color={themeStore.barColor()} />
         <View style={styles.content}>
           <View style={styles.settingsContent}>
-            <TextInput
-              style={{ color: themeStore.foreColor() }}
+            <MKTextField
+              textInputStyle={{ color: themeStore.foreColor() }}
               autoCorrect={true}
               defaultValue={searchStore.searchText}
               keyboardType="web-search"
-              underlineColorAndroid={themeStore.highlightColor()}
+              underlineEnabled
+              underlineSize={2}
+              highlightColor={themeStore.highlightColor()}
               placeholder="Search text here..."
               placeholderTextColor={themeStore.foreColor()}
               onChangeText={this._updateSearchText}
               onSubmitEditing={this._search}
+              tintColor="#999"
             />
           </View>
           <ScrollableTabView

src/screens/SettingsScreen.js

@@ -1,12 +1,9 @@
 import React, { Component, PropTypes } from 'react'
-import { AsyncStorage, StatusBar, StyleSheet, Text, TextInput, View } from 'react-native'
+import { StatusBar, StyleSheet, Text, View } from 'react-native'
 import { observer } from 'mobx-react/native'
-import { getTheme } from 'react-native-material-kit'
+import { MKTextField } from 'react-native-material-kit'
 // import Zeroconf from 'react-native-zeroconf'
 import Toolbar from '../components/Toolbar'
-import colors from '../theme/colors'
-
-const theme = getTheme()
 
 @observer
 export default class SettingsScreen extends Component {
@@ -29,15 +26,17 @@ export default class SettingsScreen extends Component {
         <View style={styles.content}>
           <View style={styles.settingsContent}>
             <Text style={{ color: themeStore.foreColor() }}>GPMDP IP Address</Text>
-            <TextInput
-              style={{ color: themeStore.foreColor() }}
-              autoCorrect={false}
+            <MKTextField
+              textInputStyle={{ color: themeStore.foreColor() }}
               defaultValue={this.props.settingsStore.IP_ADDRESS === 'NOT_SET' ? '' : this.props.settingsStore.IP_ADDRESS}
               keyboardType="numeric"
-              underlineColorAndroid={themeStore.highlightColor()}
+              underlineEnabled
+              underlineSize={2}
+              highlightColor={themeStore.highlightColor()}
               placeholder="GPMDP IP Address"
               placeholderTextColor={themeStore.foreColor()}
               onChangeText={this._ipChanged}
+              tintColor="#999"
             />
           </View>
         </View>