init base draw maps sdk❤️

Author: dev-chief

example/babel.config.js

@@ -5,7 +5,8 @@ module.exports = function (api) {
   api.cache(true);
 
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['babel-preset-expo', '@babel/typescript'],
+
     plugins: [
       [
         'module-resolver',

example/package.json

@@ -23,8 +23,11 @@
   "devDependencies": {
     "@babel/core": "~7.12.10",
     "@babel/runtime": "^7.9.6",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "~0.63.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.0.13"
+    "expo-cli": "^4.0.13",
+    "typescript": "~4.0.0"
   }
 }

example/src/App.tsx

@@ -1,27 +1,20 @@
 import * as React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
-import MapsDraw from 'react-native-maps-draw';
+import Map from 'react-native-maps-draw';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    MapsDraw.multiply(3, 7).then(setResult);
-  }, []);
-
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <Map style={{ flex: 1 }} />
+      <Text>3</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   box: {
     width: 60,

package.json

@@ -25,7 +25,8 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "prepare": "bob build",
+    "prepare": "bob build && yarn copy-dts",
+    "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" lib/typescript",
     "release": "release-it",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
@@ -50,9 +51,11 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.12.1",
+    "@types/react": "^17.0.9",
+    "@types/react-native": "^0.64.10",
+    "@types/react-test-renderer": "^17.0.1",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",
@@ -63,9 +66,8 @@
     "prettier": "^2.0.5",
     "react": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-builder-bob": "^0.18.0",
     "release-it": "^14.2.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
   },
   "peerDependencies": {
     "react": "*",
@@ -136,18 +138,20 @@
     "trailingComma": "es5",
     "useTabs": false
   },
-  "react-native-builder-bob": {
+  "@react-native-community/bob": {
     "source": "src",
     "output": "lib",
     "targets": [
       "commonjs",
       "module",
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
+      "typescript"
     ]
+  },
+  "dependencies": {
+    "@react-native-community/bob": "^0.17.1",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-maps": "^0.28.0",
+    "react-native-reanimated": "^2.2.0",
+    "react-native-svg": "^12.1.1"
   }
 }

src/canvas/canvas.tsx

@@ -0,0 +1,32 @@
+import { useWindowDimensions } from 'react-native';
+import Svg, { Polyline } from 'react-native-svg';
+import type { TouchPoint } from '../types';
+import React, { FC, useMemo } from 'react';
+
+interface CanvasProps {
+  path: TouchPoint[];
+  color?: string;
+  widthLine?: number;
+}
+
+const Canvas: FC<CanvasProps> = ({ path, color, widthLine }) => {
+  const { width, height } = useWindowDimensions();
+  const points = useMemo(
+    () =>
+      path.map((item: TouchPoint) => `${item.x - 10},${item.y + 40}`).join(' '),
+    [path]
+  );
+
+  return (
+    <Svg height="100%" width="100%" viewBox={`0 0 ${width} ${height}`}>
+      <Polyline
+        fill="none"
+        stroke={color}
+        points={points}
+        strokeWidth={widthLine}
+      />
+    </Svg>
+  );
+};
+
+export { Canvas };

src/canvas/index.ts

@@ -0,0 +1 @@
+export * from './canvas';

src/gesture/gesture-responder.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useRef } from 'react';
+import {
+  PanResponder,
+  StyleSheet,
+  View,
+  GestureResponderEvent,
+  PanResponderGestureState,
+} from 'react-native';
+import type { TouchPoint } from '../types';
+
+interface GestureProps {
+  onEndTouchEvents?: (
+    event: GestureResponderEvent,
+    state: PanResponderGestureState,
+    points: TouchPoint[]
+  ) => void;
+  onStartTouchEvents?: (
+    event: GestureResponderEvent,
+    state: PanResponderGestureState
+  ) => void;
+  onChangeTouchEvents: (points: TouchPoint[]) => void;
+}
+
+const GestureHandler: FC<GestureProps> = ({
+  onEndTouchEvents,
+  onStartTouchEvents,
+  onChangeTouchEvents,
+}) => {
+  const pathRef = useRef<TouchPoint[]>([]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+
+      onPanResponderGrant: (e, gestureState) => {
+        pathRef.current = [];
+        onStartTouchEvents && onStartTouchEvents(e, gestureState);
+      },
+      onPanResponderMove: (event) => {
+        pathRef.current.push({
+          x: event.nativeEvent.locationX,
+          y: event.nativeEvent.locationY,
+        });
+        onChangeTouchEvents([...pathRef.current]);
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        const points = [...pathRef.current];
+        onChangeTouchEvents(points);
+        onEndTouchEvents && onEndTouchEvents(e, gestureState, points);
+      },
+    })
+  ).current;
+
+  return <View style={StyleSheet.absoluteFill} {...panResponder.panHandlers} />;
+};
+
+export { GestureHandler };

src/gesture/index.ts

@@ -0,0 +1 @@
+export * from './gesture-responder';

src/index.ts

@@ -0,0 +1 @@
+export { default } from './maps';