workouts-with-modals.js

import React, { Component } from 'react'
import {
  View,
  Text,
  ListView,
  TouchableHighlight,
} 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,
    }
  }

  onPressRow(rowData) {
    console.log('This exercise was selected ', rowData.title);
    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
      }
        <ListView
          style={style.list}
          initialListSize={1}
          removeClippedSubviews={false}
          enableEmptySections={true}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
        />
      </View>
    );
  }
}