Feature #5 Marcar pontos no mapa

__tests__/App-test.js

@@ -4,11 +4,11 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import renderer from 'react-test-renderer';
+import Map from '../src/pages/Map';
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
-  renderer.create(<App />);
+  renderer.create(<Map />);
 });

android/app/build.gradle

@@ -78,7 +78,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -131,6 +131,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        missingDimensionStrategy 'react-native-camera', 'general'
     }
     splits {
         abi {
@@ -182,9 +183,9 @@ dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
-
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
+    compile project(':react-native-vector-icons')
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
     }
@@ -215,3 +216,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,10 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

android/app/src/main/java/com/cartografiasocial/MainApplication.java

@@ -10,6 +10,8 @@
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
+import com.facebook.react.bridge.JSIModulePackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -20,6 +22,11 @@ public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;
         }
 
+        @Override
+        protected JSIModulePackage getJSIModulePackage() {
+          return new ReanimatedJSIModulePackage(); // <- add
+        }
+
         @Override
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")

android/build.gradle

@@ -34,5 +34,6 @@ allprojects {
 
         google()
         maven { url 'https://www.jitpack.io' }
+        jcenter()
     }
 }

android/settings.gradle

@@ -1,3 +1,6 @@
 rootProject.name = 'cartografiasocial'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

package.json

@@ -12,6 +12,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4",
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-masked-view/masked-view": "^0.2.2",
@@ -27,7 +28,7 @@
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-android-location-enabler": "^1.2.2",
-    "react-native-camera": "^3.43.0",
+    "react-native-camera": "^4.1.1",
     "react-native-config": "^1.4.4",
     "react-native-connectivity-status": "^1.5.2",
     "react-native-geolocation-service": "^5.2.0",

patches/rn-material-ui-textfield+1.0.5.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/rn-material-ui-textfield/src/components/outline/index.js b/node_modules/rn-material-ui-textfield/src/components/outline/index.js
+index 8d0d8c1..660a28e 100644
+--- a/node_modules/rn-material-ui-textfield/src/components/outline/index.js
++++ b/node_modules/rn-material-ui-textfield/src/components/outline/index.js
+@@ -2,7 +2,8 @@ import PropTypes from 'prop-types'
+ import React, { Fragment, PureComponent } from 'react'
+ import { View, Animated, I18nManager } from 'react-native'
+
+-import styles, { borderRadius } from './styles'
++import styles from './styles'
++const borderRadius = 4
+
+ export default class Line extends PureComponent {
+   static defaultProps = {
+diff --git a/node_modules/rn-material-ui-textfield/src/components/outline/styles.js b/node_modules/rn-material-ui-textfield/src/components/outline/styles.js
+index a6e0d0f..64b407b 100644
+--- a/node_modules/rn-material-ui-textfield/src/components/outline/styles.js
++++ b/node_modules/rn-material-ui-textfield/src/components/outline/styles.js
+@@ -1,6 +1,6 @@
+ import { StyleSheet, Platform } from 'react-native'
+
+-export const borderRadius = 4
++export const borderRadius = 10
+
+ let containerStyle = {
+   position: 'absolute',

src/app/App.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
 import 'config/ReactotronConfig';
+import 'config/LayoutAnimationConfig';
 import Routes from './Routes';
 
 const App = () => {

src/components/CreatePoint/index.js

@@ -0,0 +1,127 @@
+import React, {useRef, useMemo, useState} from 'react';
+import {Alert} from 'react-native';
+import BottomSheet, {BottomSheetScrollView} from '@gorhom/bottom-sheet';
+import PropTypes from 'prop-types';
+import {Btn, Input, View} from 'components/UI';
+import required from 'validators/required';
+import {useDispatch, useSelector} from 'react-redux';
+import {auth} from 'store/selectors';
+import * as Actions from 'store/actions';
+import api from 'services/api';
+import {Container, Icon} from './styles';
+
+const CreatePoint = ({locationSelected, show, onClose}) => {
+  const dispatch = useDispatch();
+  const user = useSelector(auth);
+  const snapPoints = useMemo(() => [110, '50%', '95%'], []);
+  const sheetRef = useRef(null);
+
+  const DEFAULT_STATE = {
+    isValid: false,
+    value: '',
+  };
+
+  const [title, setTitle] = useState(DEFAULT_STATE);
+
+  const [description, setDescription] = useState(DEFAULT_STATE);
+  const [showMarker, setShowMarker] = useState(true);
+
+  const onSave = async () => {
+    setShowMarker(false);
+    setTimeout(() => {
+      setShowMarker(true);
+    }, 2000);
+    const newMarker = {
+      latitude: locationSelected.latitude,
+      longitude: locationSelected.longitude,
+      title: title.value,
+      description: description.value,
+    };
+
+    dispatch(Actions.createMarker(newMarker));
+    if (user && user.id) {
+      try {
+        await api.post('/maps/point', newMarker);
+      } catch (error) {
+        Alert.alert('Cartografia Social', error.message);
+      }
+    }
+    sheetRef.current.close();
+
+    setTimeout(() => {
+      onClose();
+      setTitle(DEFAULT_STATE);
+      setDescription(DEFAULT_STATE);
+    }, 1000);
+    return locationSelected;
+  };
+
+  const pointName = () => (
+    <View mt={2}>
+      <Input
+        label="Digite aqui o título do novo ponto"
+        onChange={(value) => setTitle(value)}
+        value={title.value}
+        autoCapitalize="words"
+        onFocus={() => sheetRef.current.snapToIndex(2)}
+        rules={[required]}
+      />
+    </View>
+  );
+
+  const formIsValid = () => {
+    return title.isValid;
+  };
+
+  if (show) {
+    return (
+      <>
+        <Container>
+          {showMarker ? <Icon size={40} name="map-marker-alt" /> : null}
+        </Container>
+        <BottomSheet ref={sheetRef} index={0} snapPoints={snapPoints}>
+          <BottomSheetScrollView keyboardShouldPersistTaps="handled">
+            <View px={3}>
+              {pointName()}
+              <View py={3}>
+                <Input
+                  height={100}
+                  characterRestriction={5000}
+                  maxLength={5000}
+                  label="Digite aqui a descrição do novo ponto"
+                  onChange={(value) => setDescription(value)}
+                  value={description.value}
+                  multiline
+                />
+              </View>
+              <Btn
+                onPress={onSave}
+                disabled={!formIsValid()}
+                title="Salvar ponto"
+              />
+            </View>
+          </BottomSheetScrollView>
+        </BottomSheet>
+      </>
+    );
+  }
+
+  return null;
+};
+
+CreatePoint.propTypes = {
+  locationSelected: PropTypes.shape({
+    latitude: PropTypes.number,
+    longitude: PropTypes.number,
+  }),
+  show: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+CreatePoint.defaultProps = {
+  locationSelected: {},
+  show: false,
+  onClose: () => {},
+};
+
+export default CreatePoint;

src/components/CreatePoint/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components/native';
+import {Platform} from 'react-native';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
+import theme from 'theme/theme';
+
+export const Icon = styled(FontAwesomeIcon).attrs({
+  color: theme.colors.black,
+})``;
+
+export const Container = styled.View`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -15px;
+  margin-top: ${Platform.OS === 'ios' ? '-28px' : '-43px'};
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Option = styled.TouchableHighlight.attrs({
+  underlayColor: theme.colors.secondary,
+})`
+  border-radius: 100px;
+  width: ${({size}) => size}px;
+  height: ${({size}) => size}px;
+  background-color: ${theme.colors.primary};
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+`;

src/components/Fabs/index.js

@@ -0,0 +1,63 @@
+import React, {useState} from 'react';
+import {LayoutAnimation} from 'react-native';
+import PropTypes from 'prop-types';
+import {Container, Icon, Option} from './styles';
+
+const Fabs = ({actions, alwaysOpenActions}) => {
+  const [showOptions, setShowOptions] = useState(false);
+
+  const onPressOpenOptions = () => {
+    setShowOptions(!showOptions);
+    if (showOptions) {
+      LayoutAnimation.easeInEaseOut();
+    } else {
+      LayoutAnimation.spring();
+    }
+  };
+
+  const onPressItem = (item) => {
+    setShowOptions(false);
+    item.onPress();
+  };
+
+  const renderItem = (item, index) => (
+    <Option key={index} size={40} onPress={() => onPressItem(item)}>
+      <Icon size={25} name={item.icon} />
+    </Option>
+  );
+
+  const Options = ({items}) => {
+    return items.map(renderItem);
+  };
+
+  return (
+    <Container>
+      <Options items={alwaysOpenActions} />
+      {showOptions ? <Options items={actions} /> : null}
+      <Option size={50} onPress={onPressOpenOptions}>
+        <Icon size={25} name={showOptions ? 'times' : 'plus'} />
+      </Option>
+    </Container>
+  );
+};
+
+Fabs.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.string,
+      onPress: PropTypes.func,
+    }),
+  ),
+  alwaysOpenActions: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.string,
+      onPress: PropTypes.func,
+    }),
+  ),
+};
+
+Fabs.defaultProps = {
+  actions: [],
+  alwaysOpenActions: [],
+};
+export default Fabs;