@opndev/react-native-events

Reusable React Native / Expo building blocks for event-style apps.

The package is meant to keep common event app UI and utility code in one place without forcing a full app structure on the consuming project. It contains screens, components, data widgets, notification helpers and small utilities that can be composed inside an Expo application.

Goals

• Keep event app screens consistent across projects.
• Avoid copying common React Native UI patterns between apps.
• Keep app-specific navigation, routing and API choices in the app itself.
• Provide small, reusable pieces instead of a complete framework.
• Keep dependencies minimal and Expo-friendly.

Main features

Screen building blocks

The screen exports cover common event app flows such as food vendors, food menus and QR-code based check-in or registration flows. They are designed to be configured by the consuming app and to leave navigation decisions to the app.

Hero and layout components

The component exports include hero screens, fixed or parallax headers, tiles, panels, logos and QR-code form pieces. These are useful for building branded mobile screens with a shared visual structure.

Data widgets

The widget exports provide simple wrappers for rendering static or remote data. They are intended for lightweight app sections where the data source can change, but the presentation pattern stays mostly the same.

Notifications

Notification helpers are included for permission checks, Expo push token lookup, token registration and opening the platform notification settings.

Utilities

The root export includes small utilities for prices, color contrast, color mixing, header image selection and external app or URL launching.

Package exports

The package exposes focused entry points so apps can import only the area they need:

| Export | Purpose | | --- | --- | | @opndev/react-native-events | General utilities. | | @opndev/react-native-events/layouts | Layout primitives such as AppLayout, BaseLayout, and hero layouts. | | @opndev/react-native-events/components | Reusable UI components. | | @opndev/react-native-events/screens | Prebuilt event screens. | | @opndev/react-native-events/widgets | Static and remote data widgets. | | @opndev/react-native-events/notifications | Expo notification helpers. | | @opndev/react-native-events/notifications-fcm | FCM-related notification helpers. | | @opndev/react-native-events/debug | Debug helpers. | | @opndev/react-native-events/screen-registry | Screen registry helpers. | | @opndev/react-native-events/lite | Lightweight hero screen registry entry. |

Installation

Install the package in the consuming React Native / Expo app:

npm install @opndev/react-native-events

Dependencies

Because of how annoyingly (peer) dependencies work in npm land this module doesn't define any dependencies itself. Compound this with native modules for kotlin/swift and.. You should be ready to have these dependencies installed when using this package.

• @expo/vector-icons
• @react-native-async-storage/async-storage
• @react-native-firebase/messaging
• @react-navigation/native
• expo-constants
• expo-linear-gradient
• expo-notifications
• expo-router
• expo-secure-store
• js-sha3
• react
• react-native
• react-native-markdown-display
• react-native-qrcode-svg
• react-native-reanimated
• react-native-reanimated-carousel
• react-native-safe-area-context

Development

Useful local commands:

| Command | Description | | --- | --- | | npm test | Run the test suite. | | npm run jsdoc | Generate API documentation from JSDoc comments. | | npm run build | Build the package. | | npm run pkg | Create a package artifact. | | npm run release | Release the package. |

Documentation

API documentation is generated with JSDoc:

npm run jsdoc

The JSDoc configuration scans the library source, including JSX files, so components, screens, widgets, hooks and helpers should appear in the generated output.

Project layout

| Path | Description | | --- | --- | | lib/components | Reusable React Native UI components. | | lib/screens | Prebuilt event-oriented screens. | | lib/widgets | Data rendering widgets. | | lib/hooks | Shared React hooks. | | lib/notifications | Notification integrations. | | lib/utils | Small utility functions. | | lib/actions | Event action helpers. | | t | Tests. |

Design notes

This package intentionally does not own the complete app. The consuming app should still decide routing, API endpoints, theme values, assets, business logic and deployment setup.

The components favor configuration through props and render hooks where that keeps the package reusable. App-specific behavior should stay in the app unless it is useful across multiple event projects.

If a more than three props are used for one element it should become a clustered prop, eg: titleHeader, titleColor and titleFont become titleStyle. This keeps prop-usage easier to reason about. Some older components are not using this design rule, they are exceptions to this rule.

License

GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions. See the license files in LICENSES/ for the full terms.