Add more dynamic styling prop to IconButton

__tests__/ui/components/standardHeader/__snapshots__/StandardHeader.spec.js.snap

@@ -54,7 +54,7 @@ exports[`StandardHeader component renders correctly on Android 1`] = `
           style={
             Array [
               Object {
-                "color": undefined,
+                "color": "#FFFFFF",
                 "fontSize": 24,
               },
               Object {
@@ -158,7 +158,7 @@ exports[`StandardHeader component renders correctly on iOS 1`] = `
           style={
             Array [
               Object {
-                "color": undefined,
+                "color": "#FFFFFF",
                 "fontSize": 24,
               },
               Object {

app/ui/components/button/IconButton.js

 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, ViewPropTypes } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import PropTypes from 'prop-types';
 import Colors from '../../style/Colors';
@@ -8,10 +8,11 @@ const IconButton = props => (
   <TouchableOpacity
     disabled={props.disabled}
     onPress={props.disabled ? null : props.onPress}
+    style={props.style}
   >
     <Icon
       name={props.name}
-      style={props.style}
+      style={props.iconStyle}
       color={props.color}
       size={props.size}
     />
@@ -24,14 +25,16 @@ IconButton.propTypes = {
   color: PropTypes.string,
   disabled: PropTypes.bool,
   size: PropTypes.number,
-  style: Icon.propTypes.style,
+  iconStyle: Icon.propTypes.style,
+  style: ViewPropTypes.style,
 };
 
 IconButton.defaultProps = {
   color: Colors.white,
   disabled: false,
   size: 24,
-  style: Icon.defaultProps.style,
+  iconStyle: Icon.defaultProps.style,
+  style: {},
 };
 
 export default IconButton;

app/ui/components/searchHeader/SearchHeader.js

@@ -37,7 +37,7 @@ class SearchHeader extends Component {
       <IconButton
         onPress={() => (isSearching ? this.updateSearch(false) : leftIconAction())}
         name={isSearching ? 'arrow-back' : leftIcon}
-        style={[styles.leftIcon, isSearching ? styles.magenta : styles.white]}
+        iconStyle={[styles.leftIcon, isSearching ? styles.magenta : styles.white]}
       />
     );
   };
@@ -70,7 +70,7 @@ class SearchHeader extends Component {
         <IconButton
           onPress={() => this.updateSearch(true)}
           name="search"
-          style={[styles.rightIcon, styles.white]}
+          iconStyle={[styles.rightIcon, styles.white]}
         />
       );
     } if (searchKey) {
@@ -78,7 +78,7 @@ class SearchHeader extends Component {
         <IconButton
           onPress={() => this.updateSearchKey('')}
           name="close"
-          style={[styles.rightIcon, styles.gray]}
+          iconStyle={[styles.rightIcon, styles.gray]}
         />
       );
     }

app/ui/components/standardHeader/StandardHeader.js

 import React from 'react';
-import {
-  Text, TouchableOpacity, View, SafeAreaView,
-} from 'react-native';
+import { SafeAreaView, Text, View } from 'react-native';
 import StatusBar from '@react-native-community/status-bar';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import { withNavigation } from 'react-navigation';
 import Colors from '../../style/Colors';
 import styles from './style/StandardHeader';
+import IconButton from '../button/IconButton';
 
 const sceneToTitle = (routeName, t) => {
   switch (routeName) {
@@ -50,16 +48,12 @@ const StandardHeader = props => (
     </View>
     <SafeAreaView style={styles.safeArea}>
       <View style={styles.appBar}>
-        <TouchableOpacity
-          style={styles.iconButton}
+        <IconButton
           onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
-        >
-          <Icon
-            name={props.menu ? 'menu' : 'arrow-back'}
-            style={styles.icon}
-            size={24}
-          />
-        </TouchableOpacity>
+          name={props.menu ? 'menu' : 'arrow-back'}
+          style={styles.iconButton}
+          iconStyle={styles.icon}
+        />
         <Text style={styles.title}>
           {sceneToTitle(props.navigation.state.routeName, props.t)}
         </Text>

app/ui/screens/events/EventAdminScreen.js

 import React, { Component } from 'react';
 import {
-  View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight,
+  FlatList, RefreshControl, ScrollView, Switch, Text, TouchableHighlight, View,
 } from 'react-native';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';

app/ui/screens/photos/AlbumGalleryScreen.js

-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Colors from '../../style/Colors';
 import styles from './style/AlbumDetailScreen';
+import IconButton from '../../components/button/IconButton';
 
 const AlbumGalleryScreen = ({ photos, goBack, selection }) => (
   <View style={styles.screenWrapper}>
@@ -13,17 +12,12 @@ const AlbumGalleryScreen = ({ photos, goBack, selection }) => (
         index={selection}
         imageUrls={photos}
       />
-      <TouchableOpacity
-        style={styles.closeGalleryTouchable}
+      <IconButton
         onPress={goBack}
-      >
-        <Icon
-          name="close"
-          style={styles.icon}
-          size={24}
-          color={Colors.white}
-        />
-      </TouchableOpacity>
+        name="close"
+        style={styles.closeGalleryTouchable}
+        iconStyle={styles.icon}
+      />
     </View>
   </View>
 );

app/ui/screens/profile/ProfileScreen.js

@@ -150,7 +150,7 @@ class ProfileScreen extends Component {
           <IconButton
             onPress={this.props.goBack}
             name="arrow-back"
-            style={styles.icon}
+            iconStyle={styles.icon}
           />
         </Animated.View>
       </Animated.View>