WeatherPage.js

import React, {
  Component,
  PropTypes,
} from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import Color from '../services/color';

import Header from '../components/Header';
import WeatherGraph from './WeatherGraph';

// eslint-disable-next-line react/prefer-stateless-function
export default class WeatherPage extends Component {
  static propTypes = {
    changeAddress: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired,
    data: PropTypes.object.isRequired,
  }

  render() {
    const {
      name,
      changeAddress,
      data: graphData,
    } = this.props;

    const graphProps = {};
    graphProps.data = graphData.daily.data;
    graphProps.xAccessor = (d) => new Date(d.time * 1000);
    graphProps.yAccessor = (d) => d.temperatureMax;

    return (
      <View style={styles.container}>
        <Header>
          <TouchableOpacity
            style={styles.headerButton}
            onPress={changeAddress}
          >
            <Text style={styles.headerText}>
              {name}
            </Text>
          </TouchableOpacity>
        </Header>
        <View style={styles.content}>
          <WeatherGraph {...graphProps} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.White,
  },
  headerButton: {
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: Color.BlueDark,
  },
  content: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});