app.ios.js

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  ScrollView,
  TouchableHighlight,
  ListView
} = React;

class CommuteTimer extends React.Component{
    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            commutes: [],
            dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2' ]),
        }
    }
    render() {
        return(
            <View style={styles.container}>
                <ListView
                  style={{marginTop: 80}}
                  dataSource={this.state.dataSource}
                  renderRow={(rowData) => <View><Text style={styles.row}>{rowData}</Text><View style={styles.seperator}></View></View> }
                />
                <NavButton text="+ New Commute" />
            </View>
        )
    }
}

class MainView extends React.Component{
    render() {  
        return(
             <Navigator
                initialRoute={{name: 'My First Scene'}}
                title={'Hi'}
                renderScene={(route, navigator) =>
                  <CommuteTimer
                    name={route.name}
                    title={'Holler'}
                  />
                }
            />
        )
    }
}

class NavButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#B5B5B5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}


var styles = StyleSheet.create({
  buttonText: {
    paddingTop: 8,
    paddingBottom: 8,
    textAlign: 'center',
    color: 'rgba(0,0,0,.7)',
    fontSize: 16,
    fontWeight: 'bold',
    margin: 10,
  },
  row: {
    padding: 20,
  },
  seperator: {
    height: 1,
    backgroundColor:'#CCC'
  },
  button: {
    backgroundColor: "#73D1F8",
    margin: 10,
    borderRadius: 6,
    bottom: 10,
    position: 'absolute',
    right: 0,
    left: 0
  },
  container: {
    paddingTop: 20,
    marginTop: 0,
    flex: 1,
    backgroundColor: '#eee'
  },
});

AppRegistry.registerComponent('CommuteTimer', () => CommuteTimer);