test

src/components/MyImage.tsx

@@ -0,0 +1,14 @@
+import {SourceProp} from '@user/types';
+import {Image, ImageProps} from 'react-native';
+
+type imageType = Blob | undefined;
+
+interface CustomImageProps extends ImageProps {
+  hq?: {source: SourceProp; data: imageType; url: string};
+}
+
+function MyImage({...rest}: CustomImageProps) {
+  return <Image {...rest} />;
+}
+
+export default MyImage;

src/components/map/DisplayMarkerList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View, Text, Image, StyleSheet} from 'react-native';
 import {MarkerView} from '@rnmapbox/maps';
 
@@ -15,10 +15,19 @@ function DisplayMarkerList() {
 
   const colors = store.getState().nonSaveVariables.theme.colors;
 
-  return (
+  useEffect(() => {
-    <React.Fragment>
+    console.log('DisplayMarkerList----------');
-      {eventMapMarkers.map((marker: PA_Point) => {
+    return () => {
-        return marker.type === 'event' || marker.type === 'eventStore' ? (
+      console.log('DisplayMarkerList unmount !!!');
+    };
+  }, [eventMapMarkers]);
+
+  let markers = [];
+
+  for (let i = 0; i < eventMapMarkers.length; i++) {
+    let marker = eventMapMarkers[i];
+    markers.push(
+      marker.type === 'event' || marker.type === 'eventStore' ? (
         <MarkerView
           key={marker.id}
           anchor={{x: 0.5, y: 1}}
@@ -34,10 +43,11 @@ function DisplayMarkerList() {
           allowOverlap={true}>
           <CircleNumber number={marker.cluster} />
         </MarkerView>
+      ),
     );
-      })}
+  }
-    </React.Fragment>
+
-  );
+  return <React.Fragment>{markers}</React.Fragment>;
 }
 
 const styles = StyleSheet.create({
@@ -51,4 +61,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default DisplayMarkerList;
+export default React.memo(DisplayMarkerList);

src/components/map/EventMarker.tsx

@@ -125,6 +125,7 @@ function MarkerTheme0({marker}: {marker: EventType}) {
   return (
     <React.Fragment>
       <Image source={tate} style={styles.markerImage} />
+      {
         <AvatarGroup style={styles.avatarGroup}>
           {[
             remainingCount > 0 ? (
@@ -161,6 +162,7 @@ function MarkerTheme0({marker}: {marker: EventType}) {
             )),
           ]}
         </AvatarGroup>
+      }
     </React.Fragment>
   );
 }

src/components/map/cluster/getData.ts

@@ -2,8 +2,6 @@ import {Position} from '@rnmapbox/maps/src/types/Position';
 import {getDistance} from 'geolib';
 import {PA_Point, PA_Point_Cluster, PA_Point_Event} from '../types';
 
-
-
 const createChecksum = (ids: (number | string)[]) => {
   let checksum = 0;
   for (const id of ids.sort()) {
@@ -123,34 +121,34 @@ function getLocationData(
             latitude: 51.9674,
             longitude: 7.6197,
             type: 'event',
-            id: "203868",
+            id: '203868',
             theme: 1,
           },
           {
             latitude: 51.9674,
             longitude: 7.6196,
             type: 'event',
-            id: "203866",
+            id: '203866',
             theme: 1,
           },
-          {latitude: 51.9674, longitude: 7.6194, type: 'event', id: "203867"},
+          {latitude: 51.9674, longitude: 7.6194, type: 'event', id: '203867'},
-          {latitude: 50.7753, longitude: 6.0839, type: 'event', id: "501298"},
+          {latitude: 50.7753, longitude: 6.0839, type: 'event', id: '501298'},
-          {latitude: 53.0793, longitude: 8.8017, type: 'event', id: "763159"},
+          {latitude: 53.0793, longitude: 8.8017, type: 'event', id: '763159'},
-          {latitude: 48.7758, longitude: 9.1829, type: 'event', id: "917425"},
+          {latitude: 48.7758, longitude: 9.1829, type: 'event', id: '917425'},
-          {latitude: 52.3759, longitude: 9.732, type: 'event', id: "635028"},
+          {latitude: 52.3759, longitude: 9.732, type: 'event', id: '635028'},
-          {latitude: 51.512, longitude: 7.4653, type: 'event', id: "841592"},
+          {latitude: 51.512, longitude: 7.4653, type: 'event', id: '841592'},
-          {latitude: 49.4875, longitude: 8.466, type: 'event', id: "180356"},
+          {latitude: 49.4875, longitude: 8.466, type: 'event', id: '180356'},
-          {latitude: 51.3611, longitude: 7.0119, type: 'event', id: "592874"},
+          {latitude: 51.3611, longitude: 7.0119, type: 'event', id: '592874'},
-          {latitude: 54.3227, longitude: 10.1356, type: 'event', id: "384791"},
+          {latitude: 54.3227, longitude: 10.1356, type: 'event', id: '384791'},
-          {latitude: 51.8049, longitude: 10.3351, type: 'event', id: "273495"},
+          {latitude: 51.8049, longitude: 10.3351, type: 'event', id: '273495'},
-          {latitude: 50.3213, longitude: 11.8676, type: 'event', id: "699318"},
+          {latitude: 50.3213, longitude: 11.8676, type: 'event', id: '699318'},
-          {latitude: 49.8765, longitude: 6.6695, type: 'event', id: "159627"},
+          {latitude: 49.8765, longitude: 6.6695, type: 'event', id: '159627'},
-          {latitude: 52.2651, longitude: 7.3085, type: 'event', id: "903716"},
+          {latitude: 52.2651, longitude: 7.3085, type: 'event', id: '903716'},
-          {latitude: 53.9638, longitude: 12.413, type: 'event', id: "487612"},
+          {latitude: 53.9638, longitude: 12.413, type: 'event', id: '487612'},
-          {latitude: 50.9321, longitude: 9.1847, type: 'event', id: "827464"},
+          {latitude: 50.9321, longitude: 9.1847, type: 'event', id: '827464'},
-          {latitude: 52.4378, longitude: 13.2847, type: 'event', id: "931845"},
+          {latitude: 52.4378, longitude: 13.2847, type: 'event', id: '931845'},
-          {latitude: 49.4644, longitude: 11.0168, type: 'event', id: "674132"},
+          {latitude: 49.4644, longitude: 11.0168, type: 'event', id: '674132'},
-          {latitude: 51.1983, longitude: 8.8998, type: 'event', id: "298473"},
+          {latitude: 51.1983, longitude: 8.8998, type: 'event', id: '298473'},
         ],
       };
 

src/event/EventManager.ts

@@ -41,7 +41,6 @@ async function getEvent(
     }
   }
 
-
   if (event === undefined) {
     const eveDBKeys = BigDataManager.databases.events.keys;
     const eve = await BigDataManager.databases.events.getEntry(UUID);
@@ -53,7 +52,11 @@ async function getEvent(
             ? createEventProp(
                 SourceProp.offline,
                 //Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryLQ]),
-                new Blob([eve[eveDBKeys.EventBannerPictureBinaryLQ] as unknown as string]),
+                new Blob([
+                  eve[
+                    eveDBKeys.EventBannerPictureBinaryLQ
+                  ] as unknown as string,
+                ]),
               )
             : createEventProp(
                 SourceProp.online,
@@ -65,7 +68,11 @@ async function getEvent(
             ? createEventProp(
                 SourceProp.offline,
                 //Buffer.from(eve[eveDBKeys.EventBannerPictureBinaryHQ]),
-                new Blob([eve[eveDBKeys.EventBannerPictureBinaryHQ] as unknown as string]),
+                new Blob([
+                  eve[
+                    eveDBKeys.EventBannerPictureBinaryHQ
+                  ] as unknown as string,
+                ]),
               )
             : createEventProp(
                 SourceProp.online,
@@ -91,7 +98,10 @@ async function getEvent(
           SourceProp.offline,
           eve[eveDBKeys.Longitude],
         ),
-        Type: createEventProp(SourceProp.offline, NumToEventType(eve[eveDBKeys.Type])),
+        Type: createEventProp(
+          SourceProp.offline,
+          NumToEventType(eve[eveDBKeys.Type]),
+        ),
         Theme: createEventProp(SourceProp.offline, eve[eveDBKeys.Theme]),
         FriendList: createEventProp(
           SourceProp.offline,
@@ -141,9 +151,31 @@ async function getEvent(
   EventBannerPicture: EventBannerPicture;
   ButtonAction: BasicEventProp<string>; */
 
-      const resp = {response:{
+      const resp = {
+        response: {
           Name: 'test event',
-        Description: 'test description',
+          Description:
+            'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
+            'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
+            '\n\n\n' +
+            'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
+            'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
+            '\n\n\n' +
+            'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
+            'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
+            '\n\n\n' +
+            'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
+            'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
+            '\n\n\n' +
+            'das Event "Tech House Germany" am 08.12.2023 im legendären Bootshaus Köln verspricht eine unvergessliche Nacht voller elektrisierender Beats und pulsierender Rhythmen. Jeder DJ bringt seinen einzigartigen Stil und Energie in das Line-up ein, was eine perfekte Mischung aus klassischem und modernem Tech House garantiert. \n\n' +
+            'Das Bootshaus, bekannt für seine hervorragende Akustik und beeindruckende Lichtshow, bietet die perfekte Kulisse für eine Nacht voller Tanz und Musik. Erleben Sie eine Reise durch die Welt des Tech House, begleitet von den besten Künstlern der Szene. \n\n' +
+            '\n\n\n' +
+            'Blckbx: \n' +
+            'NIGHTFUNK \n' +
+            'FINIQ \n' +
+            'DAVID HERRLICH \n' +
+            'ELTERNHOUSE \n' +
+            'LA RENZO',
           StartDate: 1702230005,
           EndDate: new Date().getTime() + 100000,
           Latitude: 48.7758,
@@ -153,8 +185,10 @@ async function getEvent(
           FriendList: [],
           UserLength: 5,
           pic: 'https://www.w3schools.com/w3css/img_lights.jpg',
-        ButtonAction: '{"url":"https://www.w3schools.com/w3css/img_lights.jpg"}',
+          ButtonAction:
-      }};
+            '{"url":"https://www.w3schools.com/w3css/img_lights.jpg"}',
+        },
+      };
 
       event = {
         UUID,
@@ -167,42 +201,20 @@ async function getEvent(
           lq: createEventProp(
             SourceProp.online,
             undefined,
-            resp.response.pic + "?type=low",
+            resp.response.pic + '?type=low',
-          ),
-          hq: createEventProp(
-            SourceProp.online,
-            undefined,
-            resp.response.pic,
           ),
+          hq: createEventProp(SourceProp.online, undefined, resp.response.pic),
         },
-        Name: createEventProp(
+        Name: createEventProp(SourceProp.cached, resp.response.Name),
-          SourceProp.cached,
+        StartDate: createEventProp(SourceProp.cached, resp.response.StartDate),
-          resp.response.Name,
+        EndDate: createEventProp(SourceProp.cached, resp.response.EndDate),
-        ),
+        Latitude: createEventProp(SourceProp.cached, resp.response.Latitude),
-        StartDate: createEventProp(
+        Longitude: createEventProp(SourceProp.cached, resp.response.Longitude),
-          SourceProp.cached,
-          resp.response.StartDate,
-        ),
-        EndDate: createEventProp(
-          SourceProp.cached,
-          resp.response.EndDate,
-        ),
-        Latitude: createEventProp(
-          SourceProp.cached,
-          resp.response.Latitude,
-        ),
-        Longitude: createEventProp(
-          SourceProp.cached,
-          resp.response.Longitude,
-        ),
         Type: createEventProp(
           SourceProp.cached,
           NumToEventType(resp.response.Type),
         ),
-        Theme: createEventProp(
+        Theme: createEventProp(SourceProp.cached, resp.response.Theme),
-          SourceProp.cached,
-          resp.response.Theme,
-        ),
         FriendList: createEventProp(
           SourceProp.cached,
           resp.response.FriendList,
@@ -215,7 +227,6 @@ async function getEvent(
           SourceProp.cached,
           resp.response.ButtonAction,
         ),
-
       };
 
       //BigDataManager.setEntry('events', event);
@@ -321,7 +332,6 @@ function initUndefinedEvent(UUID: EventID): PAEvent {
   };
 }
 
-
 const EventManager = {
   getEvent,
   getEventSelector,

src/navigation/navigation.tsx

@@ -29,6 +29,7 @@ import {RootState, store as reduxStore} from '@redux/store';
 import {Text} from '@gluestack-ui/themed';
 import {MyTouchableOpacity} from '@components/MyTouchableOpacity';
 import {useEffect, useRef} from 'react';
+import {animated, useSpring} from '@react-spring/native';
 
 export type RootStackNavigatorParamList = {
   Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
@@ -95,6 +96,8 @@ function ChatsTabAnim(props: any) {
 
 const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];
 
+//const AnimationView = animated(View);
+
 function CustomTabBar(props: BottomTabBarProps) {
   const {state, navigation} = props;
 
@@ -121,18 +124,43 @@ function CustomTabBar(props: BottomTabBarProps) {
   const allowedTabs = ['Profile', 'Calendar', 'Map', 'Chats'];
 
   const fadeAnim = useRef(new Animated.Value(1)).current;
+  /*
+  const [motionProps, api] = useSpring(
+    () => ({
+      from: {
+        translateY: 0,
+      },
+    }),
+    [],
+  ); */
 
   useEffect(() => {
     if (
       nestedRouteName === undefined ||
       (allowedTabs.includes(routeName) && nestedRouteName === 'Overview')
     ) {
+      /*api.start({
+        to: [
+          {
+            translateY: 0,
+          },
+        ],
+      }); */
+
       Animated.timing(fadeAnim, {
         toValue: 0,
         duration: 250,
         useNativeDriver: true,
       }).start();
     } else {
+      /*api.start({
+        to: [
+          {
+            translateY: 100,
+          },
+        ],
+      }); */
+
       Animated.timing(fadeAnim, {
         toValue: 100,
         duration: 150,
@@ -146,6 +174,7 @@ function CustomTabBar(props: BottomTabBarProps) {
       style={{
         backgroundColor: currentTheme.backgroundDark400,
         transform: [{translateY: fadeAnim}],
+        //transform: [{translateY: motionProps.translateY}],
       }}>
       <View
         style={{

src/navigation/tabs/main/ProfileTab.tsx

@@ -8,12 +8,18 @@ import {MyIconButton} from '@components/MyButton';
 import {useNavigation} from '@react-navigation/native';
 import {
   ProfileOverview,
-  ProfileSettings,
   UpdatePassword,
   UpdateUsername,
 } from '@pages/profile/profile';
 import {Help} from '@pages/profile/help';
 import {About} from '@pages/profile/about';
+import {lazy, Suspense} from 'react';
+
+const ProfileSettings = lazy(() =>
+  import('@pages/profile/profile').then(module => ({
+    default: module.ProfileSettings,
+  })),
+);
 
 export const ProfileTabName = 'Profile';
 

src/pages/calendar/calendar.tsx

@@ -23,8 +23,6 @@ export function CalendarScreen() {
   return (
     <MyScreenContainer>
       <Text>Calendar</Text>
-
-      <View style={{}}></View>
     </MyScreenContainer>
   );
 }

src/pages/event/EventPage.tsx

@@ -1,7 +1,51 @@
-import {Text} from '@gluestack-ui/themed';
+import {Center, Spinner, Text, View} from '@gluestack-ui/themed';
 
-function EventPage() {
+import {EventID} from '@event/types';
-  return <Text>EventPage</Text>;
+
+import EventManager from '@event/EventManager';
+import {MyScreenContainer} from '@components/MyScreenContainer';
+import {SourceProp} from '@user/types';
+import MyImage from '@components/MyImage';
+import {Image} from 'react-native';
+
+function EventPageLoading() {
+  // center also horizontally and vertically
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Spinner color="$secondary400" size={'large'} />
+    </View>
+  );
+}
+
+function EventPage({route}: {route: {params: {eventID: EventID}}}) {
+  const {eventID} = route.params;
+
+  const event = EventManager.getEventSelector(eventID);
+
+  if (event.Name.source === SourceProp.online) return <EventPageLoading />;
+
+  let image = event.EventBannerPicture.hq;
+  if (image === undefined) {
+    image = event.EventBannerPicture.lq;
+  }
+
+  return (
+    <MyScreenContainer scrollView={true}>
+      {
+        <>
+          <Text>{event.Name.data}</Text>
+          <Image
+            source={{
+              uri: 'https://res.cloudinary.com/coin-nft/image/upload/c_limit,q_auto,w_329/f_auto/v1/cache/1/f2/65/f26573682335fe72b50f0f74041736905308345d6043abbac832856b3a4d2246-ZGMwNDMxZTktYTY4NS00OTQ1LWJiYmUtMDRhY2Q0YzUzMjAy?_a=ATCkFAA0',
+            }}
+            style={{width: '100%', height: 400}}
+            alt="Event banner"
+          />
+          <Text>{event.Description.data}</Text>
+        </>
+      }
+    </MyScreenContainer>
+  );
 }
 
 export default EventPage;

src/pages/map/map.tsx

@@ -81,7 +81,11 @@ export const Map = () => {
   }
 
   function onMapMoveFinished() {
-    getVisibleBounds();
+    //console.log('xxxxxxxxxxxxxxxxxxxdad');
+
+    (async () => {
+      await getVisibleBounds();
+    })();
   }
 
   React.useEffect(() => {