import React from 'react';
import {StyleSheet, ScrollView, View, TouchableHighlight} from 'react-native';
import {NavigationContext} from 'navigation-react';
import {SharedElementAndroid, SearchBarIOS} from 'navigation-react-native';

const Colors = ({colors, children}) => (
  <NavigationContext.Consumer>
    {({stateNavigator}) => (
      <ScrollView
        style={styles.scene}
        contentInsetAdjustmentBehavior="automatic">
        <View style={styles.colors}>
          {colors.map(color => (
            <TouchableHighlight
              key={color}
              style={styles.color}
              underlayColor={color}                
              onPress={() => {
                stateNavigator.navigate('detail', {color});
              }}>
              <SharedElementAndroid name={color} style={{flex: 1}}>
                <View style={{backgroundColor: color, flex: 1}} />
              </SharedElementAndroid>
            </TouchableHighlight>
          ))}
          {children}
        </View>
      </ScrollView>
    )}
  </NavigationContext.Consumer>
);

export default class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
  render() {
    const {colors} = this.props;
    const {text} = this.state;
    const matchedColors = colors.filter(color => (
      color.indexOf(text.toLowerCase()) !== -1
    ));
    return (
      <Colors colors={colors}>
        <SearchBarIOS
          text={text}
          autoCapitalize="none"
          obscureBackground={false}
          onChangeText={text => this.setState({text})}>
          <Colors colors={matchedColors} />
        </SearchBarIOS>
      </Colors>
    );
  }
}

const styles = StyleSheet.create({
  scene: {
    backgroundColor: '#fff',
  },
  colors: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    marginTop: 10,
  },
  color: {
    width: 100,
    height: 150,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 20,
  },
});
@@ -180,16 +180,34 @@
 Android,
+ NavigationBarIOS,
  SearchB
@@ -1436,32 +1436,79 @@
 olors=%7Bcolors%7D%3E%0A
+        %3CNavigationBarIOS largeTitle=%7Btrue%7D%3E%0A  
         %3CSearchB
@@ -1513,16 +1513,18 @@
 hBarIOS%0A
+  
         
@@ -1547,16 +1547,18 @@
         
+ 
+ 
 autoCapi
@@ -1571,16 +1571,18 @@
 =%22none%22%0A
+  
         
@@ -1609,16 +1609,18 @@
 %7Bfalse%7D%0A
+  
         
@@ -1673,24 +1673,26 @@
 %3E%0A          
+  
 %3CColors colo
@@ -1721,16 +1721,18 @@
         
+  
 %3C/Search
@@ -1739,16 +1739,44 @@
 BarIOS%3E%0A
+        %3C/NavigationBarIOS%3E%0A
       %3C/

Set large title on zoom colors scene