ProfileNavigator.js

import React from 'react';
import { View, Text, Platform, Image, TouchableOpacity  } from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import ProfileScreen from './ProfileScreen';
import OtherScreen from '../OtherScreen';
import ProfileDrawer from './ProfileDrawer';
import images from 'res/images';

const routeConfig = {
    ProfileStackNavigator: {
      screen: createStackNavigator({
      Profile: {
          screen: ProfileScreen,
          navigationOptions: ({ navigation }) => ({
            headerStyle: {
              backgroundColor: '#222',
            },
            headerTintColor: '#FFF',
            headerTitleStyle: {
              fontFamily: Platform.OS === 'ios' ? 'Futura' : 'Roboto',
            },
            headerLeft: () => (
              <View style={{ marginLeft: 20, flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                <Text style={{ color: '#fff', marginLeft: 10, fontSize: 18, fontWeight: 'bold' }} >ozaferayan</Text>
              </View>
            ),
            headerRight: () => (
              <View style={{ marginRight: 20, flex: 1, flexDirection: 'row', alignItems: 'flex-start' }}>
                <TouchableOpacity onPress={() => navigation.openDrawer()}>
                  <Image style={{ height: 25, width: 25, resizeMode: 'contain' }} source={images.menu} />
                </TouchableOpacity>
              </View>
            )
          })
        }
      })
    },
    Archive: {
      screen: OtherScreen,
      navigationOptions: {
        drawerLabel: "Demo Screen 1"
      }
    }
  };

  const navigatorConfig = {
    drawerPosition: 'right',
    drawerType: 'slide',
    contentComponent: ProfileDrawer,
  }

  export default ProfileNavigator = createDrawerNavigator(routeConfig, navigatorConfig);

ProfileScreen.js

import React from 'react';
import { View, Text, Image, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
import images from 'res/images';
import colors from 'res/colors';

const ProfileScreen = () => {

  const profileData = {
    name: 'Zafer AYAN',
    url: 'https://github.com/ozcanzaferayan',
    bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit justo, sodales sit amet pulvinar quis, egestas eu justo. Phasellus elit volutpat..',
    statistics: {
      posts: 348,
      followers: 187,
      following: 431
    }
  };
  const dataSource = [{ key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }, { key: '6' }, { key: '7' }, { key: '8' }, { key: '9' }, { key: '10' }, { key: '11' }, { key: '12' }, { key: '13' },];
  renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={{ flex: 1, aspectRatio: 1 }}>
        <Image style={{ flex: 1 }} resizeMode='cover' source={{ uri: 'https://picsum.photos/512' }}></Image>
      </TouchableOpacity>
    );
  }

  renderProfileHeader = () => {
    return (
      <View style={styles.bioContainer}>
        <View style={styles.profileImageSection}>
          <Image source={images.zafer} style={styles.profileImage} />
          <View style={{ alignItems: 'center' }} >
            <Text style={styles.statisticsValue}>{profileData.statistics.posts}</Text>
            <Text style={styles.statisticsTitle}>Gönderiler</Text>
          </View>
          <View style={{ alignItems: 'center' }} >
            <Text style={styles.statisticsValue}>{profileData.statistics.followers}</Text>
            <Text style={styles.statisticsTitle}>Takipçi</Text>
          </View>
          <View style={{ alignItems: 'center' }} >
            <Text style={styles.statisticsValue}>{profileData.statistics.following}</Text>
            <Text style={styles.statisticsTitle}>Takip</Text>
          </View>
        </View>
        <Text style={styles.name}>{profileData.name}</Text>
        <Text style={styles.bio}>{profileData.bio}</Text>
        <Text style={styles.link} onPress={() => Linking.openURL(profileData.url)}>
          {profileData.url}
        </Text>
        <TouchableOpacity style={styles.editProfileButton}>
          <Text style={styles.editProfileText}>Profili Düzenle</Text>
        </TouchableOpacity>

      </View>
    );
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={dataSource}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.key}
        numColumns={3}
        ListHeaderComponent={this.renderProfileHeader}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { backgroundColor: colors.tabBackground, flex: 1, },
  bioContainer: { padding: 20, },
  profileImageSection: { alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', },
  profileImage: { width: 75, height: 75, borderRadius: 75, },
  statisticsValue: { color: colors.text, fontSize: 18, fontWeight: 'bold', },
  statisticsTitle: { color: colors.text, fontSize: 15, fontWeight: 'normal' },
  name: { color: colors.text, marginTop: 10, },
  bio: { color: colors.text, marginTop: 0, },
  link: { color: colors.link, },
  editProfileButton: { marginTop: 10, backgroundColor: colors.background, borderColor: colors.seperator, borderRadius: 3, borderWidth: 1, padding: 5, },
  editProfileText: { color: colors.text, textAlign: 'center', fontWeight: 'normal' },
});

export default ProfileScreen;