Create meeting screen

.gitignore

@@ -11,6 +11,7 @@ web-build/
 web-report/
 
 run_pixel_emulator_script.bat
+app.json
 vscode
 .vscode
 .vscode/*
@@ -22,7 +23,5 @@ vscode
 
 __snapshots__
 
-run_pixel_emulator_script.bat
-
 # macOS
 .DS_Store

App.js

@@ -8,13 +8,14 @@ import { createStore } from 'redux';
 import Basic from './src/screens/register/basic';
 import PictureUpload from './src/screens/register/pictureUpload';
 import OtherInfo from './src/screens/register/otherInfo';
-import { screenWithoutMenu } from './src/tools/showMenu';
+import { screenWithoutMenu, screenWithMenu } from './src/tools/showMenu';
 import reducer from './src/redux/reducers/reducer';
 import EducationInfo from './src/screens/register/educationInfo';
 import AddFriends from './src/screens/register/addFriends';
 import Login from './src/screens/login/login';
 import NewPassword from './src/screens/login/newPassword';
 import ForgotPassword from './src/screens/login/forgotPassword';
+import SingleMeeting from './src/screens/meeting/singleMeeting';
 
 const Stack = createStackNavigator();
 
@@ -40,15 +41,12 @@ const App = () => {
           <NavigationContainer>
             <Stack.Navigator>
               <Stack.Screen
-                name="Register"
-                component={Basic}
-                options={screenWithoutMenu}
-              />
-              <Stack.Screen
-                name="Login"
-                component={Login}
-                options={screenWithoutMenu}
+                name="SingleMeeting"
+                component={SingleMeeting}
+                options={screenWithMenu}
               />
+              <Stack.Screen name="Register" component={Basic} options={screenWithoutMenu} />
+              <Stack.Screen name="Login" component={Login} options={screenWithoutMenu} />
               <Stack.Screen
                 name="ForgotPassword"
                 component={ForgotPassword}
@@ -64,21 +62,13 @@ const App = () => {
                 component={PictureUpload}
                 options={screenWithoutMenu}
               />
-              <Stack.Screen
-                name="OtherInfo"
-                component={OtherInfo}
-                options={screenWithoutMenu}
-              />
+              <Stack.Screen name="OtherInfo" component={OtherInfo} options={screenWithoutMenu} />
               <Stack.Screen
                 name="EducationInfo"
                 component={EducationInfo}
                 options={screenWithoutMenu}
               />
-              <Stack.Screen
-                name="AddFriends"
-                component={AddFriends}
-                options={screenWithoutMenu}
-              />
+              <Stack.Screen name="AddFriends" component={AddFriends} options={screenWithoutMenu} />
             </Stack.Navigator>
           </NavigationContainer>
         </Provider>

app.json → app_template.json

@@ -4,11 +4,7 @@
     "slug": "viv",
     "privacy": "public",
     "sdkVersion": "36.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -20,11 +16,19 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
+    "android": {
+      "config": {
+        "googleMaps": {
+          "apiKey": ""
+        }
+      }
+    },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "config": {
+        "googleMapsApiKey": ""
+      }
     }
   }
 }

package.json

@@ -37,7 +37,8 @@
     "react-redux": "^7.2.0",
     "react-test-renderer": "^16.12.0",
     "redux": "^4.0.5",
-    "expo-font": "~8.0.0"
+    "expo-font": "~8.0.0",
+    "react-native-maps": "0.26.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

src/components/common/containers/content-container/container.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, View } from 'react-native';
+import { StyleSheet, ScrollView, View } from 'react-native';
 import PropTypes from 'prop-types';
 import { MAIN_BACKGROUND_COLOR } from '../../../../constants/theme/colors';
 
@@ -12,22 +12,26 @@ const styles = StyleSheet.create({
     paddingHorizontal: 30,
     alignItems: 'center',
     justifyContent: 'flex-start',
-    paddingVertical: 50,
   },
 });
 
-const ContentContainer = ({ children }) => (
-  <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-    <View style={styles.cc}>
-      <ScrollView nestedScrollEnabled contentContainerStyle={styles.container}>
-        {children}
-      </ScrollView>
-    </View>
-  </TouchableWithoutFeedback>
+const isFullScreen = (fullScreen) => ({ paddingVertical: fullScreen ? 0 : 50 });
+
+const ContentContainer = ({ children, fullScreen }) => (
+  <View style={[styles.cc, isFullScreen(fullScreen)]}>
+    <ScrollView nestedScrollEnabled contentContainerStyle={styles.container}>
+      {children}
+    </ScrollView>
+  </View>
 );
 
+ContentContainer.defaultProps = {
+  fullScreen: false,
+};
+
 ContentContainer.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  fullScreen: PropTypes.bool,
 };
 
 export default ContentContainer;

src/components/common/input/input.jsx

@@ -1,11 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { View, TextInput, Text } from 'react-native';
-import { SimpleLineIcons, MaterialCommunityIcons } from '@expo/vector-icons';
+
+import { SimpleLineIcons, MaterialCommunityIcons, Ionicons, FontAwesome } from '@expo/vector-icons';
 import PropTypes from 'prop-types';
 import styles from './styles';
 import { MAIN_TEXT_COLOR, MAIN_THEME_COLOR } from '../../../constants/theme/colors';
 import validate from '../../../tools/validators/validate';
 
+const iconStyle = {
+  width: 34,
+  textAlign: 'center',
+};
+
 const Input = ({
   isReadOnly,
   autoCompleteType,
@@ -59,19 +65,29 @@ const Input = ({
     setFocusColor(iconColor);
     handleValidation();
   };
+  const handleIconType = () => {
+    if (iconType === 'mci')
+      return (
+        <MaterialCommunityIcons
+          name={iconName}
+          style={iconStyle}
+          size={34}
+          color={iconColorStatement}
+        />
+      );
+    if (iconType === 'ion')
+      return <Ionicons name={iconName} style={iconStyle} size={34} color={iconColorStatement} />;
+    if (iconType === 'fa')
+      return <FontAwesome style={iconStyle} name={iconName} size={34} color={iconColorStatement} />;
+    return (
+      <SimpleLineIcons name={iconName} style={iconStyle} size={24} color={iconColorStatement} />
+    );
+  };
 
   return (
     <>
       <View style={[styles.container, style]}>
-        {iconName ? (
-          <>
-            {iconType === 'mci' ? (
-              <MaterialCommunityIcons name={iconName} size={34} color={iconColorStatement} />
-            ) : (
-              <SimpleLineIcons name={iconName} size={24} color={iconColorStatement} />
-            )}
-          </>
-        ) : null}
+        {iconName ? <>{iconName ? <>{handleIconType()}</> : null}</> : null}
         <TextInput
           secureTextEntry={autoCompleteType === 'password'}
           style={styles.input}

src/components/common/text/normalText.jsx

@@ -7,7 +7,11 @@ import { MAIN_TEXT_COLOR } from '../../../constants/theme/colors';
 const NormalText = ({ style, text }) => (
   <Text
     style={[
-      { fontSize: NORMAL_TEXT_SIZE, fontFamily: NORMAL_TEXT_FONT_FAMILY, color: MAIN_TEXT_COLOR },
+      {
+        fontSize: NORMAL_TEXT_SIZE,
+        fontFamily: NORMAL_TEXT_FONT_FAMILY,
+        color: MAIN_TEXT_COLOR,
+      },
       style,
     ]}
   >
@@ -16,7 +20,7 @@ const NormalText = ({ style, text }) => (
 );
 
 NormalText.propTypes = {
-  style: PropTypes.objectOf(PropTypes.string),
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   text: PropTypes.string,
 };
 

src/components/common/users-list/styles.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { SECONDARY_THEME_COLOR } from '../../../constants/theme/colors';
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    backgroundColor: SECONDARY_THEME_COLOR,
+    width: '100%',
+    paddingVertical: 15,
+    paddingHorizontal: 25,
+    borderRadius: 5,
+  },
+  itemImage: {
+    width: 35,
+    height: 35,
+    resizeMode: 'cover',
+    borderRadius: 50,
+    marginRight: 10,
+  },
+});
+
+export default styles;

src/components/common/users-list/usersList.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, FlatList, Image } from 'react-native';
+import PropTypes from 'prop-types';
+import { MAIN_THEME_COLOR } from '../../../constants/theme/colors';
+import NormalText from '../text/normalText';
+import EmptyDivider from '../dividers/emptyDivider';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import styles from './styles';
+
+const Item = ({ data, handlePress }) => (
+  <TouchableOpacity onPress={() => handlePress()}>
+    <View style={styles.itemContainer}>
+      <Image
+        style={styles.itemImage}
+        source={{
+          uri: data.uri,
+        }}
+      />
+      <View>
+        <View
+          style={{
+            flexDirection: 'row',
+          }}
+        >
+          <NormalText text={data.name} style={{ color: MAIN_THEME_COLOR }} />
+          <NormalText text="-" style={{ paddingHorizontal: 3 }} />
+          <NormalText text={`${data.age} l.`} />
+        </View>
+        <NormalText text={data.university} />
+      </View>
+    </View>
+  </TouchableOpacity>
+);
+
+const UsersList = ({ data, style, onSelectItem }) => {
+  const selectItem = () => {
+    if (onSelectItem) onSelectItem();
+  };
+
+  return (
+    <FlatList
+      nestedScrollEnabled
+      style={[{ width: '100%', aspectRatio: 1 }, style]}
+      data={data}
+      renderItem={({ item }) => <Item data={item} handlePress={() => selectItem()} />}
+      keyExtractor={(item) => item.id.toString()}
+      ItemSeparatorComponent={() => <EmptyDivider size="small" />}
+    />
+  );
+};
+
+UsersList.defaultProps = {
+  style: null,
+  data: [],
+  onSelectItem: null,
+};
+
+UsersList.propTypes = {
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  data: PropTypes.arrayOf(
+    PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  ),
+  onSelectItem: PropTypes.func,
+};
+
+export default UsersList;

src/redux/actions/meeting/meeting.js

@@ -0,0 +1,6 @@
+const setMeetingName = (name) => ({
+  type: 'SET_MEETING_NAME',
+  payload: name,
+});
+
+export { setMeetingName };