Home.js

import React from 'react';
import { 
  ScrollView, 
  StyleSheet, 
  AsyncStorage,
  View,
  Text,
  TouchableOpacity,
  Image
} from 'react-native';

import DialogItem from './Messenger/DialogItem';
import faker from 'faker';
import BotModal from './Messenger/BotModal';

export default class DialogsScreen extends React.Component {
  static navigationOptions = {
    title: 'Диалоги',
  };

  render() {

    
    let { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <ScrollView style={styles.dialogsWrapper}>

          <DialogItem 
            onPress={() => {
              this.botModal.openModal();
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: false,
              date: 1543879638272,
            }}
          />

          <DialogItem 
            onPress={() => {
              navigate('Messages');
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: false,
              date: 1543873378184,
            }}
          />
          
          <DialogItem 
            onPress={() => {
              navigate('Messages');
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: false,
              date: 1543872055586,
            }}
          />

          <DialogItem 
            onPress={() => {
              navigate('Messages');
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: false,
              date: 1543771303577,
            }}
          />

          <DialogItem 
            onPress={() => {
              navigate('Messages');
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: false,
              date: 1543768226427,
            }}
          />

          <DialogItem 
            onPress={() => {
              navigate('Messages');
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: true,
              date: 1543762233155,
            }}
          />

          <DialogItem 
            onPress={() => {
              navigate('Messages');
            }}
            peer={{
              name: faker.name.findName(),
              picture: faker.image.avatar(),
            }}
            message={{
              text: faker.lorem.paragraphs(1),
              unread: true,
              date: 1543685239682,
            }}
          />
        </ScrollView>

        <BotModal ref={r => this.botModal = r} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },

   
});