SearchBar.ios.tsx

import React from 'react';
import {
Dimensions,
LayoutAnimation,
NativeModules,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
import { withNavigation } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

var Layout : object = {
window: {
width: Dimensions.get('window').width,
},
};
var SearchContainerHorizontalMargin : number = 10;
var SearchContainerWidth : number =
Layout['window'].width - SearchContainerHorizontalMargin * 2;

var SearchIcon = () => (
<View style={styles['searchIconContainer']}>


);

@withNavigation
class PlaceholderButtonSearchBar extends React.PureComponent {
static defaultProps : object = {
placeholder: 'Search',
placeholderTextColor: '#ccc',
}

render() {
return (
<View style={styles['container']}>
<TouchableWithoutFeedback
hitSlop={{ top: 10, left: 10, bottom: 5, right: 10 }}
onPress={this._handlePress}>
<View style={styles['searchContainer']} pointerEvents='box-only'>
<TextInput
editable={false}
placeholder={this.props.placeholder}
placeholderTextColor={this.props.placeholderTextColor}
selectionColor={this.props.selectionColor}
style={styles['searchInput']}
/>

        <SearchIcon />
      </View>
    </TouchableWithoutFeedback>
  </View>
);
}

_handlePress = () => {
this.props.navigator.push('search');
};
}

@withNavigation
export default class SearchBar extends React.PureComponent {
state : object = {
text: '',
showCancelButton: false,
inputWidth: SearchContainerWidth,
};

_textInput: TextInput;

componentDidMount() {
requestAnimationFrame(() => {
this._textInput.focus();
});
}

_handleLayoutCancelButton = (e: Object) => {
if (this.state['showCancelButton']) {
return;
}

const cancelButtonWidth = e['nativeEvent'].layout.width;

requestAnimationFrame(() => {
  LayoutAnimation.configureNext({
    duration: 200,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.spring,
      springDamping: 0.9,
      initialVelocity: 10,
    },
  });

  this.setState({
    showCancelButton: true,
    inputWidth: SearchContainerWidth - cancelButtonWidth,
  });
});
};

render() {
var { inputWidth , showCancelButton } : any = this.state;
let searchInputStyle = {};
if (this.props.textColor) {
searchInputStyle['color'] = this.props.textColor;
}

return (
  <View style={styles['container']}>
    <View style={[styles['searchContainer'], { width: inputWidth }]}>
      <TextInput
        ref={view => {
          this._textInput = view;
        }}
        clearButtonMode="while-editing"
        onChangeText={this._handleChangeText}
        value={this.state['text']}
        autoCapitalize="none"
        autoCorrect={false}
        returnKeyType="search"
        placeholder="Search"
        placeholderTextColor={this.props.placeholderTextColor || '#ccc'}
        onSubmitEditing={this._handleSubmit}
        style={[styles['searchInput'], searchInputStyle]}
      />

      <SearchIcon />
    </View>

    <View
      key={
        showCancelButton
          ? 'visible-cancel-button'
          : 'layout-only-cancel-button'
      }
      style={[
        styles['buttonContainer'],
        { opacity: showCancelButton ? 1 : 0 },
      ]}>
      <TouchableOpacity
        style={styles['button']}
        hitSlop={{ top: 15, bottom: 15, left: 15, right: 20 }}
        onLayout={this._handleLayoutCancelButton}
        onPress={this._handlePressCancelButton}>
        <Text
          style={{
            fontSize: 17,
            color: this.props.tintColor || '#007AFF',
          }}>
          {this.props.cancelButtonText || 'Cancel'}
        </Text>
      </TouchableOpacity>
    </View>
  </View>
);
}

_handleChangeText = text => {
this.setState({ text });
this.props.onChangeQuery && this.props.onChangeQuery(text);
};

_handleSubmit = () => {
let { text } : any = this.state;
this.props.onSubmit && this.props.onSubmit(text);
this._textInput.blur();
};

_handlePressCancelButton = () => {
if (this.props.onCancelPress) {
this.props.onCancelPress(this.props.navigation.goBack);
} else {
this.props.navigation.goBack();
}
};
}

var styles : object = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
buttonContainer: {
position: 'absolute',
right: 0,
top: 0,
paddingTop: 15,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
button: {
paddingRight: 17,
paddingLeft: 2,
},
searchContainer: {
height: 30,
width: SearchContainerWidth,
backgroundColor: '#f2f2f2',
borderRadius: 5,
marginHorizontal: SearchContainerHorizontalMargin,
marginTop: 10,
paddingLeft: 27,
},
searchIconContainer: {
position: 'absolute',
left: 7,
top: 6,
bottom: 0,
},
searchInput: {
flex: 1,
fontSize: 14,
paddingTop: 1,
},
});