@opndev/react-native-events 0.0.13 → 0.0.15

package/Changes

@@ -1,5 +1,15 @@
 Revision history for @opndev/opndev-react-native-events
 
+0.0.15       2026-06-26 22:56:26Z
+
+  * Add debugRouteState() to debug export to debug route states more easily
+  * Throw shade at panels: I mean shadows, we not dissing panels here.
+
+0.0.14       2026-06-26 04:53:23Z
+
+  * Add Panel instead of a Tile, Tiles are more buttony thing. Panels are
+    panels. ha.
+
 0.0.13       2026-06-26 03:59:55Z
 
   * Update news item segment to be included as a widget.

package/lib/components/app-screen-top-bar.jsx

@@ -84,10 +84,10 @@ export default function AppScreenTopBar({
   return (
     <View
       style={[
+        style,
         styles.bar,
         { height, justifyContent, paddingHorizontal: horizontalPadding, paddingBottom: verticalPadding },
         backgroundColor ? { backgroundColor } : null,
-        style,
       ]}
     >
       {applyBarStyling(logo, { height, maxWidthPixels })}

package/lib/components/app-screen.jsx

@@ -1,7 +1,6 @@
 // SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
-
 import { View, StyleSheet } from 'react-native';
 import { useSafeAreaTopInset } from '../hooks/use-safe-area-top-inset';
 import { AppScreenOffsetContext } from '../hooks/use-app-screen-offset';
@@ -17,6 +16,7 @@ const defaultStyle = StyleSheet.create({
     left: 0,
     width: '100%',
     zIndex: 10,
+    elevation: 10,
   },
 });
 
@@ -67,6 +67,7 @@ export default function AppScreen({
             style={[
               defaultStyle.topBarWrap,
               { height: offset, paddingTop: insetTop },
+              topBar.props?.backgroundColor ? { backgroundColor: topBar.props.backgroundColor } : null,
             ]}
           >
             {topBar}

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

@@ -4,8 +4,9 @@
 
 import { View, ScrollView, StyleSheet } from 'react-native';
 import {
-  renderHeaderImage,
   HeaderOverlay,
+  HeaderContent,
+  splitCarouselChildren,
   useHeroHeaderHeight,
   heroContentStyle,
 } from './hero-screen-header';
@@ -38,9 +39,12 @@ const defaultStyle = StyleSheet.create({
  * gap: 16 — so spacing matches the parallax variant exactly.
  *
  * @param {object} props
- * @param {React.ReactNode} props.children
- * @param {object} [props.headerImage]
+ * @param {React.ReactNode} props.children Normal body content, and/or <CarouselScreen> elements for slides.
+ * @param {object} [props.headerImage] Used when there are no <CarouselScreen> children.
  * @param {React.ReactNode} [props.headerOverlay]
+ * @param {(slide: { item: any, route: any }, index: number) => void} [props.onSlidePress]
+ * @param {number} [props.autoPlayInterval] Defaults to 4000. Pass 0 to disable.
+ * @param {boolean} [props.loop] Defaults to true.
  * @param {string} [props.backgroundColor]
  * @param {string} [props.headerBackgroundColor]
  * @param {number} [props.headerHeight] Visible image height (excludes the safe-area inset)
@@ -55,6 +59,9 @@ export default function HeroScreenFixed({
   children,
   headerImage,
   headerOverlay,
+  onSlidePress,
+  autoPlayInterval,
+  loop,
   backgroundColor,
   headerBackgroundColor,
   headerHeight = 220,
@@ -63,7 +70,8 @@ export default function HeroScreenFixed({
   headerStyle,
   contentStyle,
 }) {
-  const { insetTop, totalHeaderHeight } = useHeroHeaderHeight(headerHeight);
+  const { topOffset, totalHeaderHeight } = useHeroHeaderHeight(headerHeight);
+  const { slideElements, bodyChildren } = splitCarouselChildren(children);
 
   return (
     <View
@@ -84,10 +92,16 @@ export default function HeroScreenFixed({
         <View
           style={[
             defaultStyle.imageInner,
-            { top: insetTop, height: headerHeight },
+            { top: topOffset, height: headerHeight },
           ]}
         >
-          {renderHeaderImage(headerImage)}
+          <HeaderContent
+            headerImage={headerImage}
+            slideElements={slideElements}
+            onSlidePress={onSlidePress}
+            autoPlayInterval={autoPlayInterval}
+            loop={loop}
+          />
         </View>
       </View>
 
@@ -97,7 +111,7 @@ export default function HeroScreenFixed({
       >
         <View style={[heroContentStyle, contentStyle]}>
           <HeaderOverlay headerOverlay={headerOverlay} />
-          {children}
+          {bodyChildren}
         </View>
       </ContentComponent>
     </View>

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

@@ -1,9 +1,7 @@
-// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
-//
-// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
-
+import { useState, isValidElement, Children } from 'react';
 import { View, Image, Pressable, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import Carousel from 'react-native-reanimated-carousel';
 import { useAppScreenOffset } from '../hooks/use-app-screen-offset';
 
 const styles = StyleSheet.create({
@@ -25,6 +23,27 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 3,
   },
+  carouselFill: StyleSheet.absoluteFillObject,
+  slideFill: { flex: 1 },
+  dotsRow: {
+    position: 'absolute',
+    bottom: 12,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: 'rgba(255,255,255,0.5)',
+  },
+  dotActive: {
+    backgroundColor: '#FFFFFF',
+    width: 16,
+  },
 });
 
 /**
@@ -66,6 +85,140 @@ export function HeaderOverlay({ headerOverlay }) {
   return <View style={styles.titleWrap}>{headerOverlay}</View>;
 }
 
+/**
+ * CarouselScreen
+ *
+ * A marker component, not a real standalone screen — used as a
+ * child of any Hero variant to declare one carousel slide:
+ *
+ *   <HeroScreenFixed onSlidePress={(slide) => router.push(slide.route)}>
+ *     <CarouselScreen item={fooData} route="/foo">
+ *       ...whatever JSX you want for this slide...
+ *     </CarouselScreen>
+ *     <CarouselScreen item={barData} route="/bar">
+ *       ...
+ *     </CarouselScreen>
+ *   </HeroScreenFixed>
+ *
+ * Every Hero variant scans its children for these by type (via
+ * splitCarouselChildren below) and pulls out `item`/`route` plus
+ * your own nested children for each slide. Any non-CarouselScreen
+ * children are treated as normal body content, same as always.
+ *
+ * If rendered standalone it just renders its own children, so it's
+ * harmless either way.
+ *
+ * @param {object} props
+ * @param {any} [props.item]
+ * @param {any} [props.route]
+ * @param {React.ReactNode} props.children
+ */
+export function CarouselScreen({ children }) {
+  return children ?? null;
+}
+
+/**
+ * splitCarouselChildren
+ *
+ * Separates a Hero variant's children into carousel slides
+ * (CarouselScreen elements) and normal body content (everything
+ * else). Shared by every Hero variant so the splitting logic is
+ * identical across all of them.
+ *
+ * @param {React.ReactNode} children
+ * @returns {{ slideElements: React.ReactElement[], bodyChildren: React.ReactNode[] }}
+ */
+export function splitCarouselChildren(children) {
+  const childArray = Children.toArray(children);
+
+  const slideElements = childArray.filter(
+    (child) => isValidElement(child) && child.type === CarouselScreen
+  );
+  const bodyChildren = childArray.filter(
+    (child) => !(isValidElement(child) && child.type === CarouselScreen)
+  );
+
+  return { slideElements, bodyChildren };
+}
+
+/**
+ * HeaderContent
+ *
+ * The single thing every Hero variant renders inside its header
+ * box — decides whether that's a static image (renderHeaderImage,
+ * unchanged default behaviour) or a swipeable/auto-advancing
+ * carousel (when CarouselScreen children were found), so a Hero
+ * variant only ever needs to swap one line to gain carousel
+ * support, with zero changes to its own scroll/positioning logic.
+ *
+ * Fills whatever box it's placed in — each variant owns its own
+ * positioning (Fixed/Overlay via their own imageInner wrapper,
+ * Parallax via ParallaxScrollView's existing wrapper) — this
+ * component doesn't position itself.
+ *
+ * @param {object} props
+ * @param {object} [props.headerImage] Used when there are no slides.
+ * @param {React.ReactElement[]} [props.slideElements] From splitCarouselChildren. When empty/absent, renders the static image instead.
+ * @param {(slide: { item: any, route: any }, index: number) => void} [props.onSlidePress]
+ * @param {number} [props.autoPlayInterval] Defaults to 4000. Pass 0 to disable.
+ * @param {boolean} [props.loop] Defaults to true.
+ *
+ * @returns {JSX.Element|null}
+ */
+export function HeaderContent({
+  headerImage,
+  slideElements,
+  onSlidePress,
+  autoPlayInterval = 4000,
+  loop = true,
+}) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  if (!slideElements || slideElements.length === 0) {
+    return renderHeaderImage(headerImage);
+  }
+
+  return (
+    <View style={styles.carouselFill}>
+      <Carousel
+        style={{ width: '100%', height: '100%' }}
+        data={slideElements}
+        loop={loop}
+        autoPlay={autoPlayInterval > 0}
+        autoPlayInterval={autoPlayInterval}
+        onSnapToItem={setActiveIndex}
+        renderItem={({ item: slideElement, index }) => {
+          const { item, route } = slideElement.props;
+          const onPress = onSlidePress
+            ? () => onSlidePress({ item, route }, index)
+            : undefined;
+
+          if (!onPress) {
+            return <View style={styles.slideFill}>{slideElement}</View>;
+          }
+
+          return (
+            <Pressable style={styles.slideFill} onPress={onPress}>
+              {slideElement}
+            </Pressable>
+          );
+        }}
+      />
+
+      {slideElements.length > 1 ? (
+        <View style={styles.dotsRow}>
+          {slideElements.map((_, i) => (
+            <View
+              key={i}
+              style={[styles.dot, i === activeIndex ? styles.dotActive : null]}
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
 /**
  * useTopOffset
  *

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

@@ -2,49 +2,78 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-import { View, StyleSheet } from 'react-native';
+import {
+  HeaderOverlay,
+  HeaderContent,
+  splitCarouselChildren,
+} from './hero-screen-header';
 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({
+/**
+ * HeroScreenParallax
+ *
+ * Header image scales/translates with scroll (the classic parallax
+ * effect) via ParallaxScrollView. Carousel support needed no new
+ * positioning logic here at all — ParallaxScrollView already treats
+ * its header as an opaque element it animates, so swapping in
+ * HeaderContent (image-or-carousel) instead of a plain image just
+ * works, same one-line swap as Fixed/Overlay.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children Normal body content, and/or <CarouselScreen> elements for slides.
+ * @param {object} [props.headerImage] Used when there are no <CarouselScreen> children.
+ * @param {React.ReactNode} [props.headerOverlay]
+ * @param {(slide: { item: any, route: any }, index: number) => void} [props.onSlidePress]
+ * @param {number} [props.autoPlayInterval] Defaults to 4000. Pass 0 to disable.
+ * @param {boolean} [props.loop] Defaults to true.
+ * @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 HeroScreenParallax({
   children,
   headerImage,
   headerOverlay,
+  onSlidePress,
+  autoPlayInterval,
+  loop,
   backgroundColor,
   headerBackgroundColor,
   headerHeight,
-  ContentComponent,
   containerStyle,
   headerStyle,
   contentStyle,
+  ContentComponent,
 }) {
+  const { slideElements, bodyChildren } = splitCarouselChildren(children);
+
   return (
     <ParallaxScrollView
+      headerImage={
+        <HeaderContent
+          headerImage={headerImage}
+          slideElements={slideElements}
+          onSlidePress={onSlidePress}
+          autoPlayInterval={autoPlayInterval}
+          loop={loop}
+        />
+      }
       backgroundColor={backgroundColor}
       headerBackgroundColor={headerBackgroundColor}
       headerHeight={headerHeight}
-      ContentComponent={ContentComponent}
       containerStyle={containerStyle}
       headerStyle={headerStyle}
       contentStyle={contentStyle}
-      headerImage={
-        <View style={defaultStyle.headerImageWrap}>
-          {renderHeaderImage(headerImage)}
-        </View>
-      }
+      ContentComponent={ContentComponent}
     >
       <HeaderOverlay headerOverlay={headerOverlay} />
-      {children}
+      {bodyChildren}
     </ParallaxScrollView>
   );
 }

package/lib/components/hero-screen.jsx

@@ -4,8 +4,9 @@
 
 import { View, ScrollView, StyleSheet } from 'react-native';
 import {
-  renderHeaderImage,
   HeaderOverlay,
+  HeaderContent,
+  splitCarouselChildren,
   BackButton,
   useHeroHeaderHeight,
   heroContentStyle,
@@ -44,10 +45,13 @@ const defaultStyle = StyleSheet.create({
  * own padded content area.
  *
  * @param {object} props
- * @param {React.ReactNode} props.children
- * @param {object} [props.headerImage]
+ * @param {React.ReactNode} props.children Normal body content, and/or <CarouselScreen> elements for slides.
+ * @param {object} [props.headerImage] Used when there are no <CarouselScreen> children.
  * @param {React.ReactNode} [props.headerOverlay]
- * @param {Function} [props.onBack] Renders a back button over the header image when provided. Omit for no back button.
+ * @param {Function} [props.onBack] Renders a back button over the header when provided. Omit for no back button.
+ * @param {(slide: { item: any, route: any }, index: number) => void} [props.onSlidePress]
+ * @param {number} [props.autoPlayInterval] Defaults to 4000. Pass 0 to disable.
+ * @param {boolean} [props.loop] Defaults to true.
  * @param {string} [props.backgroundColor]
  * @param {string} [props.headerBackgroundColor]
  * @param {number} [props.headerHeight] Visible image height (excludes the safe-area inset)
@@ -63,6 +67,9 @@ export default function HeroScreenOverlay({
   headerImage,
   headerOverlay,
   onBack,
+  onSlidePress,
+  autoPlayInterval,
+  loop,
   backgroundColor,
   headerBackgroundColor,
   headerHeight = 220,
@@ -72,6 +79,7 @@ export default function HeroScreenOverlay({
   contentStyle,
 }) {
   const { topOffset, totalHeaderHeight } = useHeroHeaderHeight(headerHeight);
+  const { slideElements, bodyChildren } = splitCarouselChildren(children);
 
   return (
     <View
@@ -89,7 +97,7 @@ export default function HeroScreenOverlay({
 
         <View style={[heroContentStyle, contentStyle]}>
           <HeaderOverlay headerOverlay={headerOverlay} />
-          {children}
+          {bodyChildren}
         </View>
       </ContentComponent>
 
@@ -107,7 +115,13 @@ export default function HeroScreenOverlay({
             { top: topOffset, height: headerHeight },
           ]}
         >
-          {renderHeaderImage(headerImage)}
+          <HeaderContent
+            headerImage={headerImage}
+            slideElements={slideElements}
+            onSlidePress={onSlidePress}
+            autoPlayInterval={autoPlayInterval}
+            loop={loop}
+          />
         </View>
 
         <BackButton

package/lib/components/panel.jsx

@@ -0,0 +1,99 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+
+const defaultStyle = StyleSheet.create({
+  shadowWrap: {
+    borderRadius: 16,
+  },
+  shadowOn: {
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+  },
+  surface: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  content: {
+    padding: 16,
+  },
+});
+
+/**
+ * Panel
+ *
+ * Simple rounded-corner surface that sizes to its content. Unlike
+ * Tile (built for a centered icon+label grid cell with flex: 1),
+ * Panel imposes no layout assumptions on its children at all — no
+ * forced centering, no forced flex sizing — so content-driven
+ * widgets (lists, text blocks, NewsWidget, etc.) render exactly as
+ * they would un-wrapped, just inside a rounded/backgrounded card.
+ *
+ * Internally split into two layers — an outer view that casts the
+ * shadow (when enabled) and an inner view that clips content to the
+ * rounded corners. This is deliberate: a shadow renders outside a
+ * view's own bounds, so a single view with both `overflow: hidden`
+ * and a shadow would clip its own shadow into invisibility. The
+ * split means `shadow` can be toggled on/off with no other changes
+ * needed, and panels that don't use it are unaffected.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string} [props.backgroundColor]
+ * @param {boolean} [props.shadow] Floating-card drop shadow. Defaults to false.
+ * @param {Function} [props.onPress] If provided, the whole panel becomes pressable.
+ * @param {object} [props.style] Style for the outer (shadow-casting) wrapper.
+ * @param {object} [props.contentStyle] Style for the inner content wrapper (default padding: 16).
+ *
+ * @returns {JSX.Element}
+ */
+export default function Panel({
+  children,
+  backgroundColor,
+  shadow = false,
+  onPress,
+  style,
+  contentStyle,
+}) {
+  const surfaceStyle = [
+    defaultStyle.surface,
+    backgroundColor ? { backgroundColor } : null,
+  ];
+
+  const content = (
+    <View style={[defaultStyle.content, contentStyle]}>
+      {children}
+    </View>
+  );
+
+  const inner = onPress ? (
+    <Pressable onPress={onPress} style={surfaceStyle}>
+      {content}
+    </Pressable>
+  ) : (
+    <View style={surfaceStyle}>{content}</View>
+  );
+
+  return (
+    <View
+      style={[
+        defaultStyle.shadowWrap,
+        shadow ? defaultStyle.shadowOn : null,
+        // Android's elevation shadow needs an opaque shape with a
+        // matching borderRadius to cast a correctly-rounded shadow —
+        // a fully transparent outer view can shadow as a square box
+        // instead of following the rounded silhouette.
+        shadow && backgroundColor ? { backgroundColor } : null,
+        style,
+      ]}
+    >
+      {inner}
+    </View>
+  );
+}

package/lib/components/parallax-scroll-view.js

@@ -11,7 +11,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useTopOffset, heroContentStyle } from './hero-screen-header';
 
-const DEFAULT_HEADER_HEIGHT = 250;
+const DEFAULT_HEADER_HEIGHT = 220;
 
 const defaultStyle = StyleSheet.create({
   container: {
@@ -50,8 +50,11 @@ const defaultStyle = StyleSheet.create({
  *   Background color for the scroll view container.
  * @param {string} [props.headerBackgroundColor]
  *   Background color shown behind the header image.
- * @param {number} [props.headerHeight=250]
+ * @param {number} [props.headerHeight=220]
  *   Visible height of the parallax header image (excludes the top offset).
+ *   Matches HeroScreenFixed/HeroScreenOverlay's default — kept in
+ *   sync deliberately so all three variants render identically when
+ *   no explicit headerHeight is passed.
  * @param {React.ComponentType<{style?: any, children?: React.ReactNode}>}
  *   [props.ContentComponent=View]
  *   Wrapper used for the content area below the header.

package/lib/components.js

@@ -11,6 +11,7 @@ export { default as Tile } from './components/tile.jsx';
 export { default as GradientTile } from './components/gradient-tile.jsx';
 export { default as QRCodeForm } from './components/qr-code-form.jsx';
 export { default as ScaledLogo } from './components/scaled-logo.jsx';
+export { default as Panel } from './components/panel.jsx';
 
 export { openUrl, openApp, openExternal } from './utils/launch.js';
 

package/lib/debug.js

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+export { debugRouteState } from './utils/route-debug.js'

package/lib/index.js

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

package/lib/utils/route-debug.js

@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import { useNavigationState } from '@react-navigation/native';
+import { useRouter } from 'expo-router';
+
+export function debugRouteState() {
+  const router = useRouter();
+  const navState = useNavigationState((state) => state);
+
+  console.log('[news stack]',
+    JSON.stringify(navState?.routes?.map((r) => (
+        { name: r.name, params: r.params, key: r.key }
+      )),
+      null,
+      2
+    )
+  );
+
+}

package/lib/widgets/news-widget.jsx

@@ -1,3 +1,7 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
 import React, {
   forwardRef,
   useEffect,
@@ -22,6 +26,12 @@ const defaultStyle = StyleSheet.create({
   title: {
     fontWeight: '700',
   },
+  divider: {
+    height: 1,
+    backgroundColor: 'rgba(0,0,0,0.15)',
+    marginTop: 4,
+    marginBottom: 4,
+  },
   item: {
     flexDirection: 'row',
     gap: 8,
@@ -59,6 +69,8 @@ const defaultStyle = StyleSheet.create({
  * @param {string} [props.bearerToken]
  * @param {number} [props.limit] Max items shown. Defaults to 4.
  * @param {string} [props.title] Defaults to 'News'.
+ * @param {boolean} [props.showDivider] Thin line under the title, like 'News' / '-----'. Defaults to true. Ignored if title is falsy.
+ * @param {object} [props.dividerStyle]
  * @param {React.ComponentType} [props.TextComponent] Defaults to Text.
  * @param {Function} [props.onPressItem]
  * @param {number} [props.refreshIntervalMs] Defaults to 15 minutes.
@@ -79,6 +91,8 @@ const NewsWidget = forwardRef(function NewsWidget(
     bearerToken,
     limit = 4,
     title = 'News',
+    showDivider = true,
+    dividerStyle,
     TextComponent = Text,
     onPressItem,
     refreshIntervalMs = 15 * 60 * 1000,
@@ -142,6 +156,10 @@ const NewsWidget = forwardRef(function NewsWidget(
         </TextComponent>
       ) : null}
 
+      {title && showDivider ? (
+        <View style={[defaultStyle.divider, dividerStyle]} />
+      ) : null}
+
       {loading ? <ActivityIndicator /> : null}
 
       {!loading && error ? (
@@ -169,3 +187,4 @@ const NewsWidget = forwardRef(function NewsWidget(
 });
 
 export default NewsWidget;
+

package/package.json

@@ -11,6 +11,7 @@
   "exports": {
     ".": "./lib/index.js",
     "./components": "./lib/components.js",
+    "./debug": "./lib/debug.js",
     "./globals": "./lib/screen-registry.js",
     "./hero-screen-registry": "./lib/hero-screen-registry.js",
     "./lite": "./lib/hero-screen-registry.js",
@@ -34,5 +35,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.13"
+  "version": "0.0.15"
 }