@boneframework/native-components 1.0.57 → 1.0.58

package/components/{Animation.tsx → Animation.native.tsx}

@@ -1,22 +1,14 @@
 import React, {useRef} from 'react';
+// import { DotLottie } from '@lottiefiles/dotlottie-react-native';
 import LottieView from "lottie-react-native";
 
-import { Platform } from 'react-native';
-import { DotLottie as DotLottieNative } from '@lottiefiles/dotlottie-react-native';
-import { DotLottie as DotLottieWeb } from '@lottiefiles/dotlottie-react';
-
-const DotLottie = Platform.select({
-  ios: DotLottieNative,
-  android: DotLottieNative,
-  default: DotLottieWeb as any,
-});
-
 function Animation({source, style  = {}, onAnimationFinish = () => {}, autoPlay = true, loop = true, speed = 1.5}) {
     
     const lottieRef = useRef(null);
 
+
     return(
-        <DotLottie
+        <LottieView
             source={source}
             autoPlay={autoPlay}
             loop={loop}

package/components/Animation.web.tsx

@@ -0,0 +1,24 @@
+import React, {useRef} from 'react';
+import DotLottie, {}  from '@lottiefiles/dotlottie-react';
+
+function Animation({source, style  = {}, onAnimationFinish = () => {}, autoPlay = true, loop = true, speed = 1.5}) {
+    
+    const lottieRef = useRef<DotLottie>(null);
+
+    // @todo: Fix web DotLottie usage
+    // <DotLottie
+    //         source={source}
+    //         autoPlay={autoPlay}
+    //         loop={loop}
+    //         style={style}
+    //         speed={speed}
+    //         onAnimationFinish={onAnimationFinish}
+    //         ref={lottieRef}
+    //     />
+
+    return(<></>
+        
+    );
+}
+
+export default Animation;

package/components/ListItemSwipable.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {StyleSheet, TouchableHighlight, View} from "react-native";
-import Swipeable from 'react-native-gesture-handler/Swipeable';
+import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 
 import Image from '../components/Image'
 import Text from '../components/Text'
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import useStyle from "../hooks/useStyle";
-import useColors from '@boneframework/native-components/hooks/useColors';
+import useColors from "../hooks/useColors";
 
 function ListItemSwipable({title, subtitle, image, IconComponent, onPress, renderRightActions, displayCheverons, titleStyle, subtitleStyle}) {
     const colors = useColors();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "Expo React Native Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-react": "^0.17.12",
+    "@lottiefiles/dotlottie-react": "^0.13.5",
     "@lottiefiles/dotlottie-react-native": "^0.7.1",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
@@ -50,6 +50,7 @@
     "formik": "^2.4.9",
     "jwt-decode": "^4.0.0",
     "lottie-react-native": "^7.3.4",
+    "pigeon-maps": "^0.22.1",
     "react": "19.1.0",
     "react-native-gesture-handler": "^2.29.1",
     "react-native-maps": "^1.26.19",

package/screens/MapScreen.web.tsx

@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {StyleSheet, Text, View} from "react-native";
+import { Map } from 'pigeon-maps';
 
 function MapScreen(props) {
-    return (
-        <View style={styles.container}>
-            <Text>Map Screen Web, use Pigeon Maps - @todo</Text>
-        </View>
-    );
+    const [center, setCenter] = useState([50.879, 4.6997])
+    const [zoom, setZoom] = useState(11)
+
+  return (
+    <View style={styles.container}>
+        <Map style={styles.map}
+        center={center} 
+        zoom={zoom} 
+        onBoundsChanged={({ center, zoom }) => { 
+            setCenter(center) 
+            setZoom(zoom) 
+        }} 
+        />
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({

package/screens/RegisterScreen.tsx

@@ -51,7 +51,7 @@ function RegisterScreen({postRegisterUrl, backgroundSource = null, logoSource =
                 <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                     <Icon size={75} name={'chevron-left'} />
                 </TouchableOpacity>
-                <Image style={styles.logo} source={require(logoSource)} />
+                <Image style={styles.logo} source={logoSource} />
 
                 <Form
                     initialValues={{ email: ''}}

package/screens/WelcomeScreen.tsx

@@ -59,7 +59,7 @@ function WelcomeScreen({
         <Background imageSource={backgroundSource} blurRadius={10} style={styles.background} gradientColors={colors.bgGradient}>
             <ActivityIndicator visible={isLoading} type={'overlay'} />
             <View style={styles.logoContainer}>
-                <Image style={styles.logo} source={require(logoSource)} />
+                <Image style={styles.logo} source={logoSource} />
                 <Text style={styles.tagline}>{ title }</Text>
             </View>
             <View style={styles.buttonContainer}>