@boneframework/native-components 1.0.59 → 1.0.61

package/components/Animation.web.tsx

@@ -3,17 +3,18 @@ import Lottie  from 'lottie-react';
 
 function Animation({source, style  = {}, onAnimationFinish = () => {}, autoPlay = true, loop = true, speed = 1.5}) {
 
-    const lottieRef = useRef<Lottie>(null);
+    const lottieRef = useRef(null);
 
     return(
         <Lottie
-            source={source}
+            animationData={source}
             autoPlay={autoPlay}
             loop={loop}
             style={style}
             speed={speed}
-            onAnimationFinish={onAnimationFinish}
-            ref={lottieRef}
+            onComplete={onAnimationFinish}
+            lottieRef={lottieRef}
+            onDOMLoaded={() => lottieRef.current?.setSpeed(speed)}
         />
     );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "description": "Expo React Native Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -42,6 +42,7 @@
     "expo-image-picker": "^17.0.9",
     "expo-linear-gradient": "^15.0.8",
     "expo-location": "^19.0.8",
+    "expo-maps": "^0.12.10",
     "expo-notifications": "^0.32.14",
     "expo-router": "^6.0.17",
     "expo-secure-store": "^15.0.8",
@@ -52,7 +53,6 @@
     "pigeon-maps": "^0.22.1",
     "react": "19.1.0",
     "react-native-gesture-handler": "^2.29.1",
-    "react-native-maps": "^1.26.19",
     "react-native-progress": "^5.0.1",
     "toggle-switch-react-native": "^3.3.0",
     "yup": "^1.7.1"

package/screens/MapScreen.native.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
-import {StyleSheet, Text, View} from "react-native";
-import MapView from "react-native-maps";
-
-function MapScreen(props) {
-    return (
-        <View style={styles.container}>
-            <MapView style={styles.map} />
-        </View>
-    );
-}
+import { AppleMaps, GoogleMaps } from 'expo-maps';
+import {Platform, StyleSheet, Text, View} from "react-native";
 
 const styles = StyleSheet.create({
     container: {
@@ -20,4 +12,18 @@ const styles = StyleSheet.create({
     },
 });
 
+function MapScreen(props) {
+
+    const children = props.children;
+
+    if (Platform.OS === 'ios') 
+        return <View style={styles.container}><AppleMaps.View style={styles.map} {...props} >{children}</AppleMaps.View></View>;
+    } 
+    
+    if (Platform.OS === 'android') {
+        return <View style={styles.container}><GoogleMaps.View style={styles.map} {...props} >{children}</GoogleMaps.View></View>;
+    }
+}
+
+
 export default MapScreen;

package/screens/MapScreen.web.tsx

@@ -8,14 +8,20 @@ function MapScreen(props) {
 
   return (
     <View style={styles.container}>
-        <Map style={styles.map}
+        <Map 
+        defaultCenter={center}
+        defaultZoom={center}
+        defaultHeight={styles.map.height}
+        defaultWidth={styles.map.width}
         center={center} 
         zoom={zoom} 
         onBoundsChanged={({ center, zoom }) => { 
             setCenter(center) 
             setZoom(zoom) 
         }} 
-        />
+        >
+            {props.children}
+        </Map>
     </View>
   )
 }

package/tsconfig.json

@@ -1,4 +1,6 @@
 {
-  "compilerOptions": {},
+  "compilerOptions": {
+    "jsx": "react"
+  },
   "extends": "expo/tsconfig.base"
 }