[pull] main from expo:main

apps/native-component-list/src/screens/ExpoMaps/apple/MapsEventsScreen.tsx

@@ -1,11 +1,45 @@
-import { AppleMaps } from 'expo-maps';
+import { AppleMaps, Coordinates } from 'expo-maps';
 import React from 'react';
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
 
 import ConsoleBox from '../../../components/ConsoleBox';
 
+const SAMPLE_MARKERS = [
+  { coordinates: { latitude: 37.78825, longitude: -122.4324 }, title: 'San Francisco' },
+  { coordinates: { latitude: 37.8044, longitude: -122.2712 }, title: 'Oakland' },
+  { coordinates: { latitude: 37.3382, longitude: -121.8863 }, title: 'San Jose' },
+  { coordinates: { latitude: 38.5816, longitude: -121.4944 }, title: 'Sacramento' },
+  { coordinates: { latitude: 36.7783, longitude: -119.4179 }, title: 'Fresno' },
+];
+
+function isInViewport(
+  marker: Coordinates,
+  center: Coordinates,
+  latitudeDelta: number,
+  longitudeDelta: number
+) {
+  if (
+    marker.latitude == null ||
+    marker.longitude == null ||
+    center.latitude == null ||
+    center.longitude == null
+  ) {
+    return false;
+  }
+  const halfLat = latitudeDelta / 2;
+  const halfLng = longitudeDelta / 2;
+  return (
+    marker.latitude >= center.latitude - halfLat &&
+    marker.latitude <= center.latitude + halfLat &&
+    marker.longitude >= center.longitude - halfLng &&
+    marker.longitude <= center.longitude + halfLng
+  );
+}
+
 export default function MapsEventsScreen() {
   const [lastEvent, setLastEvent] = React.useState<string>('');
+  const [visibleCount, setVisibleCount] = React.useState<number | null>(null);
+  const [viewportSize, setViewportSize] = React.useState<string>('—');
 
   return (
     <View style={{ flex: 1 }}>
@@ -27,18 +61,22 @@ export default function MapsEventsScreen() {
           }}
           onCameraMove={(e) => {
             setLastEvent(JSON.stringify({ type: 'onCameraMove', data: e }, null, 2));
+
+            const count = SAMPLE_MARKERS.filter((m) =>
+              isInViewport(m.coordinates, e.coordinates, e.latitudeDelta, e.longitudeDelta)
+            ).length;
+            setVisibleCount(count);
+            setViewportSize(`${e.latitudeDelta.toFixed(3)}° × ${e.longitudeDelta.toFixed(3)}°`);
           }}
-          markers={[
-            {
-              coordinates: {
-                latitude: 37.78825,
-                longitude: -122.4324,
-              },
-              title: 'San Francisco',
-            },
-          ]}
+          markers={SAMPLE_MARKERS}
         />
       </View>
+      <View style={{ paddingHorizontal: 10, paddingTop: 10 }}>
+        <Text>Viewport size: {viewportSize}</Text>
+        <Text>
+          Markers in viewport: {visibleCount ?? '—'} / {SAMPLE_MARKERS.length}
+        </Text>
+      </View>
       <View>
         <ConsoleBox style={{ margin: 10 }}>{lastEvent}</ConsoleBox>
       </View>

apps/native-component-list/src/screens/ExpoMaps/google/MapsEventsScreen.tsx

@@ -1,11 +1,45 @@
-import { GoogleMaps } from 'expo-maps';
+import { Coordinates, GoogleMaps } from 'expo-maps';
 import React from 'react';
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
 
 import ConsoleBox from '../../../components/ConsoleBox';
 
+const SAMPLE_MARKERS = [
+  { coordinates: { latitude: 37.78825, longitude: -122.4324 }, title: 'San Francisco' },
+  { coordinates: { latitude: 37.8044, longitude: -122.2712 }, title: 'Oakland' },
+  { coordinates: { latitude: 37.3382, longitude: -121.8863 }, title: 'San Jose' },
+  { coordinates: { latitude: 38.5816, longitude: -121.4944 }, title: 'Sacramento' },
+  { coordinates: { latitude: 36.7783, longitude: -119.4179 }, title: 'Fresno' },
+];
+
+function isInViewport(
+  marker: Coordinates,
+  center: Coordinates,
+  latitudeDelta: number,
+  longitudeDelta: number
+) {
+  if (
+    marker.latitude == null ||
+    marker.longitude == null ||
+    center.latitude == null ||
+    center.longitude == null
+  ) {
+    return false;
+  }
+  const halfLat = latitudeDelta / 2;
+  const halfLng = longitudeDelta / 2;
+  return (
+    marker.latitude >= center.latitude - halfLat &&
+    marker.latitude <= center.latitude + halfLat &&
+    marker.longitude >= center.longitude - halfLng &&
+    marker.longitude <= center.longitude + halfLng
+  );
+}
+
 export default function MapsEventsScreen() {
   const [lastEvent, setLastEvent] = React.useState<string>('');
+  const [visibleCount, setVisibleCount] = React.useState<number | null>(null);
+  const [viewportSize, setViewportSize] = React.useState<string>('—');
 
   return (
     <View style={{ flex: 1 }}>
@@ -36,18 +70,22 @@ export default function MapsEventsScreen() {
           }}
           onCameraMove={(e) => {
             setLastEvent(JSON.stringify({ type: 'onCameraMove', data: e }, null, 2));
+
+            const count = SAMPLE_MARKERS.filter((m) =>
+              isInViewport(m.coordinates, e.coordinates, e.latitudeDelta, e.longitudeDelta)
+            ).length;
+            setVisibleCount(count);
+            setViewportSize(`${e.latitudeDelta.toFixed(3)}° × ${e.longitudeDelta.toFixed(3)}°`);
           }}
-          markers={[
-            {
-              coordinates: {
-                latitude: 37.78825,
-                longitude: -122.4324,
-              },
-              title: 'San Francisco',
-            },
-          ]}
+          markers={SAMPLE_MARKERS}
         />
       </View>
+      <View style={{ paddingHorizontal: 10, paddingTop: 10 }}>
+        <Text>Viewport size: {viewportSize}</Text>
+        <Text>
+          Markers in viewport: {visibleCount ?? '—'} / {SAMPLE_MARKERS.length}
+        </Text>
+      </View>
       <View>
         <ConsoleBox style={{ margin: 10 }}>{lastEvent}</ConsoleBox>
       </View>

docs/components/plugins/__snapshots__/APISection.test.tsx.snap

@@ -1035,7 +1035,7 @@ properties.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -1278,7 +1278,7 @@ properties.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -1721,7 +1721,7 @@ value depending on the state of the credential.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -1974,7 +1974,7 @@ refresh operation.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -2278,7 +2278,7 @@ sign-in operation.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -2605,7 +2605,7 @@ sign-out operation.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -3161,7 +3161,7 @@ for more details.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -3662,7 +3662,7 @@ may be
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -4284,7 +4284,7 @@ for more details.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -4616,7 +4616,7 @@ for more details.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -4968,7 +4968,7 @@ for more details.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -7310,7 +7310,7 @@ exports[`APISection expo-pedometer 1`] = `
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -7920,7 +7920,7 @@ available on this device.
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -8514,7 +8514,7 @@ After calling this function, the listener will no longer receive any events from
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"
@@ -8652,7 +8652,7 @@ After calling this function, the listener will no longer receive any events from
         class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden rounded-md border shadow-xs mx-4 mt-0.5"
       >
         <table
-          class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+          class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
         >
           <thead
             class="border-b-default bg-subtle border-b"
@@ -8923,7 +8923,7 @@ After calling this function, the listener will no longer receive any events from
       class="table-wrapper border-default mb-4 overflow-x-auto overflow-y-hidden shadow-xs mt-0.5 rounded-none border-0 border-t"
     >
       <table
-        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-inherit [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
+        class="text-default w-full rounded-none border-0 text-sm [&_p]:text-sm [&_li]:text-sm [&_span]:text-sm [&_code_span]:text-xs [&_strong]:text-sm [&_blockquote_div]:text-sm [&_blockquote_code]:px-1 [&_blockquote_code]:py-0"
       >
         <thead
           class="border-b-default bg-subtle border-b"