├── .expo-shared
    └── assets.json
├── .gitignore
├── .idea
    ├── .gitignore
    ├── misc.xml
    ├── modules.xml
    ├── reactNativeApp.iml
    └── vcs.xml
├── App.js
├── app.json
├── assets
    ├── icon.png
    └── splash.png
├── babel.config.js
├── package-lock.json
├── package.json
└── src
    ├── actions
        └── device.js
    ├── components
        ├── deviceList
        │   ├── Device.jsx
        │   └── DeviceList.jsx
        └── navbar
        │   └── Navbar.jsx
    └── reducers
        ├── deviceReducer.js
        └── index.js


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | web-report/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | # Default ignored files
3 | /workspace.xml


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="JSX" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/reactNativeApp.iml" filepath="$PROJECT_DIR$/.idea/reactNativeApp.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/reactNativeApp.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, Text, View } from 'react-native';
 3 | import {applyMiddleware, createStore} from "redux";
 4 | import reducer from './src/reducers/index'
 5 | import {composeWithDevTools} from "redux-devtools-extension";
 6 | import thunk from "redux-thunk";
 7 | import {Provider} from "react-redux";
 8 | import Navbar from "./src/components/navbar/Navbar";
 9 | import DeviceList from "./src/components/deviceList/DeviceList";
10 | 
11 | const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))
12 | 
13 | 
14 | export default function App() {
15 |   return (
16 |       <Provider store={store}>
17 |         <View style={styles.container}>
18 |           <Navbar/>
19 |           <DeviceList/>
20 |         </View>
21 |       </Provider>
22 |   );
23 | }
24 | 
25 | const styles = StyleSheet.create({
26 |   container: {
27 |     flex: 1,
28 |     backgroundColor: '#fff',
29 |     alignItems: 'flex-start',
30 |     justifyContent: 'flex-start',
31 |     width:"100%"
32 |   },
33 |   text: {
34 |     color:"black"
35 |   }
36 | });
37 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "reactNativeApp",
 4 |     "slug": "reactNativeApp",
 5 |     "platforms": [
 6 |       "ios",
 7 |       "android",
 8 |       "web"
 9 |     ],
10 |     "version": "1.0.0",
11 |     "orientation": "portrait",
12 |     "icon": "./assets/icon.png",
13 |     "splash": {
14 |       "image": "./assets/splash.png",
15 |       "resizeMode": "contain",
16 |       "backgroundColor": "#ffffff"
17 |     },
18 |     "updates": {
19 |       "fallbackToCacheTimeout": 0
20 |     },
21 |     "assetBundlePatterns": [
22 |       "**/*"
23 |     ],
24 |     "ios": {
25 |       "supportsTablet": true
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/utimur/ReactNativeElectronicStore/5d51b7a83b03a7e6f37ae3cc0fc40c800b3a5f0c/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/utimur/ReactNativeElectronicStore/5d51b7a83b03a7e6f37ae3cc0fc40c800b3a5f0c/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "expo": "~37.0.3",
13 |     "react": "~16.9.0",
14 |     "react-dom": "~16.9.0",
15 |     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
16 |     "react-native-web": "~0.11.7",
17 |     "react-redux": "^7.2.0",
18 |     "redux": "^4.0.5",
19 |     "redux-devtools-extension": "^2.13.8",
20 |     "redux-thunk": "^2.3.0"
21 |   },
22 |   "devDependencies": {
23 |     "babel-preset-expo": "~8.1.0",
24 |     "@babel/core": "^7.8.6"
25 |   },
26 |   "private": true
27 | }
28 | 


--------------------------------------------------------------------------------
/src/actions/device.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import {setDevices} from "../reducers/deviceReducer";
 3 | 
 4 | const IP_ADDRESS = "192.168.0.13:8080"
 5 | export const getDevices = () => {
 6 |     return async (dispatch) => {
 7 |         try {
 8 |             const response = await axios.get(`http://${IP_ADDRESS}/api/v1/devices/pagination`)
 9 |             dispatch(setDevices(response.data.devices))
10 |         } catch (e) {
11 |             console.log("ERROR")
12 |         }
13 |     }
14 | }


--------------------------------------------------------------------------------
/src/components/deviceList/Device.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {View, Text, StyleSheet, Image} from 'react-native'
 3 | 
 4 | const Device = ({device}) => {
 5 | 
 6 |     return (
 7 |         <View style={styles.container}>
 8 |             <Image style={styles.logo}
 9 |                    source={{
10 |                        uri: `data:image/png;base64,${device.image}`,
11 |                    }}
12 |             />
13 |             <View style={styles.desc}>
14 |                 <View>
15 |                     <Text style={styles.text}>{device.brandName}</Text>
16 |                     <Text style={styles.text}>{device.name}</Text>
17 |                 </View>
18 |                 <View style={styles.price}>
19 |                     <Text style={styles.text}>{device.price}</Text>
20 |                 </View>
21 |             </View>
22 |         </View>
23 |     );
24 | };
25 | 
26 | export default Device;
27 | 
28 | const styles = StyleSheet.create({
29 |     container:{
30 |         flexDirection: "row",
31 |         marginTop:10
32 |     },
33 |     text: {
34 |         color:"black",
35 |         fontSize: 20
36 |     },
37 |     logo: {
38 |         marginLeft:5,
39 |         height:50,
40 |         width:50,
41 |         marginRight:20,
42 |         borderWidth:1,
43 |         borderColor:"black",
44 |         borderRadius:50,
45 | 
46 |     },
47 |     desc:{
48 |         flexDirection: "row",
49 |         justifyContent:"space-between",
50 | 
51 |     },
52 | 
53 | })
54 | 
55 | 


--------------------------------------------------------------------------------
/src/components/deviceList/DeviceList.jsx:
--------------------------------------------------------------------------------
 1 | import React, {useEffect} from 'react';
 2 | import {ScrollView, StyleSheet} from "react-native";
 3 | import {useDispatch, useSelector} from "react-redux";
 4 | import Device from "./Device";
 5 | import {getDevices} from "../../actions/device";
 6 | 
 7 | const DeviceList = () => {
 8 |     const dispatch = useDispatch()
 9 |     const devices = useSelector(state => state.deviceReducer.devices)
10 | 
11 |     useEffect(()=>{
12 |         dispatch(getDevices())
13 |     }, [])
14 | 
15 |     return (
16 |         <ScrollView>
17 |             {devices.map(device=>
18 |                 <Device key={device.id} device={device}/>
19 |             )}
20 |         </ScrollView>
21 |     );
22 | };
23 | 
24 | export default DeviceList;
25 | 
26 | 


--------------------------------------------------------------------------------
/src/components/navbar/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {View, StyleSheet, Text, Button} from "react-native"
 3 | 
 4 | const Navbar = (props) => {
 5 |     return (
 6 |         <View style={styles.navbar}>
 7 |             <Text style={styles.text}>Device Store</Text>
 8 |             <Button style={styles.button} title="Menu" color="red"/>
 9 |         </View>
10 |     );
11 | };
12 | 
13 | export default Navbar;
14 | 
15 | const styles = StyleSheet.create({
16 |     navbar: {
17 |         backgroundColor:"black",
18 |         height:50,
19 |         width: "100%",
20 |         flexDirection: "row",
21 |         alignItems: "flex-end",
22 |         justifyContent:"space-between",
23 |     },
24 |     text: {
25 |         color:"white",
26 |         fontSize: 24,
27 |     },
28 |     button: {
29 |         color:"white",
30 |         padding:10
31 |     }
32 | })


--------------------------------------------------------------------------------
/src/reducers/deviceReducer.js:
--------------------------------------------------------------------------------
 1 | const SET_DEVICES = "SET_DEVICES"
 2 | 
 3 | const defaultState = {
 4 |     devices: []
 5 | }
 6 | 
 7 | 
 8 | export default function deviceReducer(state = defaultState, action) {
 9 |     switch (action.type) {
10 |         case SET_DEVICES:
11 |             return {
12 |                 ...state,
13 |                 devices: action.payload
14 |             }
15 | 
16 |         default:
17 |             return state
18 |     }
19 | }
20 | 
21 | 
22 | export const setDevices = (devices) => ({type:SET_DEVICES, payload: devices})


--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from "redux";
2 | import deviceReducer from "./deviceReducer";
3 | 
4 | export default combineReducers({
5 |     deviceReducer,
6 | })


--------------------------------------------------------------------------------