/* @flow */
import { connect } from 'react-redux';
import React, { PureComponent } from 'react';
import { FlatList } from 'react-native';

import type { Dispatch } from '../types';
import { Screen } from '../common';
import UserItem from '../users/UserItem';
import { navigateToAccountDetails } from '../actions';

type Props = {|
  navigation: Object,
  dispatch: Dispatch,
|};

class GroupDetailsScreen extends PureComponent<Props> {
  handlePress = ({ email }) => {
    this.props.dispatch(navigateToAccountDetails(email));
  };

  render() {
    const { recipients } = this.props.navigation.state.params;
    return (
      <Screen title="Recipients" scrollEnabled={false}>
        <FlatList
          initialNumToRender={10}
          data={recipients}
          keyExtractor={item => item.email}
          renderItem={({ item }) => (
            <UserItem
              key={item.email}
              fullName={item.full_name}
              avatarUrl={item.avatar_url}
              email={item.email}
              showEmail
              onPress={this.handlePress}
            />
          )}
        />
      </Screen>
    );
  }
}

export default connect()(GroupDetailsScreen);

@@ -130,16 +130,78 @@
 native';
+%0Aimport type %7B NavigationScreenProp %7D from 'react-navigation';
 %0A%0Aimport
@@ -216,16 +216,27 @@
 Dispatch
+, UserOrBot
  %7D from 
@@ -415,14 +415,71 @@
 on: 
-Object
+NavigationScreenProp%3C%7B params: %7B%7C recipients: UserOrBot%5B%5D %7C%7D %7D%3E
 ,%0A  

Write a real type for `navigation` prop.