workout-searchbox-no-filter.js

import React, { Component } from 'react'
import {
  View,
  Text,
  ListView,
  TouchableHighlight,
  TextInput,
} from 'react-native'

import Exercise from '../exercise'
import Exercises from './exercises'
import style from './style'

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})

export default class Workout extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dataSource: ds.cloneWithRows(Exercises),
      selectedExercise: null,
      query: '',
    }
    this.handleSearchExercises = this.handleSearchExercises.bind(this)
  }

  handleSearchExercises (event) {
    let searchText = event.nativeEvent.text
    this.setState({query: searchText})
    console.log('query is ', searchText);
  }
  
  onPressRow(rowData) {
    this.setState({selectedExercise: rowData})
  }

  renderRow(rowData, sectionID, rowID) {
     return (
       <TouchableHighlight onPress={this.onPressRow.bind(this, rowData)}>
         <View style={style.listItemContainer}>
          <Text style={style.listItem}>{rowData.title}</Text>
         </View>
      </TouchableHighlight>
     )
  }

  render() {
    const { selectedExercise } = this.state
    return (
      <View style={style.container}>
      { selectedExercise ?
        <Exercise
          title={selectedExercise.title}
          close={ () => {this.setState({selectedExercise: null})} }/>
          : null
      }
        <TextInput
          style={style.input}
          placeholder='Search Exercises'
          value={this.state.query}
          onChange={this.handleSearchExercises}
          returnKeyType='search'
        />
        <ListView
          style={style.list}
          initialListSize={1}
          removeClippedSubviews={false}
          enableEmptySections={true}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
        />
      </View>
    );
  }
}