#2, добавлен вывод полной информации по клику на контакт

components/Contact/Contact.js

@@ -5,7 +5,7 @@ const Contact = props => {
   return (
     <TouchableOpacity style={styles.placeItem} onPress={props.showContact}>
       <Image source={{uri: props.photo}} style={styles.image}/>
-      <Text style={{textTransform: 'uppercase'}}>{props.name}</Text>
+      <Text style={styles.text}>{props.name}</Text>
     </TouchableOpacity>
   );
 };
@@ -18,14 +18,17 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '100%',
-    backgroundColor: '#eee',
+    backgroundColor: 'rgba(1,1,1,0.7)',
     marginBottom: 10,
     padding: 10,
-    
+    borderRadius: 5
   },
   image: {
     width: 60,
     height: 60,
     marginRight: 10
+  },
+  text: {
+    color: '#eee'
   }
 });

components/FullContact/FullContact.js

+import React from 'react';
+import {StyleSheet, Image, Text, TouchableHighlight, View} from "react-native";
+
+const FullContact = props => {
+    return (
+        <View style={{marginTop: 22,  flex: 1}}>
+            <View>
+                <Image source={{uri: props.contact.photo}} style={styles.image}/>
+                <Text style={styles.contactProps}>Name: {props.contact.name}</Text>
+                <Text style={styles.contactProps}>Mail: {props.contact.email}</Text>
+                <Text style={styles.contactProps}>Phone: {props.contact.phone}</Text>
+            </View>
+            <TouchableHighlight
+                onPress={props.closeModal}
+                style={styles.btn}>
+                <Text style={styles.text}>Hide Modal</Text>
+            </TouchableHighlight>
+        </View>
+    );
+};
+
+export default FullContact;
+
+
+const styles = StyleSheet.create({
+    image: {
+        width: 200,
+        height: 200,
+        marginRight: 10
+    },
+    btn: {
+        position: 'absolute',
+        bottom: 0,
+        padding: 20,
+        borderRadius: 5,
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        width: '100%'
+    },
+    contactProps: {
+        fontWeight: 'bold',
+        fontSize: 18,
+        marginTop: 10,
+
+    },
+    text: {
+        fontSize: 24,
+        textAlign: 'center',
+        color: 'white'
+    }
+});
\ No newline at end of file

containers/Main/Main.js

@@ -3,19 +3,24 @@ import {StyleSheet, Modal, View, Text, FlatList} from "react-native";
 import {connect} from "react-redux";
 import {getContacts} from "../../store/actions";
 import Contact from "../../components/Contact/Contact";
-
+import ContactInfo from "../../components/FullContact/FullContact";
 
 class Main extends Component {
     state = {
-        chosenContact: {}
+        modalShow: false,
+        contact: {}
     };
 
     componentDidMount() {
         this.props.getContacts();
     }
 
+    setModalShow(val) {
+        this.setState({modalShow: val});
+    }
+
     chooseContact = (contact) => {
-        this.setState({chosenContact: contact, modalVisible: true});
+        this.setState({contact, modalShow: true});
     };
 
     render() {
@@ -33,7 +38,19 @@ class Main extends Component {
         }
         return (
             <View style={styles.main}>
-                <Text style={styles.heading}>
+                <Modal
+                    animationType="slide"
+                    transparent={false}
+                    visible={this.state.modalShow}
+                    onRequestClose={() => {
+                        this.setModalShow(!this.state.modalShow);
+                    }}>
+                    <ContactInfo
+                        contact={this.state.contact}
+                        closeModal={() => this.setState({modalShow: false})}
+                    />
+                </Modal>
+                <Text style={styles.title}>
                     Contacts
                 </Text>
                 <FlatList
@@ -64,19 +81,16 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Main);
-
 const styles = StyleSheet.create({
-    heading: {
-        fontSize: 32,
-        borderColor: 'transparent',
-        borderStyle: 'solid',
-        borderWidth: 2,
-        borderBottomColor: 'black',
+    title: {
+        fontSize: 30,
+        textTransform: 'uppercase',
         marginBottom: 20
     },
     main: {
-        height: '100%',
-        marginTop: 150,
+        backgroundColor: '#ccc',
+        flex: 1,
+        justifyContent: 'flex-start',
         padding: 40
     }
 });
\ No newline at end of file

store/actions.js

 import axios from '../axios-contacts';
-
-export const FETCH_CONTACTS_REQUEST = 'FETCH_CONTACTS_REQUEST';
-export const FETCH_CONTACTS_SUCCESS = 'FETCH_CONTACTS_SUCCESS';
-export const FETCH_CONTACTS_ERROR = 'FETCH_CONTACTS_ERROR';
+import {FETCH_ERROR, FETCH_REQUEST, FETCH_SUCCESS} from "./actionsType";
 
 
 export const fetchContactsRequest = () => {
-  return {type: FETCH_CONTACTS_REQUEST};
+  return {type: FETCH_REQUEST};
 };
 
 export const fetchContactsSuccess = contacts => {
-  return {type: FETCH_CONTACTS_SUCCESS, contacts};
+  return {type: FETCH_SUCCESS, contacts};
 };
 
 export const fetchContactsError = error => {
-  return {type: FETCH_CONTACTS_ERROR, error};
+  return {type: FETCH_ERROR, error};
 };
 
 

store/actionsType.js

+export const FETCH_REQUEST = 'FETCH_REQUEST';
+export const FETCH_SUCCESS = 'FETCH_SUCCESS';
+export const FETCH_ERROR = 'FETCH_ERROR';
\ No newline at end of file

store/reducer.js

-import {FETCH_CONTACTS_ERROR, FETCH_CONTACTS_REQUEST, FETCH_CONTACTS_SUCCESS} from "./actions";
+import {FETCH_ERROR, FETCH_REQUEST, FETCH_SUCCESS} from "./actionsType";
 
 const initialState = {
   loading: false,
@@ -8,11 +8,11 @@ const initialState = {
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
-    case FETCH_CONTACTS_REQUEST:
+    case FETCH_REQUEST:
       return {...state, loading: true};
-    case FETCH_CONTACTS_SUCCESS:
+    case FETCH_SUCCESS:
       return {...state, loading: false, contacts: action.contacts};
-    case FETCH_CONTACTS_ERROR:
+    case FETCH_ERROR:
       return {...state, loading: false, error: action.error};
     default:
       return state;