fixed android layout issues

Author: dabit3

index.android.js

@@ -1,15 +1,9 @@
 import React from 'react'
 import { AppRegistry } from 'react-native'
-import { Provider } from 'react-redux'
-import AppRootContainer from './src'
-import configureStore from './src/store/configureStore'
-
-const store = configureStore()
+import AppRootContainer from './src/AppRootContainer'
 
 const HackathonStarter = () => (
-  <Provider store={store}>
-    <AppRootContainer />
-  </Provider>
+  <AppRootContainer />
 )
 
 AppRegistry.registerComponent('HackathonStarter', () => HackathonStarter)

src/App.js

@@ -52,13 +52,25 @@ class App extends Component {
           <About />
         </TabNavigator.Item>
         <TabNavigator.Item
-          tabStyle={selectedTab !== 'contact' && { marginBottom: -6 }}
+          tabStyle={[
+            selectedTab !== 'contact' && { marginBottom: -6 },
+            selectedTab === 'contact' && Platform.OS === 'android' && {marginBottom: -3}
+          ]}
           titleStyle={[styles.titleStyle, {marginTop: -1}]}
-          selectedTitleStyle={[styles.titleSelected, {marginTop: -3, marginBottom: 7}]}
+          selectedTitleStyle={[
+            styles.titleSelected,
+            {marginBottom: 7},
+            Platform.OS === 'android' ? {marginTop: 1 } : {marginTop: -3}
+          ]}
           selected={selectedTab === 'contact'}
           title={selectedTab === 'contact' ? 'CONTACT' : null}
           renderIcon={() => <Icon style={{paddingBottom: 4}} color={colors.grey2} name='contacts' size={26} />}
-          renderSelectedIcon={() => <Icon color={colors.primary} name='contacts' size={26} />}
+          renderSelectedIcon={() => (
+              <Icon
+                color={colors.primary}
+                name='contacts'
+                size={Platform.OS === 'ios' ? 26 : 22 }  />
+            )}
           onPress={() => this.changeTab('contact')}>
           <Contact />
         </TabNavigator.Item>

src/about/About.js

@@ -55,7 +55,6 @@ class About extends Component {
                   <View key={i} style={styles.user}>
                     <Image
                       style={styles.image}
-                      resizeMode='center'
                       source={{uri: u.avatar}} />
                     <RNEText style={styles.name}>{u.name}</RNEText>
                   </View>
@@ -86,9 +85,6 @@ class About extends Component {
               <RNESocialIcon
                 type='tumblr'
               />
-              <RNESocialIcon
-                type='youtube'
-              />
             </View>
           </RNECard>
           <RNECard

src/components/nav/NavBar.js

@@ -11,8 +11,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons'
 
 let styles = {}
 
-const NavigationBar = () => {
-  const src = require('image!logo')
+const NavigationBar = () => { 
   const LeftButton = (route, navigator, index, navState) => {
     if (index > 0) {
       const leftAction = navigator.pop
@@ -37,7 +36,7 @@ const NavigationBar = () => {
       )
     }
     return (
-      <NavTitleIcon src={src} />
+      <NavTitleIcon />
     )
   }
 

src/components/nav/NavTitleIcon.android.js

@@ -0,0 +1,33 @@
+/**
+ * @providesModule HSNavTitleIcon
+ */
+
+import React from 'react'
+import { View, Image, StyleSheet, Dimensions } from 'react-native'
+const { width } = Dimensions.get('window')
+
+let styles = {}
+
+const NavTitleIcon = () => (
+  <View style={styles.iconContainer}>
+    <Image
+      source={require('../../images/logo.png')}
+      style={styles.logo} />
+  </View>
+)
+
+styles = StyleSheet.create({
+  iconContainer: {
+    flex: 1,
+    width: width - 140,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  logo: {
+    width: 136,
+    height: 28,
+    resizeMode: 'contain'
+  }
+})
+
+export default NavTitleIcon

src/components/nav/NavTitleIcon.js renamed to src/components/nav/NavTitleIcon.ios.js

@@ -7,20 +7,20 @@ import { View, Image, StyleSheet } from 'react-native'
 
 let styles = {}
 
-const NavTitleIcon = ({src}) => (
-  <View>
+const NavTitleIcon = () => (
+  <View style={styles.iconContainer}>
     <Image
-      source={src}
+      source={require('image!logo')}
       style={styles.logo} />
   </View>
 )
 
 styles = StyleSheet.create({
-  container: {
+  iconContainer: {
   },
   logo: {
-    resizeMode: 'center',
-    marginTop: -15
+    marginTop: -15,
+    resizeMode: 'center'
   }
 })
 

src/contact/Contact.js

@@ -27,6 +27,7 @@ class Contact extends Component {
         <RNEFormLabel containerStyle={styles.labelContainerStyle}>Phone</RNEFormLabel>
         <RNEFormInput placeholder='Please enter your phone number...' />
         <RNEButton
+          raised
           onPress={() => console.log('yo')}
           icon={{name: 'done'}}
           buttonStyle={{marginTop: 15}}