#1, получены и выведены на страницу данные из firebase

.gitignore

@@ -8,6 +8,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.idea
 web-report/
 
 # macOS

App.js

 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import {Provider} from "react-redux";
+import Main from "./containers/Main/Main";
+import {applyMiddleware, compose, createStore} from "redux";
+import thunk from "redux-thunk";
+import reducer from "./store/reducer";
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(
+    reducer,
+    composeEnhancers(applyMiddleware(thunk))
+);
+
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-    </View>
+      <Provider store={store}>
+        <Main/>
+      </Provider>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

axios-contacts.js

+import axios from "axios";
+
+const instance = axios.create({
+    baseURL: "https://homeworks-33ebc.firebaseio.com/"
+});
+
+export default instance;

components/Contact/Contact.js

+import React from 'react'
+import {Text, StyleSheet, TouchableOpacity, Image} from "react-native";
+
+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>
+    </TouchableOpacity>
+  );
+};
+
+export default Contact;
+
+const styles = StyleSheet.create({
+  placeItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: '#eee',
+    marginBottom: 10,
+    padding: 10,
+    
+  },
+  image: {
+    width: 60,
+    height: 60,
+    marginRight: 10
+  }
+});

containers/Main/Main.js

+import React, {Component} from 'react';
+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";
+
+
+class Main extends Component {
+    state = {
+        chosenContact: {}
+    };
+
+    componentDidMount() {
+        this.props.getContacts();
+    }
+
+    chooseContact = (contact) => {
+        this.setState({chosenContact: contact, modalVisible: true});
+    };
+
+    render() {
+        let contacts = [];
+        for (let contact in this.props.contacts) {
+            let contactProps = this.props.contacts[contact];
+            contacts.push(
+                {
+                    id: contact,
+                    photo: contactProps.photo,
+                    name: contactProps.name,
+                    email: contactProps.email,
+                    phone: contactProps.phone
+                })
+        }
+        return (
+            <View style={styles.main}>
+                <Text style={styles.heading}>
+                    Contacts
+                </Text>
+                <FlatList
+                    data={contacts}
+                    renderItem={contact => (
+                        <Contact
+                            photo={contact.item.photo}
+                            name={contact.item.name}
+                            showContact={() => this.chooseContact(contact.item)}/>)}
+                    keyExtractor={contact => contact.id}
+                />
+            </View>
+        );
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        contacts: state.contacts
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        getContacts: () => dispatch(getContacts())
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Main);
+
+const styles = StyleSheet.create({
+    heading: {
+        fontSize: 32,
+        borderColor: 'transparent',
+        borderStyle: 'solid',
+        borderWidth: 2,
+        borderBottomColor: 'black',
+        marginBottom: 20
+    },
+    main: {
+        height: '100%',
+        marginTop: 150,
+        padding: 40
+    }
+});

package.json

@@ -8,11 +8,15 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "expo": "~37.0.3",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
-    "react-native-web": "~0.11.7"
+    "react-native-web": "~0.11.7",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "babel-preset-expo": "~8.1.0",

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';
+
+
+export const fetchContactsRequest = () => {
+  return {type: FETCH_CONTACTS_REQUEST};
+};
+
+export const fetchContactsSuccess = contacts => {
+  return {type: FETCH_CONTACTS_SUCCESS, contacts};
+};
+
+export const fetchContactsError = error => {
+  return {type: FETCH_CONTACTS_ERROR, error};
+};
+
+
+export const getContacts = () => {
+  return dispatch => {
+    dispatch(fetchContactsRequest());
+    axios.get('/contacts.json')
+      .then(res => {
+        let contacts = res.data;
+        dispatch(fetchContactsSuccess(contacts));
+      }, err => {
+        dispatch(fetchContactsError(err));
+      });
+  };
+};
\ No newline at end of file

store/reducer.js

+import {FETCH_CONTACTS_ERROR, FETCH_CONTACTS_REQUEST, FETCH_CONTACTS_SUCCESS} from "./actions";
+
+const initialState = {
+  loading: false,
+  error: null,
+  contacts: {}
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_CONTACTS_REQUEST:
+      return {...state, loading: true};
+    case FETCH_CONTACTS_SUCCESS:
+      return {...state, loading: false, contacts: action.contacts};
+    case FETCH_CONTACTS_ERROR:
+      return {...state, loading: false, error: action.error};
+    default:
+      return state;
+  }
+};
+
+export default reducer
\ No newline at end of file