[#5] feat - creating marker modal

Co-authored-by: Alexandre Miguel <aleronupe@gmail.com>

src/components/CreatePointModal/index.js

@@ -0,0 +1,45 @@
+import React, {useRef, useMemo} from 'react';
+import BottomSheet, {BottomSheetScrollView} from '@gorhom/bottom-sheet';
+import PropTypes from 'prop-types';
+import {Text, Btn} from 'components/UI';
+import theme from 'theme/theme';
+
+import {Container, Option} from './styles';
+
+const CreatePoint = ({locationSelected}) => {
+  const snapPoints = useMemo(() => ['50%', '90%'], []);
+  const sheetRef = useRef(null);
+
+  const onSave = () => {
+    return locationSelected;
+  };
+
+  return (
+    <>
+      <Container>
+        <Option size={50} onPress={() => sheetRef.current.snapToIndex(0)}>
+          <Text color={theme.colors.white}>Teste</Text>
+        </Option>
+      </Container>
+      <BottomSheet ref={sheetRef} index={1} snapPoints={snapPoints}>
+        <BottomSheetScrollView>
+          <Text>Teste</Text>
+          <Btn onPress={onSave} title="Salvar ponto" />
+        </BottomSheetScrollView>
+      </BottomSheet>
+    </>
+  );
+};
+
+CreatePoint.propTypes = {
+  locationSelected: PropTypes.shape({
+    latitude: PropTypes.string,
+    longitude: PropTypes.func,
+  }),
+};
+
+CreatePoint.defaultProps = {
+  locationSelected: {},
+};
+
+export default CreatePoint;

src/components/CreatePointModal/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components/native';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
+import theme from 'theme/theme';
+
+export const Icon = styled(FontAwesomeIcon).attrs({
+  color: theme.colors.white,
+})``;
+
+export const Container = styled.View`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 20px;
+  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;
+`;