@applicaster/zapp-react-native-ui-components 15.1.0-alpha.2915689988 → 15.1.0-alpha.4285753931

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -10,11 +10,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
   >
     <RCTScrollView
       ListFooterComponent={
@@ -166,11 +161,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           >
             <View />
           </View>
@@ -182,11 +172,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           />
         </View>
         <View

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, SafeAreaView as RNSafeAreaView } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
 import BackButton from "./Buttons/BackButton";
 import BarTitle from "./BarTitle";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   screenStyles: {
@@ -24,6 +24,11 @@ const defaultState: NavBarState = {
   title: "",
 };
 
+const SafeAreaViewPlatform = platformSelect({
+  ios: RNSafeAreaView,
+  android: SafeAreaView,
+});
+
 const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   const isRTL = useIsRTL();
 
@@ -45,7 +50,7 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
+    <SafeAreaViewPlatform
       edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
       testID="BarView-safeAreaView"
@@ -53,7 +58,7 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </SafeAreaViewPlatform>
   );
 };
 

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,6 +1,7 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
 import { useCallback, useMemo } from "react";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 
 type Dimensions = {
   width: Option<number>;
@@ -10,14 +11,17 @@ type Dimensions = {
 type DimensionsState = {
   dimensions: Record<string, Dimensions>;
   setCachedDimensions: (id: string, dimensions: Dimensions) => void;
+  ids: string[];
 };
 
 const dimensionsStore = create<DimensionsState>((set) => ({
   dimensions: {},
+  ids: [],
   setCachedDimensions: (id, dimensions) =>
     set(
       produce((draft) => {
         draft.dimensions[id] = dimensions;
+        draft.ids.push(id);
       })
     ),
 }));
@@ -28,7 +32,7 @@ const initialDimensions = () => ({
 });
 
 export const useCachedDimensions = (id: string) => {
-  const { dimensions, setCachedDimensions } = useStore(
+  const { dimensions, setCachedDimensions, ids } = useStore(
     dimensionsStore
   ) as DimensionsState;
 
@@ -40,11 +44,22 @@ export const useCachedDimensions = (id: string) => {
     setCachedDimensions(id, newDimensions);
   }, []);
 
+  const getLastCachedDimensions = useCallback(() => {
+    const previousId = last(ids);
+
+    if (!previousId) {
+      return undefined;
+    }
+
+    return dimensions[previousId];
+  }, [dimensions, ids]);
+
   return useMemo(
     () => ({
       getCachedDimensions,
       setCachedDimensions: handleSetCachedDimensions,
+      getLastCachedDimensions,
     }),
-    [getCachedDimensions, handleSetCachedDimensions]
+    [getCachedDimensions, handleSetCachedDimensions, getLastCachedDimensions]
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.1.0-alpha.2915689988",
+  "version": "15.1.0-alpha.4285753931",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.0-alpha.2915689988",
-    "@applicaster/zapp-react-native-bridge": "15.1.0-alpha.2915689988",
-    "@applicaster/zapp-react-native-redux": "15.1.0-alpha.2915689988",
-    "@applicaster/zapp-react-native-utils": "15.1.0-alpha.2915689988",
+    "@applicaster/applicaster-types": "15.1.0-alpha.4285753931",
+    "@applicaster/zapp-react-native-bridge": "15.1.0-alpha.4285753931",
+    "@applicaster/zapp-react-native-redux": "15.1.0-alpha.4285753931",
+    "@applicaster/zapp-react-native-utils": "15.1.0-alpha.4285753931",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",