profileComponent.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  Image,
  FlatList,
  Button,
  TouchableHighlight,
  ActivityIndicator
} from 'react-native'

class Profile extends Component {
  constructor (props) {
    this.setState({
      refreshing: false
    })
  }

  _refreshHandler = () => {
    const { reload } = this.props

    this.setState(
      {
        refreshing: true
      },
      () => {
        reload().then(() => {
          this.setState({
            refreshing: false
          })
        })
      }
    )
  }

  _renderItem = ({ item }) => {
    return <Text>Hello!</Text>
  }

  _onFollowersClick = () => {
    const { navigation: { navigate }, user: { id } } = this.props

    navigate('Followers', { userId: id })
  }

  _renderHeader = () => {
    const { displayName, userAddress, followersCount, followingCount } = this.props

    return (
      <View>
        <Image
          style={styles.coverImg}
          source={{
            uri: 'http://lorempixel.com/1024/768/abstract'
          }}
        />
        <View style={styles.coverImgOverlay} />
        <View style={styles.parallaxHeader}>
          <View style={styles.userInfo}>
            <Image
              style={styles.avatar}
              source={{
                uri:
                  avatarUrl ||
                  `http://loremflickr.com/${AVATAR_SIZE}/${AVATAR_SIZE}/girl`,
                width: AVATAR_SIZE,
                height: AVATAR_SIZE
              }}
            />
            <Text style={styles.usernameText}>{displayName}</Text>
            <Text style={styles.addressText}>{userAddress}</Text>
          </View>
          <View style={styles.controlsBottom}>
            <TouchableHighlight
              onPress={this._onFollowersClick()}
            >
              <Text style={styles.textButton}>Followers {followersCount}</Text>
            </TouchableHighlight>
            <TouchableHighlight
              onPress={() => {
                const { navigation: { navigate }, user: { id } } = this.props
                navigate('Followings', { userId: id })
              }}
            >
              <Text style={styles.textButton}>Followings {followingCount}</Text>
            </TouchableHighlight>
          </View>
        </View>
      </View>
    )
  }

  render () {
    return (
      <FlatList
        ListHeaderComponent={this._renderHeader()}
        style={styles.container}
        data={this.props.edges.map(({ user }) => user.name)}
        keyExtractor={({ id }) => `${id}`}
        renderItem={this._renderItem}
        onRefresh={this._refreshHandler}
        refreshing={refreshing}
        onEndReached={loadMoreActivities}
      />
    )
  }
}

const AVATAR_SIZE = 85
const HEADER_HEIGHT = 275

const styles = StyleSheet.create({
    ...
})