@opndev/react-native-events 0.0.10 → 0.0.11

package/Changes

@@ -1,5 +1,37 @@
 Revision history for @opndev/opndev-react-native-events
 
+0.0.11       2026-06-25 04:12:51Z
+
+  * registry not registery :/
+  * Add HeroScreen variants: Parallax, Fixed and Overlay. Overlay is the
+    default.
+  * Move consuming units to screen-registry, so consuming apps can just use:
+
+      import { createScreens } from
+        '@opndev/react-native-events/screen-registry';
+      import { ThemedText } from '@/components/themed-text';
+      import { styles } from '@/styles/tabs';
+
+      const CategoryText =
+        (props) => <ThemedText type="subtitle" {...props} />;
+
+      export const {
+        heroImage,
+        FoodMenuScreen,
+        FoodVendorScreen,
+        HeroScreen,
+        HeroScreenParallax,
+        HeroScreenFixed,
+        NewsItemScreen,
+        NewsListScreen,
+        QRCodeScreen,
+        Tile,
+      } = createScreens({
+        TextComponent: ThemedText,
+        CategoryTextComponent: CategoryText,
+        styles,
+      });
+
 0.0.10       2026-06-21 17:41:27Z
 
   * Rename  @opndev/opndev-react-native-events to  @opndev/react-native-events,

package/lib/components/base-screen.jsx

@@ -0,0 +1,56 @@
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { useSafeAreaTopInset } from '../hooks/use-safe-area-top-inset.js';
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+/**
+ * BaseScreen
+ *
+ * Plain screen wrapper for content that doesn't have a hero header
+ * image (e.g. NewsListScreen, FoodMenuScreen). Encapsulates the
+ * same background / safe-area / scroll-container concerns as the
+ * HeroScreen variants, minus the header, so non-hero screens still
+ * get consistent top-inset behaviour rather than each handling it
+ * (or forgetting to handle it) separately.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string} [props.backgroundColor]
+ * @param {React.ComponentType} [props.ContentComponent] Defaults to ScrollView; pass a list component (FlatList/SectionList) if children render as list items
+ * @param {object} [props.containerStyle]
+ * @param {object} [props.contentStyle]
+ * @param {boolean} [props.useSafeArea] Pad content by the top safe-area inset. Defaults true.
+ *
+ * @returns {JSX.Element}
+ */
+export default function BaseScreen({
+  children,
+  backgroundColor,
+  ContentComponent = ScrollView,
+  containerStyle,
+  contentStyle,
+  useSafeArea = true,
+}) {
+  const insetTop = useSafeAreaTopInset();
+
+  return (
+    <View
+      style={[
+        defaultStyle.container,
+        backgroundColor ? { backgroundColor } : null,
+        containerStyle,
+      ]}
+    >
+      <ContentComponent
+        style={[contentStyle]}
+        contentContainerStyle={useSafeArea ? { paddingTop: insetTop } : null}
+      >
+        {children}
+      </ContentComponent>
+    </View>
+  );
+}

package/lib/components/hero-screen-fixed.jsx

@@ -0,0 +1,96 @@
+import { View, ScrollView, StyleSheet } from 'react-native';
+import {
+  renderHeaderImage,
+  HeaderOverlay,
+  useHeroHeaderHeight
+} from './hero-screen-header';
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  headerWrap: {
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  imageInner: {
+    position: 'absolute',
+    left: 0,
+    width: '100%',
+  },
+});
+
+/**
+ * HeroScreenFixed
+ *
+ * Header image stays pinned in place; only the content below it
+ * scrolls. The image never overlaps the status bar — a solid
+ * headerBackgroundColor strip (sized to the safe-area top inset,
+ * via useHeroHeaderHeight) sits above it.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {object} [props.headerImage]
+ * @param {React.ReactNode} [props.headerOverlay]
+ * @param {string} [props.backgroundColor]
+ * @param {string} [props.headerBackgroundColor]
+ * @param {number} [props.headerHeight] Visible image height (excludes the safe-area inset)
+ * @param {React.ComponentType} [props.ContentComponent]
+ * @param {object} [props.containerStyle]
+ * @param {object} [props.headerStyle]
+ * @param {object} [props.contentStyle]
+ *
+ * @returns {JSX.Element}
+ */
+export default function HeroScreenFixed({
+  children,
+  headerImage,
+  headerOverlay,
+  backgroundColor,
+  headerBackgroundColor,
+  headerHeight = 220,
+  ContentComponent = ScrollView,
+  containerStyle,
+  headerStyle,
+  contentStyle,
+}) {
+  const { insetTop, totalHeaderHeight } = useHeroHeaderHeight(headerHeight);
+
+  return (
+    <View
+      style={[
+        defaultStyle.container,
+        backgroundColor ? { backgroundColor } : null,
+        containerStyle,
+      ]}
+    >
+      <View
+        style={[
+          defaultStyle.headerWrap,
+          { height: totalHeaderHeight },
+          headerBackgroundColor ? { backgroundColor: headerBackgroundColor } : null,
+          headerStyle,
+        ]}
+      >
+        <View
+          style={[
+            defaultStyle.imageInner,
+            { top: insetTop, height: headerHeight },
+          ]}
+        >
+          {renderHeaderImage(headerImage)}
+        </View>
+      </View>
+
+      <ContentComponent
+        style={[contentStyle]}
+        contentContainerStyle={{ paddingTop: totalHeaderHeight }}
+      >
+        <HeaderOverlay headerOverlay={headerOverlay} />
+        {children}
+      </ContentComponent>
+    </View>
+  );
+}

package/lib/components/hero-screen-header.jsx

@@ -0,0 +1,41 @@
+import { View, Image, StyleSheet } from 'react-native';
+import { useSafeAreaTopInset } from '../hooks/use-safe-area-top-inset.js';
+
+const styles = StyleSheet.create({
+  headerImage: { width: '100%', height: '100%' },
+  titleWrap: { paddingHorizontal: 8, paddingTop: 8, paddingBottom: 8 },
+});
+
+export function renderHeaderImage(headerImage) {
+  if (!headerImage) return null;
+  const fit = headerImage.fit || 'cover';
+  const style = headerImage.style || styles.headerImage;
+  return <Image source={headerImage.source} style={style} resizeMode={fit} />;
+}
+
+export function HeaderOverlay({ headerOverlay }) {
+  if (!headerOverlay) return null;
+  return <View style={styles.titleWrap}>{headerOverlay}</View>;
+}
+
+/**
+ * useHeroHeaderHeight
+ *
+ * Shared safe-area calculation for all HeroScreen variants, so the
+ * "space above the header" behaves identically across Parallax,
+ * Fixed, and Overlay rather than each computing it separately.
+ *
+ * @param {number} [headerHeight] Visible image height, as passed by the caller (excludes the inset)
+ * @returns {{ insetTop: number, headerHeight: number, totalHeaderHeight: number }}
+ */
+export function useHeroHeaderHeight(headerHeight = 220) {
+  const insetTop = useSafeAreaTopInset();
+
+  return {
+    insetTop,
+    headerHeight,
+    totalHeaderHeight: insetTop + headerHeight,
+  };
+}
+
+export { styles as heroImageStyles };

package/lib/components/hero-screen-parallax.jsx

@@ -0,0 +1,46 @@
+import { View, StyleSheet } from 'react-native';
+import ParallaxScrollView from './parallax-scroll-view';
+import { renderHeaderImage, HeaderOverlay } from './hero-screen-header';
+
+const defaultStyle = StyleSheet.create({
+  headerImageWrap: {
+    width: '100%',
+    height: 220,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+  },
+});
+
+export default function HeroScreen({
+  children,
+  headerImage,
+  headerOverlay,
+  backgroundColor,
+  headerBackgroundColor,
+  headerHeight,
+  ContentComponent,
+  containerStyle,
+  headerStyle,
+  contentStyle,
+}) {
+  return (
+    <ParallaxScrollView
+      backgroundColor={backgroundColor}
+      headerBackgroundColor={headerBackgroundColor}
+      headerHeight={headerHeight}
+      ContentComponent={ContentComponent}
+      containerStyle={containerStyle}
+      headerStyle={headerStyle}
+      contentStyle={contentStyle}
+      headerImage={
+        <View style={defaultStyle.headerImageWrap}>
+          {renderHeaderImage(headerImage)}
+        </View>
+      }
+    >
+      <HeaderOverlay headerOverlay={headerOverlay} />
+      {children}
+    </ParallaxScrollView>
+  );
+}

package/lib/components/hero-screen.jsx

@@ -2,108 +2,102 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-import { View, StyleSheet, Image } from 'react-native';
-import ParallaxScrollView from './parallax-scroll-view';
+import { View, ScrollView, StyleSheet } from 'react-native';
+import {
+  renderHeaderImage,
+  HeaderOverlay,
+  useHeroHeaderHeight
+} from './hero-screen-header';
 
 const defaultStyle = StyleSheet.create({
-  headerImageWrap: {
+  container: {
+    flex: 1,
+  },
+  headerWrap: {
     width: '100%',
-    height: 220,
-    bottom: 0,
-    left: 0,
     position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 1,
   },
-  headerImage: {
+  imageInner: {
+    position: 'absolute',
+    left: 0,
     width: '100%',
-    height: '100%',
-  },
-  titleWrap: {
-    paddingHorizontal: 8,
-    paddingTop: 8,
-    paddingBottom: 8,
   },
 });
 
 /**
- * HeroScreen
+ * HeroScreenOverlay
  *
- * Thin wrapper around ParallaxScrollView that:
- * - renders a full-bleed header image
- * - renders optional title/header content below the image
- * - renders children below that
+ * Header image stays pinned on top; content scrolls underneath it
+ * (visible content gets covered by the image as the user scrolls
+ * up). The image never overlaps the status bar — a solid
+ * headerBackgroundColor strip (sized to the safe-area top inset,
+ * via useHeroHeaderHeight) sits above it.
  *
  * @param {object} props
  * @param {React.ReactNode} props.children
  * @param {object} [props.headerImage]
- *   Header image config:
- *   - source: React Native image source
- *   - style: optional image style
- *   - fit: optional resize mode, defaults to 'cover'
  * @param {React.ReactNode} [props.headerOverlay]
- *   Optional content rendered below the header image.
  * @param {string} [props.backgroundColor]
  * @param {string} [props.headerBackgroundColor]
- * @param {number} [props.headerHeight]
- * @param {React.ComponentType<{style?: any, children?: React.ReactNode}>}
- *   [props.ContentComponent]
+ * @param {number} [props.headerHeight] Visible image height (excludes the safe-area inset)
+ * @param {React.ComponentType} [props.ContentComponent]
  * @param {object} [props.containerStyle]
  * @param {object} [props.headerStyle]
  * @param {object} [props.contentStyle]
  *
  * @returns {JSX.Element}
  */
-export default function HeroScreen({
+export default function HeroScreenOverlay({
   children,
   headerImage,
   headerOverlay,
-
   backgroundColor,
   headerBackgroundColor,
-  headerHeight,
-
-  ContentComponent,
+  headerHeight = 220,
+  ContentComponent = ScrollView,
   containerStyle,
   headerStyle,
   contentStyle,
 }) {
-  let hi;
-
-  if (headerImage) {
-    const fit = headerImage.fit || 'cover';
-    const style = headerImage.style || defaultStyle.headerImage;
-
-    hi = (
-      <Image
-        source={headerImage.source}
-        style={style}
-        resizeMode={fit}
-      />
-    );
-  }
+  const { insetTop, totalHeaderHeight } = useHeroHeaderHeight(headerHeight);
 
   return (
-    <ParallaxScrollView
-      backgroundColor={backgroundColor}
-      headerBackgroundColor={headerBackgroundColor}
-      headerHeight={headerHeight}
-      ContentComponent={ContentComponent}
-      containerStyle={containerStyle}
-      headerStyle={headerStyle}
-      contentStyle={contentStyle}
-      headerImage={
-        <View style={defaultStyle.headerImageWrap}>
-          {hi}
-        </View>
-      }
+    <View
+      style={[
+        defaultStyle.container,
+        backgroundColor ? { backgroundColor } : null,
+        containerStyle,
+      ]}
     >
-      {headerOverlay ? (
-        <View style={defaultStyle.titleWrap}>
-          {headerOverlay}
-        </View>
-      ) : null}
+      <ContentComponent
+        style={[contentStyle]}
+        contentContainerStyle={{ paddingTop: 0 }}
+      >
+        <View style={{ height: totalHeaderHeight }} />
+        <HeaderOverlay headerOverlay={headerOverlay} />
+        {children}
+      </ContentComponent>
 
-      {children}
-    </ParallaxScrollView>
+      <View
+        style={[
+          defaultStyle.headerWrap,
+          { height: totalHeaderHeight },
+          headerBackgroundColor ? { backgroundColor: headerBackgroundColor } : null,
+          headerStyle,
+        ]}
+      >
+        <View
+          style={[
+            defaultStyle.imageInner,
+            { top: insetTop, height: headerHeight },
+          ]}
+        >
+          {renderHeaderImage(headerImage)}
+        </View>
+      </View>
+    </View>
   );
 }
-

package/lib/components/qr-code-form.jsx

@@ -179,6 +179,7 @@ export default function QRCodeForm({
   const responseError = getResponseError(response);
   const visibleError = error || responseError;
   const hasResult = Boolean(response && !responseError);
+  const showResponseErrorCard = Boolean(response && responseError);
   const token = hasResult ? action.getToken(response) : undefined;
 
   const renderArgs = {
@@ -297,7 +298,7 @@ export default function QRCodeForm({
    * @returns {JSX.Element|null}
    */
   function renderResult() {
-    if (!hasResult) {
+    if (!hasResult && !showResponseErrorCard) {
       return null;
     }
 
@@ -312,10 +313,10 @@ export default function QRCodeForm({
         ]}
       >
         {renderAboveQRCode ? renderAboveQRCode(renderArgs) : null}
-        {renderQRCode()}
-        {renderBelowQRCode ? renderBelowQRCode(renderArgs) : null}
-        {renderRefreshButton()}
-        {renderResetLink()}
+        {hasResult ? renderQRCode() : null}
+        {hasResult && renderBelowQRCode ? renderBelowQRCode(renderArgs) : null}
+        {hasResult ? renderRefreshButton() : null}
+        {hasResult ? renderResetLink() : renderResetButton()}
       </View>
     );
   }
@@ -390,10 +391,41 @@ export default function QRCodeForm({
   }
 
   /**
+   * Button version of reset, used in place of the link when showing
+   * the error-state card (response.error), so it matches the
+   * success card's button-style affordance instead of a text link.
+   *
+   * @returns {JSX.Element}
+   */
+  function renderResetButton() {
+    return (
+      <Pressable
+        style={[
+          defaultStyle.button,
+          defaultStyle.wideButton,
+          secondaryButtonBackgroundColor
+            ? { backgroundColor: secondaryButtonBackgroundColor }
+            : null,
+          secondaryButtonStyle,
+        ]}
+        onPress={reset}
+      >
+        <TextComponent style={secondaryButtonTextStyle}>
+          {resetLabel}
+        </TextComponent>
+      </Pressable>
+    );
+  }
+
+  /**
+   * Only handles the network/throw-style error (from the catch block
+   * in fetchQr). Response-level errors (response.error) are now
+   * rendered inside renderResult() as a styled card instead.
+   *
    * @returns {JSX.Element|null}
    */
   function renderError() {
-    if (!visibleError) {
+    if (!error) {
       return null;
     }
 
@@ -412,10 +444,8 @@ export default function QRCodeForm({
             errorTextStyle,
           ]}
         >
-          {visibleError}
+          {error}
         </TextComponent>
-
-        {responseError ? renderResetLink() : null}
       </View>
     );
   }

package/lib/hooks/use-safe-area-top-inset.js

@@ -0,0 +1,16 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/**
+ * useSafeAreaTopInset
+ *
+ * Single source of truth for "how much space does the status bar /
+ * notch take up". Used by both HeroScreen variants (via
+ * useHeroHeaderHeight) and plain Screen, so every screen in the
+ * package agrees on the same number.
+ *
+ * @returns {number}
+ */
+export function useSafeAreaTopInset() {
+  const insets = useSafeAreaInsets();
+  return insets.top;
+}

package/lib/index.js

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-const VERSION = "0.0.10";
+const VERSION = "0.0.11";
 
 // TODO: @opndev/util?
 export { formatPrice } from './utils/format-price.js';

package/lib/{screen-registery.js → screen-registry.js}

@@ -4,7 +4,10 @@
 
 import React from 'react';
 
+import BaseScreen from './components/base-screen';
 import HeroScreen from './components/hero-screen';
+import HeroScreenParallax from './components/hero-screen-parallax';
+import HeroScreenFixed from './components/hero-screen-fixed';
 import Tile from './components/tile';
 
 import FoodMenuScreen from './screens/food-menu-screen';
@@ -13,15 +16,59 @@ import NewsItemScreen from './screens/news-item-screen';
 import NewsListScreen from './screens/news-list-screen';
 import QRCodeScreen from './screens/qr-code-screen';
 
+/**
+ * createScreens
+ *
+ * @param {object} [options]
+ * @param {React.ComponentType} [options.TextComponent]
+ * @param {React.ComponentType} [options.CategoryTextComponent]
+ * @param {object} [options.styles]
+ *   App-provided style object. Used as the default source for
+ *   heroImage() when a caller doesn't pass an explicit style/fit.
+ *   Expected (optional) keys: heroImage, heroImageFit.
+ *
+ * @returns {object} Named screens + helpers, ready to re-export.
+ */
 export function createScreens({
   TextComponent,
   CategoryTextComponent,
+  styles = {},
 } = {}) {
+  /**
+   * heroImage
+   *
+   * @param {any} source
+   * @param {object} [options]
+   * @param {object} [options.style]
+   * @param {string} [options.fit] // 'cover', 'contain', etc
+   */
+  function heroImage(source, options = {}) {
+    return {
+      source,
+      style: options.style || styles.heroImage,
+      fit: options.fit || styles.heroImageFit,
+    };
+  }
+
   return {
+    heroImage,
+
     HeroScreen: (props) => (
       <HeroScreen {...props} />
     ),
 
+    HeroScreenParallax: (props) => (
+      <HeroScreenParallax {...props} />
+    ),
+
+    HeroScreenFixed: (props) => (
+      <HeroScreenFixed {...props} />
+    ),
+
+    BaseScreen: (props) => (
+      <BaseScreen {...props} />
+    ),
+
     FoodMenuScreen: (props) => (
       <FoodMenuScreen
         {...props}

package/package.json

@@ -11,12 +11,13 @@
   "exports": {
     ".": "./lib/index.js",
     "./components": "./lib/components.js",
-    "./globals": "./lib/screen-registery.js",
-    "./hero-screen-registry": "./lib/hero-screen-registery.js",
-    "./lite": "./lib/hero-screen-registery.js",
+    "./globals": "./lib/screen-registry.js",
+    "./hero-screen-registry": "./lib/hero-screen-registry.js",
+    "./hooks/use-safe-area-top-inset": "./lib/hooks/use-safe-area-top-inset.js",
+    "./lite": "./lib/hero-screen-registry.js",
     "./notifications": "./lib/notifications.js",
     "./notifications-fcm": "./lib/notifications/fcm.js",
-    "./screen-registery": "./lib/screen-registery.js",
+    "./screen-registry": "./lib/screen-registry.js",
     "./screens": "./lib/screens.js"
   },
   "keywords": [],
@@ -33,5 +34,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.10"
+  "version": "0.0.11"
 }