Merge pull request #92 from rsml/optimize-styles

Fix #91: Optimize styles by using StyleSheet.create() for styles that…

index.js

@@ -10,11 +10,25 @@ import {
   Keyboard,
   Image,
   View,
-  ViewPropTypes
+  ViewPropTypes,
+  StyleSheet
 } from 'react-native';
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
+const optimizedStyles = StyleSheet.create({
+  iconSearchDefault: {
+    tintColor: 'grey'
+  },
+  iconDeleteDefault: {
+    tintColor: 'grey'
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    color: '#fff'
+  }
+})
+
 class Search extends PureComponent {
   constructor(props) {
     super(props);
@@ -417,6 +431,12 @@ const getStyles = (inputHeight, isRtl) => {
     inputHeight = 30
   }
 
+  const {
+    iconSearchDefault,
+    iconDeleteDefault,
+    cancelButtonText
+  } = optimizedStyles;
+
   return {
     container: {
       backgroundColor: 'grey',
@@ -445,30 +465,23 @@ const getStyles = (inputHeight, isRtl) => {
       height: 14,
       width: 14
     },
-    iconSearchDefault: {
-      tintColor: 'grey'
-    },
+    iconSearchDefault,
     iconDelete: {
       position: 'absolute',
       [isRtl ? 'left' : 'right']: 70,
       top: middleHeight - 7,
       height: 14,
       width: 14
     },
-    iconDeleteDefault: {
-      tintColor: 'grey'
-    },
+    iconDeleteDefault,
     cancelButton: {
       justifyContent: 'center',
       alignItems: isRtl ? 'flex-end' : 'flex-start',
       backgroundColor: 'transparent',
       width: 60,
       height: 50
     },
-    cancelButtonText: {
-      fontSize: 14,
-      color: '#fff'
-    }
+    cancelButtonText
   };
 }