index.ios.js

'use strict';
import React, { Component, createElement } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  Image,
} from 'react-native';

import CityTourList from './views/tour_list.js'

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return <TouchableOpacity
          onPress={ ()=> navigator.pop() }
        ><Text>BACK</Text></TouchableOpacity>
    }
    else { return null }
  },
  RightButton(route, navigator, index, navState) {
      return null
  },
  Title(route, navigator, index, navState) {
    return <Image
        source={require('./assets/images/logo-small.png')}
      />;
  }
};


class app extends Component {

  render() {

    return (
      <Navigator
        style={{ flex: 1 }}
        initialRoute={{
          title: 'Tour App',
          component: CityTourList,
        }}
        renderScene={(route, navigator) => {
            if (route.component) {
                return createElement(route.component, { route, navigator });
            }
        }}
        navigationBar={
            <Navigator.NavigationBar
              routeMapper={ NavigationBarRouteMapper }
            >
            </Navigator.NavigationBar>
        }/>
    );
  }
}

AppRegistry.registerComponent('app', function() { return app });

tour.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
  Animated,
  ScrollView,
  MapView,
} from 'react-native';
import styles from '../styles.js'
import Cache from '../cache.js'

class TourView extends React.Component {

  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.fetchTour()
  }

  getTour() {
    return this.props.navigator.navigationContext._currentRoute.tourId
  }

  fetchTour() {
    Cache.GET({path: 'tour', data: { tourId: this.getTour() }},
      (data)=> {
        this.setState({
          tour: data,
          loaded: true,
        });
      },
      (error)=> console.warn(error)
    )
  }

  render() {

    return (<MapView
      style={{ position: 'absolute', top:0, bottom:0, left:0, right:0 }}
      initialRegion={{
        latitude: 49.2827,
        longitude: -123.1207,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />)

  }
}


module.exports = TourView;

tour_list.js

import React, {
  Component
} from 'react';

import {
  View,
  ListView,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native';

import styles from '../styles.js';

import TourView from './tour.js'
import Cache from '../cache.js'

class TourList extends React.Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });
    this.state = {
      tours: [],
      dataSource: ds,
      loaded: false,
    }
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    Cache.GET('tours', (tours)=> {
      this.setState({
        tours: tours,
        dataSource: this.state.dataSource.cloneWithRows(tours),
        loaded: true,
      });
    });
  }

  goToTour(rowId){
    this.props.navigator.push({
        name: 'Tour View',
        component: TourView,
        tourId: this.state.dataSource.getRowData(0,rowId).title,
    });
  }


  renderRow(rowData: string, sectionID: number, rowID: number) {
    return (
      <TouchableOpacity
        onPress={ () => this.goToTour(rowID) }
      >
        <Text>rowData.title</Text>
      </TouchableOpacity>
    );
  }

  render() {

    if (!this.state.loaded) {
      return <Text>LOADING...</Text>
    } else {
      return <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
      />
    }

  }

}

module.exports = TourList;